整理自慕課筆記
GitHub上這樣介紹 bootstrap：
- 簡單靈活可用於架構流行的用戶界面和交互接口的html、css、javascript工具集。
- 基於html5、css3的bootstrap，具有大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式向導文檔。
- 自定義JQuery插件，完整的類庫，基於Less等。
標題
主標題
Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在所有浏覽器下顯示的效果一樣，具體定義的規則可以如下表所示：
通過比較可以發現，Bootstrap標題樣式進行了以下顯著的優化重置：
1、重新設置了margin-top和margin-bottom的值， h1~h3重置後的值都是20px；h4~h6重置後的值都是10px。
2、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
標題的具體運用非常簡單，和我們平時運用是一樣的，使用 <h1> ~ <h6> 標簽，分別表示標題一至標題六，h 後面的數字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側代碼編輯器中的10-16行的代碼。
在Bootstrap中為了讓非標題元素和標題使用相同的樣式，還特意定義了.h1~.h6六個類名。
副標題
除此之外，我們在Web的制作中，常常會碰到在一個標題後面緊跟著一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：
1、行高都是1，而且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置為灰色（#999）。
2、由於內的文本字體在h1~h3內，其大小都設置為當前字號的65%；而在h4~h6內的字號都設置為當前字號的75%；
詳細代碼請參閱bootstrap.css文件中第407行~第443行。
段落
段落是排版中另一個重要元素之一。在Bootstrap中為文本設置了一個全局的文本樣式（這裡所說的文本是指正文文本）：
1、全局文本字號為14px(font-size)。
2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數或許會有疑惑，其實他是通過LESS編譯器計算出來的，當然Sass也有這樣的功能)。
3、顏色為深灰色（#333）；
4、字體為”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對我們中文並不太合適，但在實際項目中，大家可以根據自己的需求進行重置，在此我們不做過多闡述，我們回到這裡。該設置都定義在元素上，由於這幾個屬性都是繼承屬性，所以Web頁面中文本（包括段落p元素）如無重置都會具有這些樣式效果。
/源碼請查看bootstrap.css文件中第274行~280行/
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
強調內容
在實際項目中，對於一些重要的文本，希望突出強調的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。
如果想讓一個段落p突出顯示，可以通過添加類名“.lead”實現，其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應的處理。用法如下：
<p>我是普通文本，我的樣子長成這樣我是普通文本，我的樣子長成這樣我是普通文本，</p> <p class="lead">我是特意要突出的文本，我的樣子成這樣。我是特意要突出的文本，我的樣子長成這樣。</p>
除此之外，Bootstrap還通過元素標簽:<small>、<strong>、<em>和<cite>給文本做突出樣式處理。
粗體
粗體就是給文本加粗，在普通的元素中我們一般通過font-weight設置為bold關鍵詞給文本加粗。在Bootstrap中，可以使用和標簽讓文本直接加粗。
斜體
在排版中，除了用加粗來強調突出的文本之外，還可以使用斜體。斜體類似於加粗一樣，除了可以給元素設置樣式font-style值為italic實現之外，在Bootstrap中還可以通過使用標簽<em>或<i>來實現。
例如，下面的代碼使用了<em>和<i>標簽定義了強調文本：
強調相關的類
在Bootstrap中除了使用標簽、等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這裡稱其為強調類名（類似前面說的“.lead”）,這些強調類都是通過顏色來表示強調，具本說明如下：
text-muted：提示，使用淺灰色（#999）
text-primary：主要，使用藍色（#428bca）
text-success：成功，使用淺綠色(#3c763d)
text-info：通知信息，使用淺藍色（#31708f）
text-warning：警告，使用黃色（#8a6d3b）
text-danger：危險，使用褐色（#a94442）
文本對齊風格
在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現文本的對齊風格的設置。其中主要有四種風格：
☑ 左對齊，取值left
☑ 居中對齊，取值center
☑ 右對齊，取值right
☑ 兩端對齊，取值justify
為了簡化操作，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風格：
.text-left：左對齊
.text-center：居中對齊
.text-right：右對齊
.text-justify：兩端對齊
特別聲明：目前兩端對齊在各浏覽器下解析各有不同，特別是應用於中文文本的時候。所以項目中慎用。
列表
在HTML文檔中，列表結構主要有三種：有序列表、無序列表和定義列表。具體使用的標簽說明如下：
無序列表
Bootstrap對於列表，只是在margin上做了一些調整。
<ul> <li>…</li> </ul>
有序列表
<ol> <li>…</li> </ol>
定義列表
對於定義列表而言，Bootstrap並沒有做太多的調整，只是調整了行間距，外邊距和字體加粗效果。
<dl> <dt>…</dt> <dd>…</dd> </dl>
<dl> <dt>北京</dt> <dd>北京是中國的首都,是政治文化集中地</dd> <dt>上海</dt> <dd>經濟中心</dd> </dl>
水平定義列表
水平定義列表就像內聯列表一樣，Bootstrap可以給
添加類名“.dl-horizontal”給定義列表實現水平顯示效果。
/源碼請查看bootstrap.css文件第608行~第621行/
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
此處添加了一個媒體查詢。也就是說，只有屏幕大於768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實現主要方式：
1、將dt設置了一個左浮動，並且設置了一個寬度為160px
2、將dd設置一個margin-left的值為180px，達到水平的效果
3、當標題寬度超過160px時，將會顯示三個省略號
寬屏下的效果（屏幕大於768px）：
當你縮小你的浏覽器屏幕時，水平定義列表將回復到原始的狀態。
## 去點列表
在Bootstrap中默認情況下無序列表和有序列表是帶有項目符號的，但在實際工作中很多時候，我們的列表是不需要這個編號的，比如說用無序列表做導航的時候。Bootstrap為眾多開發者考慮的非常周道，通過給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認的列表樣式的風格。除了項目編號之外，還將列表默認的左邊內距也清０了。
## 內聯列表
Bootstrap像去點列表一樣，通過添加類名“.list-inline”來實現內聯列表，簡單點說就是把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示。也可以說內聯列表就是為制作水平導航而生。
## 描述列表
水平描述列表
代碼
本節內容相對來說比較簡單，一般在個人博客上使用的較為頻繁，用於顯示代碼的風格。在Bootstrap主要提供了三種代碼風格：
1、使用<code></code>來顯示單行內聯代碼
2、使用<pre></pre>來顯示多行塊代碼: <pre>元素一般用於顯示大塊的代碼，並保證原有格式不變。但有時候代碼太多，而且不想讓其占有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點，你只需要在pre標簽上添加類名“.pre-scrollable”，就可以控制代碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條。
3、使用<kbd></kbd>來顯示用戶輸入代碼
注意: 不管使用哪種代碼風格，在代碼中碰到小於號<要使用硬編碼<來替代，大於號>使用>來替代。而且對於<pre>代碼塊風格，標簽前面留多少個空格，在顯示效果中就會留多少個空格。建議在編寫HTML標簽時，就控制好。
表格
表格是Bootstrap的一個基礎組件之一，Bootstrap為表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。
* .table：基礎表格
* .table-striped：斑馬線表格
* .table-bordered：帶邊框的表格
* .table-hover：鼠標懸停高亮的表格
* .table-condensed：緊湊型表格
* .table-responsive：響應式表格
表格行的類
Bootstrap還為表格的行元素提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：
其使用非常的簡單，只需要在元素中添加上表對應的類名，就能達到你自己需要的效果
特別提示：除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應的懸浮狀態的樣式設置，所以如果需要給tr元素添加其他顏色樣式時，在”.table-hover”表格中也要做相應的調整。
注意要實現懸浮狀態，需要在
標簽上加入table-hover類
基礎表格
對表格的結構，跟我們平時使用表格是一樣的：
<table> <thead> <tr> <th>表格標題</th> … </tr> </thead> <tbody> <tr> <td>表格單元格</td> … </tr> … </tbody> </table>
在Bootstrap中，對於基礎表格是通過類名“.table”來控制。如果在
元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎表格，我們只需要在
元素上添加“.table”類名，就可以得到Bootstrap的基礎表格
“.table”主要有三個作用：
1. 給表格設置了margin-bottom:20px以及設置單元內距
2. 在thead底部設置了一個2px的淺灰實線
3. 每個單元格頂部設置了一個1px的淺灰實線
斑馬線表格
有時候為了讓表格更具閱讀性，需要將表格制作成類似於斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果並不困難，只需要在
的基礎上增加類名“.table-striped”即可。其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現原理也非常的簡單，利用CSS3的結構性選擇器“:nth-child”來實現，所以對於IE8以及其以下浏覽器，沒有背景條紋效果。
<table class="table table-striped"> </table>
帶邊框的表格
基礎表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出於實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。
Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎表格
基礎上添加一個“.table-bordered”類名即可：
<table class="table table-bordered"> … </table>
鼠標懸浮高亮的表格
當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數據。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現這種表格效果。
鼠標懸停高亮的表格使用也簡單，僅需要
元素上添加類名“table-hover”即可：
<table class="table table-hover"> … </table>
注：其實，鼠標懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡單點說，只要你想讓你的表格具備懸浮高亮效果，你只要給這個表格添加“table-hover”類名就好了。例如，將前面介紹的幾種表格結合使用：
<table class="table table-striped table-bordered table-hover"> … </table>
緊湊型表格
何謂緊湊型表格，簡單理解，就是單元格沒內距或者內距較其他表格的內距更小。換句話說，要實現緊湊型表格只需要重置表格單元格的內距padding的值。那麼在Bootstrap中，通過類名“table-condensed”重置了單元格內距值。
緊湊型表格的運用，也只是需要在
基礎上添加類名“table-condensed”：
<table class="table table-condensed"> … </table>
從上面效果圖可以看出，Bootstrap中緊湊型的表格與基礎表格差別不大，因為只是將單元格的內距由8px調至5px。
另外從上面的示例中大家可能也發現了，不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意，你的
元素中一定不能缺少類名“table”。
響應式表格
隨著各種手持設備的出現，要想讓你的Web頁面適合千羅萬像的設備浏覽，響應式設計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果，將其稱為響應式表格。
Bootstrap提供了一個容器，並且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然後將
置於這個容器當中，這樣表格也就具有響應式效果。
Bootstrap中響應式表格效果表現為：當你的浏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的浏覽器可視區域大於768px時，表格底部水平滾動條就會消失。示例如下：
<div class="table-responsive"> <table class="table table-bordered"> … </table> </div>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。