bootstrap學習 ——01
1、柵格系統
1.柵格類數字表示的意思
.col-xs-12 .col-sm-6 .col-md-8 .col-lg-12 這裏的數字代表在各自對應的屏幕狀態下占據的比例。12為總列數。比如col-sm-6，就是指在sm屏幕狀態下，包含此類的盒子占據6份的寬度，也就是一半。其他的以此類推。
如果在一個 .row 內包含的列（column）大於12個，包含多余列（column）的元素將作為一個整體單元被另起一行排列。如9+4，那麽第一行就只有9，另一個盒子另起一行。
2.列偏移offset：
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
3.頁面主體：
Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 <body> 元素和所有段落元素。另外，<p> （段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。
4.被刪除文本使用<del>，表刪除，無用文本用<s>兩個的樣式完全一樣。
5.文本對齊：直接添加類名即可，有以下幾種：
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
6.內聯列表：<ul class="list-inline"><li>...</li></ul> 實現列表同行並列的樣式，類似於浮動。
7.水平排列的dl，dt，dd，就是實現dt，dd對應的排列在一行，小屏幕是兩行，大屏幕在一行顯示。只需要給
8.響應式表格:將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。
2.表單
1.所有設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。
2.內聯表單:就是輸入框,按鈕等放在一行上
為 <form> 元素添加 .form-inline 類可使其內容左對齊並且表現 為 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。
3.bootstrap中給元素添加.sr-only類,可以將此元素隱藏.
4.水平排列表單 .form-horizontal
5.input元素的幾種狀態:disabled,readonly
6.為了讓所有用戶都能訪問你的網站，我們強烈建議為所有輸入框添加 label 標簽。如果你不希望將 label 標簽展示出來，可以通過添加 .sr-only 類來實現。
7.輸入框尺寸:通過 .input-lg 類似的類可以為控件設置高度，通過 .col-lg-* 類似的類可以為控件設置寬度。
3、按鈕
1.為 <a>、<button> 或 <input> 元素添加按鈕類即可使用 Bootstrap 提供的樣式。
<a class="btn btn-default" href="#" role="button">Link</a>
bootstrap學習 ——01