bootstrap 作為一款在github上有118k star的響應式項目是很值得我們學習的， 其中的柵格系統的思想對於響應式布局是很好的思想，bootstrap分為幾大塊，今天學習總結的是樣式篇，對於這一章，我更多的是認為就是一個記憶的過程，因為這些全局樣式 如果你對css和html比較精通手寫也是可以的，但是bootstrap所提供的less預編譯，他的樣式寫法和類名寫法還是很有參考意義的；在學習bootstrap之前建議去 學習一下grunt和 less 那樣會更有助於學習理解和記憶；為了更好的記憶和學習我寫了下面的文章，列出了一些我認為比較重要的地方跟大家分享學習。 好了下面大家一起記單詞吧！
標題
h1-h6 small 副標題 提供.h1 到.h6 和 .small 的類名為了便於記憶初始大小是36px 然后依次按 6 6 4 4 2 的大小遞減
| 標題 | 字體大小 |
|---|---|
| h1 | 36px |
| h2 | 30px |
| h3 | 24px |
| h4 | 18px |
| h5 | 14px |
| h6 | 12px |
Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 <body> 元素和所有段落元素。另外，
（段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。
記住一些標簽
| 標簽名 | 作用 |
|---|---|
| .lead | 類可以讓段落突出顯示。 |
| u | 下划線 |
| strong | 強調 |
| em | 斜體 |
| ins del | 被刪除的和無用文本 |
| .text-left text-方向 | 文本對齊類 |
| .text-justify | |
| .text-nowrap | 不換行 |
| address | 地址 |
| ul.list-unstyled | 無樣式列表 |
| ul.list-inline | 內聯列表 |
| .text-overflow | 自動截斷 |
| dl.dl-horizontal | 橫着的描述 |
<dl> <dt>...</dt> <dd>...</dd> </dl>帶有描述的短語列表。
橫着的
表格
<table class="table">...
| 類名 | 作用 |
|---|---|
| .table-striped | 條紋狀表格 |
| .table-bordered | 帶邊框的表格 |
| .table-hover | 鼠標懸停 |
| 狀態類 | 作用 (就是顏色不一樣) |
|---|---|
| .active | 鼠標懸停在行或單元格上時所設置的顏色 |
| .success | 標識成功或積極的動作 |
| .info | 標識普通的提示信息或動作 |
| .warning | 標識警告或需要用戶注意 |
| .danger | 標識危險或潛在的帶來負面影響的動作 |
| .table-responsive | 響應式表格 |
注意響應式表格這個不是在table上面加是在 table外面的div加類名（其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。）
表單 （在全局樣式中這部分算是比較多的內容了）
| 類名 | 作用 |
|---|---|
| .form-control | 寬度屬性為 width: 100% |
| .form-group | label 等元素包在 .form-group 中可以獲得最好的排列 |
| label.sr-only | 將其隱藏 |
| .checkbox-inline | inline的checkbox |
| .radio-inline | inline的radio |
| .form-control-static | 靜態控件（及純文本） |
水平排列的表單
通過為表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，可以將 label 標簽和控件組水平並排布局
將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列 內聯表單
按鈕
tip:a role="button" 作為不是點擊的功能
尺寸
.btn-lg、.btn-sm 或 .btn-xs
激活狀態 .active btn禁用狀態 disabled="disabled" 鏈接（<a>）元素 .disabled 類 | 類名 | 顏色 |
|---|---|
| btn-default | 背景灰色黑字 |
| btn-primary | 深藍 |
| btn-success | 淺綠 |
| btn-info | 淺藍 |
| btn-warning | 淺黃色 |
| btn-danger | 淺紅 |
| btn-link | 字是藍色鏈接 |
圖片
.img-responsive 實際上是 max-width: 100%;、 height: auto; 和 display: block 的樣式
圖片水平居中.center-block
圖片形狀
| 類名 | 作用 |
|---|---|
| img-rounded | 圓角圖片 |
| img-circle | 圓形圖片 |
| img-thumbnail | 帶有內邊距padding的方形圖片 |
輔助類
情境文本顏色 文字顏色
| 類名 | 作用（顏色） |
|---|---|
| text-muted | 緩和的，溫和的 |
| text-primary | 深藍 |
| text-success | 淺綠 |
| text-info | 淺藍 |
| text-warning | 淺黃色 |
| text-danger | 淺紅 |
情境背景色
於此類似情景背景色為bg開頭
<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p> 關閉按鈕
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> 三角符號
<span class="caret"></span> | 類名 | 作用 |
|---|---|
| .close | 關閉按鈕 |
| .caret | 三角符號 |
| pull-left | 快速浮動 |
| pull-right | 快速浮動 |
| center-block | 讓內容塊居中（已知寬度水平居中） |
| .show 和 .hidden | 顯示或隱藏內容 |
| invisible | 可見性 |
.pull-left() less 編譯pull-left 可以作為 mixin使用
響應式工具
| 類名 | 不同尺寸的可見和隱藏 |
|---|---|
| .visible-xs-* | 小於768可見 |
| .visible-sm-* | 大於768可見 |
| .visible-md-* | 大於992可見 |
| .visible-lg-* | 大於1200可見 |
| .hidden-xs | |
| .hidden-sm | |
| .hidden-md | |
| .hidden-lg |
打印類 不常用不記了
總結：bootstrap 的全局樣式定義了一些常用的類名，甚至可以幫助你在不寫css的情況下構建看起來不錯的響應式頁面，對於不懂樣式的開發人員無疑是福音，對於懂的則可以根據bootstrap的構建和less 中mixin的寫法去寫出更漂亮的頁面；
重點:
1.柵格系統
2.類名的記憶和less中的mixin