1.移動設備優先
<span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="tag"><img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"..."</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-responsive"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Responsive image"</span><span class="tag">>
3全局佈局說明
</span><pre style="" name="code" class="css prettyprint prettyprinted"><span class="pln">body </span><span class="pun">{</span><span class="pln">
font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Helvetica Neue"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Helvetica</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;//默認字體</span><span class="pln">
font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">14px</span><span class="pun">;</span><span class="pln">
line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.428571429</span><span class="pun">;</span><span class="pln">
color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#333333;</span><span class="pln">
background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffffff;</span><span class="pln">
</span><span class="pun">}</span>4.文字排版
使用 @font-family-base、 @font-size-base 和 @line-height-base 屬性作爲排版樣式
5容器 Container
6,響應式媒體查詢
<span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">768px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">750px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span>7.Grid佈局
用到的大小列 xs sm md lg ,用媒體控制大小
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
| 額外的小設備收集（<768px） | 小型設備平板電腦（≥768px） | 中型設備臺式電腦（≥992px） | 大型設備臺式電腦（≥1200px） | |
|---|---|---|---|---|
| 網格行爲 | 一直是水平的 | 以摺疊開始，斷點以上是水平的 | 以摺疊開始，斷點以上是水平的 | 以摺疊開始，斷點以上是水平的 |
| 最大容器寬度 | None (auto) | 750px | 970px | 1170px |
| Class 前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列 # | 12 | 12 | 12 | 12 |
| 最大列寬 | Auto | 60px | 78px | 95px |
| 間隙寬度 | 30px （一個列的每邊分別 15px） |
30px （一個列的每邊分別 15px） |
30px （一個列的每邊分別 15px） |
30px （一個列的每邊分別 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。
8使用col-md-push-* 和 .col-md-pull-*能夠使列排序，讓一個向右推進8格，一個拉近（pull)
col-md-push-8 col-md-pull
9.
HTML 的默認強調標籤 <small>（設置文本爲父文本大小的 85%）、<strong>（設置文本爲更粗的文本）、<em>（設置文本爲斜體）
<small>本行內容是在標籤內</small><br> <strong>本行內容是在標籤內</strong><br> <em>本行內容是在標籤內，並呈現爲斜體</em><br> <p class="text-left">向左對齊文本</p> <p class="text-center">居中對齊文本</p> <p class="text-right">向右對齊文本</p> <p class="text-muted">本行內容是減弱的</p> <p class="text-primary">本行內容帶有一個 warning class</p> <p class="text-success">本行內容帶有一個 success class</p> <p class="text-info">本行內容帶有一個 info class</p> <p class="text-warning">本行內容帶有一個 warning class</p> <p class="text-danger">本行內容帶有一個 danger class</p>10縮寫標籤abbr，使用屬性initialism更小
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>11代碼使用pre和code標籤
12.表格類
.table-striped通過添加 .table-striped class .table-striped 條紋表格
邊框表格.table-bordered class .table-bordered
table-hover 懸停表格
精簡表格 table-condensed
.table.table響應式表格 table-responsive.table-responsive.table-responsive
上下文佈局
| 類 | 描述 |
|---|---|
| .active | 對某一特定的行或單元格應用懸停顏色 |
| .success | 表示一個成功的或積極的動作 |
| .warning | 表示一個需要注意的警告 |
| .danger | 表示一個危險的或潛在的負面動作 |
<table class="table"> <caption>上下文表格佈局</caption> <thead> <tr> <th>產品</th> <th>付款日期</th> <th>狀態</th> </tr> </thead> <tbody> <tr class="active"> <td>產品1</td> <td>23/11/2013</td> <td>待發貨</td> </tr> <tr class="success"> <td>產品2</td> <td>10/11/2013</td> <td>發貨中</td> </tr> <tr class="warning"> <td>產品3</td> <td>20/10/2013</td> <td>待確認</td> </tr> <tr class="danger"> <td>產品4</td> <td>20/10/2013</td> <td>已退貨</td> </tr> </tbody> </table> </body> </html>13.表單用form-control類
.table-condensed
.table-hover
<form role="form"> <div class="form-group"> <label for="name">文本框</label> <textarea class="form-control" rows="3"></textarea> </div> </form>14靜態控件
當您需要在一個水平表單內的表單標籤後放置純文本時，請在 <p> 上使用 class 。form-control-static
15.按鈕控件
| btn | 默認的/標準的按鈕。 |
| btn-primary | 提供額外的視覺效果，標識一組按鈕中的原始動作。 |
| btn-success | 表示一個成功的或積極的動作。 |
| btn-info | 信息警告消息的上下文按鈕。 |
| btn-warning | 表示應謹慎採取的動作。 |
| btn-danger | 表示一個危險的或潛在的負面動作。 |
| btn-link | 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行爲。 |
<!-- 標準的按鈕 --> <button type="button" class="btn btn-default">默認按鈕</button> <!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button> <!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button> <!-- 信息警告消息的上下文按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button> <!-- 表示應謹慎採取的動作 --> <button type="button" class="btn btn-warning">警告按鈕</button> <!-- 表示一個危險的或潛在的負面動作 --> <button type="button" class="btn btn-danger">危險按鈕</button> <!-- 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行爲 --> <button type="button" class="btn btn-link">鏈接按鈕</button>16.按鈕大小
| Class | 描述 |
|---|---|
| .btn-lg | 這會讓按鈕看起來比較大。 |
| .btn-sm | 這會讓按鈕看起來比較小。 |
| .btn-xs | 這會讓按鈕看起來特別小。 |
| .btn-block | 這會創建塊級的按鈕，會橫跨父元素的全部寬度。 |
active 和disabled
您可以在 <a>、<button> 或 <input> 元素上使用按鈕 class。但是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。
18.快速浮動
pull-left 和pull-right
19使用center-block來居中元素
使用clearfix來清除浮動
.form-control-static
.table-hover