整理自慕課筆記

GitHub上這樣介紹 bootstrap：

• 簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的html、css、javascript工具集。
• 基于html5、css3的bootstrap，具有大量的特性：友好的學習曲線，卓越的兼容性，響應式設(shè)計，12列格網(wǎng)，樣式向?qū)臋n。
• 自定義JQuery插件，完整的類庫，基于Less等。

標題

主標題

Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規(guī)則可以如下表所示：

通過比較可以發(fā)現(xiàn)，Bootstrap標題樣式進行了以下顯著的優(yōu)化重置：

1、重新設(shè)置了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 后面的數(shù)字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側(cè)代碼編輯器中的10-16行的代碼。

在Bootstrap中為了讓非標題元素和標題使用相同的樣式，還特意定義了.h1~.h6六個類名。

副標題

除此之外，我們在Web的制作中，常常會碰到在一個標題后面緊跟著一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：

1、行高都是1，而且font-weight設(shè)置了normal變成了常規(guī)效果（不加粗），同時顏色被設(shè)置為灰色（#999）。
2、由于內(nèi)的文本字體在h1~h3內(nèi)，其大小都設(shè)置為當前字號的65%；而在h4~h6內(nèi)的字號都設(shè)置為當前字號的75%；
詳細代碼請參閱bootstrap.css文件中第407行~第443行。

段落

段落是排版中另一個重要元素之一。在Bootstrap中為文本設(shè)置了一個全局的文本樣式（這里所說的文本是指正文文本）：

1、全局文本字號為14px(font-size)。

2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數(shù)或許會有疑惑，其實他是通過LESS編譯器計算出來的，當然Sass也有這樣的功能)。

3、顏色為深灰色（#333）；

4、字體為”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對我們中文并不太合適，但在實際項目中，大家可以根據(jù)自己的需求進行重置，在此我們不做過多闡述，我們回到這里。該設(shè)置都定義在元素上，由于這幾個屬性都是繼承屬性，所以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;
}

強調(diào)內(nèi)容

在實際項目中，對于一些重要的文本，希望突出強調(diào)的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。

如果想讓一個段落p突出顯示，可以通過添加類名“.lead”實現(xiàn)，其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應的處理。用法如下：

<p>我是普通文本，我的樣子長成這樣我是普通文本，我的樣子長成這樣我是普通文本，</p>
<p class="lead">我是特意要突出的文本，我的樣子成這樣。我是特意要突出的文本，我的樣子長成這樣。</p>

除此之外，Bootstrap還通過元素標簽:<small>、<strong>、<em>和<cite>給文本做突出樣式處理。

粗體

粗體就是給文本加粗，在普通的元素中我們一般通過font-weight設(shè)置為bold關(guān)鍵詞給文本加粗。在Bootstrap中，可以使用和標簽讓文本直接加粗。

斜體

在排版中，除了用加粗來強調(diào)突出的文本之外，還可以使用斜體。斜體類似于加粗一樣，除了可以給元素設(shè)置樣式font-style值為italic實現(xiàn)之外，在Bootstrap中還可以通過使用標簽<em>或<i>來實現(xiàn)。
例如，下面的代碼使用了<em>和<i>標簽定義了強調(diào)文本：

強調(diào)相關(guān)的類

在Bootstrap中除了使用標簽、等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這里稱其為強調(diào)類名（類似前面說的“.lead”）,這些強調(diào)類都是通過顏色來表示強調(diào)，具本說明如下：

text-muted：提示，使用淺灰色（#999）
text-primary：主要，使用藍色（#428bca）
text-success：成功，使用淺綠色(#3c763d)
text-info：通知信息，使用淺藍色（#31708f）
text-danger：危險，使用褐色（#a94442）

文本對齊風格

在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現(xiàn)文本的對齊風格的設(shè)置。其中主要有四種風格：

? 左對齊，取值left

? 居中對齊，取值center

? 右對齊，取值right

? 兩端對齊，取值justify

為了簡化操作，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風格：

.text-left：左對齊

.text-center：居中對齊

.text-right：右對齊

.text-justify：兩端對齊

特別聲明：目前兩端對齊在各瀏覽器下解析各有不同，特別是應用于中文文本的時候。所以項目中慎用。

列表

在HTML文檔中，列表結(jié)構(gòu)主要有三種：有序列表、無序列表和定義列表。具體使用的標簽說明如下：

無序列表

Bootstrap對于列表，只是在margin上做了一些調(diào)整。

<ul>
 <li>…</li>
</ul>

有序列表

<ol>
 <li>…</li>
</ol>

定義列表

對于定義列表而言，Bootstrap并沒有做太多的調(diào)整，只是調(diào)整了行間距，外邊距和字體加粗效果。

<dl>
 <dt>…</dt>
 <dd>…</dd>
</dl>

水平定義列表

水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給

添加類名“.dl-horizontal”給定義列表實現(xiàn)水平顯示效果。
/源碼請查看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”才具有水平定義列表效果。其實現(xiàn)主要方式：
1、將dt設(shè)置了一個左浮動，并且設(shè)置了一個寬度為160px
2、將dd設(shè)置一個margin-left的值為180px，達到水平的效果
3、當標題寬度超過160px時，將會顯示三個省略號

寬屏下的效果（屏幕大于768px）：

當你縮小你的瀏覽器屏幕時，水平定義列表將回復到原始的狀態(tài)。

## 去點列表
在Bootstrap中默認情況下無序列表和有序列表是帶有項目符號的，但在實際工作中很多時候，我們的列表是不需要這個編號的，比如說用無序列表做導航的時候。Bootstrap為眾多開發(fā)者考慮的非常周道，通過給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認的列表樣式的風格。除了項目編號之外，還將列表默認的左邊內(nèi)距也清０了。

## 內(nèi)聯(lián)列表
Bootstrap像去點列表一樣，通過添加類名“.list-inline”來實現(xiàn)內(nèi)聯(lián)列表，簡單點說就是把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示。也可以說內(nèi)聯(lián)列表就是為制作水平導航而生。

## 描述列表

水平描述列表

代碼

本節(jié)內(nèi)容相對來說比較簡單，一般在個人博客上使用的較為頻繁，用于顯示代碼的風格。在Bootstrap主要提供了三種代碼風格：
1、使用<code></code>來顯示單行內(nèi)聯(lián)代碼
2、使用<pre></pre>來顯示多行塊代碼: <pre>元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時候代碼太多，而且不想讓其占有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點，你只需要在pre標簽上添加類名“.pre-scrollable”，就可以控制代碼塊區(qū)域最大高度為340px，一旦超出這個高度，就會在Y軸出現(xiàn)滾動條。
3、使用<kbd></kbd>來顯示用戶輸入代碼

注意: 不管使用哪種代碼風格，在代碼中碰到小于號<要使用硬編碼&lt;來替代，大于號>使用&gt;來替代。而且對于<pre>代碼塊風格，標簽前面留多少個空格，在顯示效果中就會留多少個空格。建議在編寫HTML標簽時，就控制好。

表格

表格是Bootstrap的一個基礎(chǔ)組件之一，Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應式的表格。
* .table：基礎(chǔ)表格
* .table-striped：斑馬線表格
* .table-bordered：帶邊框的表格
* .table-hover：鼠標懸停高亮的表格
* .table-condensed：緊湊型表格
* .table-responsive：響應式表格

表格行的類

Bootstrap還為表格的行元素提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：

其使用非常的簡單，只需要在元素中添加上表對應的類名，就能達到你自己需要的效果
特別提示：除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應的懸浮狀態(tài)的樣式設(shè)置，所以如果需要給tr元素添加其他顏色樣式時，在”.table-hover”表格中也要做相應的調(diào)整。
注意要實現(xiàn)懸浮狀態(tài)，需要在

標簽上加入table-hover類

基礎(chǔ)表格

對表格的結(jié)構(gòu)，跟我們平時使用表格是一樣的：

<table>
<thead>
<tr>
<th>表格標題</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格單元格</td>
…
</tr>
  …
</tbody>
</table>

在Bootstrap中，對于基礎(chǔ)表格是通過類名“.table”來控制。如果在

元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎(chǔ)表格，我們只需要在
元素上添加“.table”類名，就可以得到Bootstrap的基礎(chǔ)表格
“.table”主要有三個作用：
1. 給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距
2. 在thead底部設(shè)置了一個2px的淺灰實線
3. 每個單元格頂部設(shè)置了一個1px的淺灰實線

斑馬線表格

有時候為了讓表格更具閱讀性，需要將表格制作成類似于斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現(xiàn)這種表格效果并不困難，只需要在

的基礎(chǔ)上增加類名“.table-striped”即可。其效果與基礎(chǔ)表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現(xiàn)原理也非常的簡單，利用CSS3的結(jié)構(gòu)性選擇器“:nth-child”來實現(xiàn)，所以對于IE8以及其以下瀏覽器，沒有背景條紋效果。

<table class="table table-striped"> 
</table> 

帶邊框的表格

基礎(chǔ)表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。
Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎(chǔ)表格

基礎(chǔ)上添加一個“.table-bordered”類名即可：

<table class="table table-bordered">
 …
</table>

鼠標懸浮高亮的表格

當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數(shù)據(jù)。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現(xiàn)這種表格效果。
鼠標懸停高亮的表格使用也簡單，僅需要

元素上添加類名“table-hover”即可：

<table class="table table-hover">
…
</table>

注：其實，鼠標懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡單點說，只要你想讓你的表格具備懸浮高亮效果，你只要給這個表格添加“table-hover”類名就好了。例如，將前面介紹的幾種表格結(jié)合使用：

<table class="table table-striped table-bordered table-hover">
…
</table>

緊湊型表格

何謂緊湊型表格，簡單理解，就是單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小。換句話說，要實現(xiàn)緊湊型表格只需要重置表格單元格的內(nèi)距padding的值。那么在Bootstrap中，通過類名“table-condensed”重置了單元格內(nèi)距值。
緊湊型表格的運用，也只是需要在

基礎(chǔ)上添加類名“table-condensed”：

<table class="table table-condensed">
…
</table>

從上面效果圖可以看出，Bootstrap中緊湊型的表格與基礎(chǔ)表格差別不大，因為只是將單元格的內(nèi)距由8px調(diào)至5px。

另外從上面的示例中大家可能也發(fā)現(xiàn)了，不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意，你的

元素中一定不能缺少類名“table”。

響應式表格

隨著各種手持設(shè)備的出現(xiàn)，要想讓你的Web頁面適合千羅萬像的設(shè)備瀏覽，響應式設(shè)計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果，將其稱為響應式表格。

Bootstrap提供了一個容器，并且此容器設(shè)置類名“.table-responsive”,此容器就具有響應式效果，然后將

置于這個容器當中，這樣表格也就具有響應式效果。

Bootstrap中響應式表格效果表現(xiàn)為：當你的瀏覽器可視區(qū)域小于768px時，表格底部會出現(xiàn)水平滾動條。當你的瀏覽器可視區(qū)域大于768px時，表格底部水平滾動條就會消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
  …
</table>
</div>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論