Bootstrap(基礎)學習筆記1

時間 2019-12-08

原文原文鏈接

Bootstrap究竟是什麼？

歡迎來到Bootstrap課堂，加入高端大氣上檔次的web前端開發團隊。上一小節Bootstrap作了簡單的介紹，下面咱們再來了解一下Bootstrap的前世今緣，在右側是用Bootstrap預設的組件樣式，包括按鈕、表格、標籤、導航等，感興趣的小夥伴能夠先睹爲快，後面的章節咱們會對這些組件作詳細講解。javascript

2011年，twitter的「一小撮」工程師爲了提升他們內部的分析和管理能力，用業餘時間爲他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設計和創建，在github上開源以後，迅速成爲該站上最多人watch&fork的項目。大量工程師踊躍爲該項目貢獻代碼，社區驚人地活躍，代碼版本進化很是快速，官方文檔質量極其高(能夠說是優雅)，同時涌現了許多基於Bootstrap建設的網站：界面清新、簡潔;要素排版利落大方。如屏幕這幾個網站頁面都是用Bootstrap框架製做的：css

（http://www.ghostchina.com/）html

（http://www.zend.com/）前端

（http://www.uberflip.com/）html5

GitHub上這樣介紹 bootstrap：java

☑ 簡單靈活可用於架構流行的用戶界面和交互接口的html、css、javascript工具集。css3

☑ 基於html五、css3的bootstrap，具備大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式嚮導文檔。git

☑ 自定義JQuery插件，完整的類庫，基於Less等。github

Bootstrap是否真的很是實用？帶着這些問題，咱們將完成接下來的學習旅程——玩轉Bootstrap，而且經過Bootstrap構建本身的Web應用程序或者Web網站。web

此課Bootstrap下載等更多信息詳見WIKI。

基本的HTML模板

小夥伴們，上一小節的視頻課程已經對Bootstrap提供的模板作了詳細的介紹，在這一小節中咱們把這個模板代碼粘貼過來，以供大家學習查看，大家能夠根據實際狀況在此基礎上進行擴展，只須要確保文件引用順序一致便可。

如右側代碼編輯器中就是最基本的HTML模板。

咱們來簡單解釋一下其中幾條的重要代碼：

bootstrap模板爲使IE六、七、8版本（IE9如下版本）瀏覽器兼容html5新增的標籤，引入下面代碼文件便可。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理爲使IE六、七、8版本瀏覽器兼容css3樣式，引入下面代碼：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

全局樣式

在製做Web頁面時，前端人員都習慣爲網站設置一個全局樣式（reset.css）。那麼在Bootstrap框架中也不例外。Bootstrap框架的核心是輕量的CSS基礎代碼庫，他並無一味的重置樣式，而是注重各瀏覽器基礎表現，下降開發難度。大部分前端人員都具備歸零的思想，但實際你會發現，歸零以後的樣式在開發過程當中會存在着潛在的問題，例如，在全局樣式表中將em變成一個普通標記，明明應該是斜體，怎麼就沒效果了呢？

Bootstrap框架在這一部分作了必定的變動，再也不一味追求歸零，而是更注重重置可能產生問題的樣式（如，body,form的margin等），保留和堅持部分瀏覽器的基礎樣式，解決部分潛在的問題，提高一些細節的體驗，具體說明以下：

移除body的margin聲明
設置body的背景色爲白色
爲排版設置了基本的字體、字號和行高
設置全局連接顏色，且當連接處於懸浮「:hover」狀態時纔會顯示下劃線樣式

小夥伴們，大家能夠單擊查看右側「style.css」文件，來查看上面所說的全局樣式（這個是從下載的boostrap.css中摘取出來的）。

其實Bootstrap的全局樣式採用了「normalize.css」，但並無一味的所有使用此重置樣式，而是在此基礎上進行了一些改良，讓其更適合Bootstrap的設計思想。

你能夠經過「normalize.less」（LESS版本）或「_normalize.scss」（Sass版本）進行深刻的瞭解。

標題（一）

Bootstrap和普通的HTML頁面同樣，定義標題都是使用標籤<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在全部瀏覽器下顯示的效果同樣，具體定義的規則能夠以下表所示：

經過比較能夠發現，Bootstrap標題樣式進行了如下顯著的優化重置：

一、從新設置了margin-top和margin-bottom的值， h1~h3重置後的值都是20px；h4~h6重置後的值都是10px。
二、全部標題的行高都是1.1（也就是font-size的1.1倍）,並且文本顏色和字體都繼承父元素的顏色和字體。
三、固定不一樣級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

標題的具體運用很是簡單，和咱們平時運用是同樣的，使用<h1>~<h6>標籤，分別表示標題一至標題六，h 後面的數字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側代碼編輯器中的10-16行的代碼。

在Bootstrap中爲了讓非標題元素和標題使用相同的樣式，還特地定義了.h1~.h6六個類名。如右側代碼編輯器中 18-23行代碼所示：

對比兩個示例的效果圖，能夠說他們的效果是如出一轍的。

標題（二）

除此以外，咱們在Web的製做中，經常會碰到在一個標題後面緊跟着一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標籤來製做副標題。這個副標題具備其本身的一些獨特樣式：

一、行高都是1，並且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置爲灰色（#999）。
二、因爲<small>內的文本字體在h1~h3內，其大小都設置爲當前字號的65%；而在h4~h6內的字號都設置爲當前字號的75%；
詳細代碼請參閱bootstrap.css文件中第407行~第443行。

h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}

來簡單看其使用方法與最終效果：如右側代碼編輯器中12-17行代碼所示。

段落（正文文本）

段落是排版中另外一個重要元素之一。在Bootstrap中爲文本設置了一個全局的文本樣式（這裏所說的文本是指正文文本）：

一、全局文本字號爲14px(font-size)。

二、行高爲1.42857143（line-height），大約是20px(你們看到一串的小數或許會有疑惑，其實他是經過LESS編譯器計算出來的，固然Sass也有這樣的功能)。

三、顏色爲深灰色（#333）；

四、字體爲"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對咱們中文並不太合適，但在實際項目中，你們能夠根據本身的需求進行重置，在此咱們不作過多闡述，咱們回到這裏。該設置都定義在<body>元素上，因爲這幾個屬性都是繼承屬性，因此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元素之間具備必定的間距，便於用戶閱讀文本，特地設置了p元素的margin值（默認狀況之下，p元素具備一個上下外邊距，而且保持一個行高的高度）：
/*源碼請查看bootstrap.css文件中第467行~469行*/

p {
 margin: 0 0 10px;
}

若是你對CSS預處理器有所瞭解，那麼你徹底能夠根據Bootstrap提供的預編譯版本LESS(或者Sass)進行自定義排版設置。在Bootstrap中，排版設置的默認值都存在variables.less文件中(Sass版本存在_variables.scss中)的兩個變量：

LESS版本：

@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14

Sass版本：

$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14

第一條語句用於設置字體大小，第二條語句用於設置行高。系統默認使用這兩個值產生整個頁面相應的margin、padding和line-height的值。換句話說，你只須要修改這兩個變量的值，而後從新編譯，就能夠自定義本身的Bootstrap排版樣式。（有興趣的同窗能夠嘗試一下，此處對於LESS或Sass版本運用不作過多闡述）。

強調內容

在實際項目中，對於一些重要的文本，但願突出強調的部分都會作另外的樣式處理。Bootstrap一樣對這部分作了一些輕量級的處理。

若是想讓一個段落p突出顯示，能夠經過添加類名「.lead」實現，其做用就是增大文本字號，加粗文本，並且對行高和margin也作相應的處理。用法以下：

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

效果查看最右側結果窗口。

「.lead」對應的樣式以下：
/*源碼查看bootstrap.css文件第470行~480行*/

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型瀏覽器字體稍大*/
.lead {
font-size: 21px;
  }
}

除此以外，Bootstrap還經過元素標籤:<small>、<strong>、<em>和<cite>給文本作突出樣式處理。
/*源碼查看bootstrap.css文件第55行~第58行*/

b,strong {
  font-weight: bold; /*文本加粗*/
}

/*源碼查看bootstrap.css文件第481行~第484行*/

small,.small {
  font-size: 85%; /*標準字體的85%,也就是14px * 0.85px，差很少12px*/
}

/*源碼查看bootstrap.css第485行~第487行*/

cite {
font-style: normal;
}

粗體

粗體就是給文本加粗，在普通的元素中咱們通常經過font-weight設置爲bold關鍵詞給文本加粗。在Bootstrap中，可使用<b>和<strong>標籤讓文本直接加粗。
/*源碼查看bootstrap.css文件第55行~第58行*/

b,strong {
  font-weight: bold; /*文本加粗*/
}

例如，下面的代碼使用<strong>標籤訂義了強調文本：

<p>我在學習<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的全部知識。</p>

斜體

在排版中，除了用加粗來強調突出的文本以外，還可使用斜體。斜體相似於加粗同樣，除了能夠給元素設置樣式font-style值爲italic實現以外，在Bootstrap中還能夠經過使用標籤<em>或<i>來實現。
例如，下面的代碼使用了<em>和<i>標籤訂義了強調文本：

<p>我在慕課網上跟<em>大漠</em>一塊兒學習<i>Bootstrap</i>的使用。我必定要學會<i>Bootstrap</i>。</p>

效果查看最右側結果窗口。

強調相關的類

在Bootstrap中除了使用標籤<strong>、<em>等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這裏稱其爲強調類名（相似前面說的「.lead」）,這些強調類都是經過顏色來表示強調，具本說明以下：

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

具本源碼查看bootstrap.css文件第500行~第532行：

.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}

咱們來看看這些強調類對應的效果：查看右側代碼編輯器。

文本對齊風格

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

☑ 左對齊，取值left

☑ 居中對齊，取值center

☑ 右對齊，取值right

☑ 兩端對齊，取值justify

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

☑ .text-left：左對齊

☑ .text-center：居中對齊

☑ .text-right：右對齊

☑ .text-justify：兩端對齊

具體源碼查看bootstrap.css文件第488行~第499行：

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

例以下面的四行代碼，分別定義文本的四種不一樣的對齊風格：

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我兩端對齊</p>

特別聲明：目前兩端對齊在各瀏覽器下解析各有不一樣，特別是應用於中文文本的時候。因此項目中慎用

列表--簡介

在HTML文檔中，列表結構主要有三種：有序列表、無序列表和定義列表。具體使用的標籤說明以下：
無序列表

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

有序列表

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

定義列表

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

Bootstrap根據平時的使用情形提供了六種形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去點列表

☑ 內聯列表

☑ 描述列表

☑ 水平描述列表

接下來，咱們一塊兒來學習Bootstrap提供的這六種列表的使用方法。

列表--無序列表、有序列表

無序列表

無序列表和有序列表使用方式和咱們平時使用的同樣（無序列表使用ul，有序列表使用ol標籤），在樣式方面，Bootstrap只是在此基礎上作了一些細微的優化，源碼請查看bootstrap.css文件的第569行~第579行：

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

從源碼上咱們能夠得知，Bootstrap對於列表，只是在margin上作了一些調整。咱們來看一個簡單的示例(右側代碼編輯器10-16行)。

列表嵌套

在Bootstrap中列表也是能夠嵌套的，如右側編輯器中的代碼就是有序列表（25-35行）。

列表--去點列表

小夥伴們能夠看到，在Bootstrap中默認狀況下無序列表和有序列表是帶有項目符號的，但在實際工做中不少時候，咱們的列表是不須要這個編號的，好比說用無序列表作導航的時候。Bootstrap爲衆多開發者考慮的很是周道，經過給無序列表添加一個類名「.list-unstyled」,這樣就能夠去除默認的列表樣式的風格。
/*源碼請查看bootstrap.css文件第580行~第583行*/

.list-unstyled {
padding-left: 0;
list-style: none;
}

從示例中能夠看出，除了項目編號以外，還將列表默認的左邊內距也清０了。

具體使用，咱們來看簡單的兩個示例（代碼編輯器11-45行）

列表--內聯列表

Bootstrap像去點列表同樣，經過添加類名「.list-inline」來實現內聯列表，簡單點說就是把垂直列表換成水平列表，並且去掉項目符號（編號），保持水平顯示。也能夠說內聯列表就是爲製做水平導航而生。
/*源碼查看bootstrap.css文件第584行~第593行*/

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

看個示例：

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

列表--定義列表

對於定義列表而言，Bootstrap並無作太多的調整，只是調整了行間距，外邊距和字體加粗效果。
/*源碼請查看bootstrap.css文件第594行~第607行*/

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

對於定義列表使用，其實很簡單，與咱們之前的使用定義列表的方法是相同的：

列表--水平定義列表

水平定義列表就像內聯列表同樣，Bootstrap能夠給<dl>添加類名「.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」才具備水平定義列表效果。其實現主要方式：
一、將dt設置了一個左浮動，而且設置了一個寬度爲160px
二、將dd設置一個margin-left的值爲180px，達到水平的效果
三、當標題寬度超過160px時，將會顯示三個省略號

其用法以下：

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一個致力於推廣國內前端行業的技術博客。它以探索爲己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd>
    <dt>慕課網</dt>
    <dd>一個專業的，真心實意在作培訓的網站</dd>
    <dt>我來測試一個標題，我來測試一個標題</dt>
    <dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd>
</dl>

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

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

注：結果能夠在最右側結果窗口中看到（鼠標滑過結果窗口時會出現「全屏」按鈕）

代碼（一）

本節內容相對來講比較簡單，通常在我的博客上使用的較爲頻繁，用於顯示代碼的風格。在Bootstrap主要提供了三種代碼風格：
一、使用<code></code>來顯示單行內聯代碼
二、使用<pre></pre>來顯示多行塊代碼
三、使用<kbd></kbd>來顯示用戶輸入代碼

預編譯版本的Bootstrap將代碼的樣式單獨提取出來：
一、LESS版本，請查閱code.less文件
二、Sass版本，請查閱_code.scss文件
編譯出來的CSS代碼請查閱bootstrap.css文件第688行~第730行，因爲代碼太長，此處不一一列舉。

在使用代碼時，用戶能夠根據具體的需求來使用不一樣的類型：
一、<code>：通常是針對於單個單詞或單個句子的代碼
二、<pre>：通常是針對於多行代碼（也就是成塊的代碼）
三、<kbd>:通常是表示用戶要經過鍵盤輸入的內容

雖然不一樣的類型風格不同，但其使用方法是相似的。
code風格：

<div>Bootstrap的代碼風格有三種：
  <code>&lt;code&gt;</code>
  <code>&lt;pre&gt;</code>
  <code>&lt;kbd&gt;</code>
</div>

pre風格：

<div>
<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>

kbd風格：

<div>請輸入<kbd>ctrl+c</kbd>來複制代碼，而後使用<kbd>ctrl+v</kbd>來粘貼代碼</div>

無論使用哪一種代碼風格，在代碼中碰到小於號（<）要使用硬編碼「<」來替代，大於號(>)使用「>」來替代。並且對於<pre>代碼塊風格，標籤前面留多少個空格，在顯示效果中就會留多少個空格。建議在編寫HTML標籤時，就控制好，例如查看右側代碼編輯器上的15-19行。

代碼（二）

正如前面所示，<pre>元素通常用於顯示大塊的代碼，並保證原有格式不變。但有時候代碼太多，並且不想讓其佔有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點，你只須要在pre標籤上添加類名「.pre-scrollable」，就能夠控制代碼塊區域最大高度爲340px，一旦超出這個高度，就會在Y軸出現滾動條。
/*源碼請查看bootstrap.css第731行~第734行*/

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

友情提示：若是您瞭解LESS或Sass這樣的CSS預約定義處理器，你徹底能夠經過code.less或者_code.scss文件修改樣式，而後從新編譯，你就能夠獲得屬於本身的代碼樣式風格。

表格

表格是Bootstrap的一個基礎組件之一，Bootstrap爲表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。在使用Bootstrap的表格過程當中，只須要添加對應的類名就能夠獲得不一樣的表格風格，在接下來的內容中，咱們會詳細介紹Bootstrap的表格使用。

一樣的，若是你對CSS預處理器熟悉，你可使用Bootstrap提供的預處理版本：
☑ LESS版本，對應的文件是 tables.less
☑ Sass版本，對應的文件是 _tables.scss

若是你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行~第1630行中能夠查閱到全部有關於table的樣式代碼。因爲代碼太長，此處不一一列舉。

剛已經說了，Bootstrap爲表格不一樣的樣式風格提供了不一樣的類名，主要包括：

☑ .table：基礎表格

☑ .table-striped：斑馬線表格

☑ .table-bordered：帶邊框的表格

☑ .table-hover：鼠標懸停高亮的表格

☑ .table-condensed：緊湊型表格

☑ .table-responsive：響應式表格

表格--表格行的類

Bootstrap還爲表格的行元素<tr>提供了五種不一樣的類名，每種類名控制了行的不一樣背景顏色，具體說明以下表所示：

其使用很是的簡單，只須要在<tr>元素中添加上表對應的類名，就能達到你本身須要的效果：

<tr class="active">
    <td>…</td>
</tr>

對應的源碼，請查看bootstrap.css文件中第1484行~第1583行。

特別提示：除了」.active」以外，其餘四個類名和」.table-hover」配合使用時，Bootstrap針對這幾種樣式也作了相應的懸浮狀態的樣式設置，因此若是須要給tr元素添加其餘顏色樣式時，在」.table-hover」表格中也要作相應的調整。

注意要實現懸浮狀態，須要在<table>標籤上加入table-hover類。

以下代碼：

<table class="table-hover">

表格--基礎表格

你們對錶格並不太陌生，但對於Bootstrap中的表格如何使用，或許還有點陌生，接下來的內容，將根據不一樣的表格類型向你們介紹Bootstrap表格的實際使用方法。
對錶格的結構，跟咱們平時使用表格是同樣的：

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

如無特別聲明，下面介紹表格類型的時候，結構都是相似上面的代碼。
基礎表格
在Bootstrap中，對於基礎表格是經過類名「.table」來控制。若是在<table>元素中不添加任何類名，表格是無任何樣式效果的。想獲得基礎表格，咱們只須要在<table>元素上添加「.table」類名，就能夠獲得Bootstrap的基礎表格：

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

Bootstrap的基礎表格，大體長得像下圖所示的樣子：

主要源碼查看bootstrap.css文件第1402行～第1441行，因爲代碼太長，此處不一一列舉。

「.table」主要有三個做用：

☑ 給表格設置了margin-bottom:20px以及設置單元內距

☑ 在thead底部設置了一個2px的淺灰實線

☑ 每一個單元格頂部設置了一個1px的淺灰實線

表格--斑馬線表格

有時候爲了讓表格更具閱讀性，須要將表格製做成相似於斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果並不困難，只須要在<table class="table">的基礎上增長類名「.table-striped」便可：

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

其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現原理也很是的簡單，利用CSS3的結構性選擇器「:nth-child」來實現，因此對於IE8以及其如下瀏覽器，沒有背景條紋效果。

源碼請查看bootstrap.css文件第1465行~第1468行：

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}

表格--帶邊框的表格

基礎表格僅讓表格部分地方有邊框，但有時候須要整個表格具備邊框效果。Bootstrap出於實際運用，也考慮這種表格效果，即全部單元格具備一條1px的邊框。
Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法相似，只須要在基礎表格<table class="table">基礎上添加一個「.table-bordered」類名便可：

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

樣式以下圖所示：

其源碼能夠查看bootstrap.css文件第1450行~第1464行：

.table-bordered {
  border: 1px solid #ddd;/*整個表格設置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd; /*每一個單元格設置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表頭底部邊框*/
}

表格--鼠標懸浮高亮的表格

當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數據。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個「.table-hover」類名來實現這種表格效果。
鼠標懸停高亮的表格使用也簡單，僅須要<table class="table">元素上添加類名「table-hover」便可：

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

效果圖以下：

從效果圖中能夠看出，當你鼠標懸浮在某一單元格上時，單元格所在行的背景色都會變成淺灰色。

鼠標懸浮高亮的效果主要是經過「hover」事件來實現，設置了「tr:hover」時的th、td的背景色爲新顏色。
其源碼請查看bootstrap.css文件中第1469行~第1472行：

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

注：其實，鼠標懸浮高亮表格，能夠和Bootstrap其餘表格混合使用。簡單點說，只要你想讓你的表格具有懸浮高亮效果，你只要給這個表格添加「table-hover」類名就行了。例如，將前面介紹的幾種表格結合使用：

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

表格--緊湊型表格

何謂緊湊型表格，簡單理解，就是單元格沒內距或者內距較其餘表格的內距更小。換句話說，要實現緊湊型表格只須要重置表格單元格的內距padding的值。那麼在Bootstrap中，經過類名「table-condensed」重置了單元格內距值。
緊湊型表格的運用，也只是須要在<table class="table">基礎上添加類名「table-condensed」：

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

效果圖以下：

從上面效果圖能夠看出，Bootstrap中緊湊型的表格與基礎表格差異不大，由於只是將單元格的內距由8px調至5px。

源碼請查看bootstrap.css文件第1442行~第1449行：

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,

表格--響應式表格

隨着各類手持設備的出現，要想讓你的Web頁面適合千羅萬像的設備瀏覽，響應式設計的呼聲愈來愈高。在Bootstrap中也爲表格提供了響應式的效果，將其稱爲響應式表格。
Bootstrap提供了一個容器，而且此容器設置類名「.table-responsive」,此容器就具備響應式效果，而後將<table class="table">置於這個容器當中，這樣表格也就具備響應式效果。
Bootstrap中響應式表格效果表現爲：當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失。示例以下：

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

運行效果以下：

（寬屏效果）

（窄屏效果）

.table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 5px; }

正如上一小節中懸浮高亮表格中所講解的，在Bootstrap中製做表格中，能夠將上面幾種表格樣式結合在一塊兒使用，從而製做出更爲精美的表格。結合的方法也很簡單，就是在<table class="table">基礎上添加你須要的表格樣式類型。

另外從上面的示例中你們可能也發現了，無論製做哪一種表格都離不開類名「table」。因此你們在使用Bootstrap表格時，千萬注意，你的<table>元素中必定不能缺乏類名「table」。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。