Bootstrap（基礎(chǔ)一）

Bootstrap是什么？

一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。
GitHub上介紹 的bootstrap：
? 簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的html、css、javascript工具集。
? 基于html5、css3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n。
? 自定義JQuery插件，完整的類庫，基于Less等。

第1章 Bootstrap簡介

一、基本的HTML模板

<!DOCTYPE html>
<html lang="en">
    <head>//CSS文件放于head中
        <meta charset="utf-8">// 頁面utf-8編碼
        <meta http-equiv="X-UA-Compatible" content="IE=edge">//在IE運(yùn)行最新的渲染模式
        <meta name="viewport" content="width=device-width, initial-scale=1">//初始化移動瀏覽顯示
  <!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
        <title>Bootstrap的HTML標(biāo)準(zhǔn)模板</title>   
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">//載入bootstrap的CSS樣式
        <!--你自己的樣式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!-- 以下兩個插件用于在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>
        <!-- 如果要使用Bootstrap的js插件，必須先調(diào)入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>//JS文件放在body最下面
</html>

根據(jù)實(shí)際情況在此基礎(chǔ)上進(jìn)行擴(kuò)展，只需要確保文件引用順序一致即可。
其中幾條重要代碼：

  1. bootstrap模板為使IE6、7、8版本（IE9以下版本）瀏覽器兼容html5新增的標(biāo)簽，引入下面代碼文件即可。
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  1. 同理為使IE6、7、8版本瀏覽器兼容css3樣式，引入下面代碼：
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

二、全局樣式

在制作Web頁面時，前端人員都習(xí)慣為網(wǎng)站設(shè)置一個全局樣式（reset.css）。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是輕量的CSS基礎(chǔ)代碼庫，他并沒有一味的重置樣式，而是注重各瀏覽器基礎(chǔ)表現(xiàn)，降低開發(fā)難度。大部分前端人員都具有歸零的思想，但實(shí)際你會發(fā)現(xiàn)，歸零之后的樣式在開發(fā)過程中會存在著潛在的問題。

Bootstrap框架在這一部分做了一定的變更，不再一味追求歸零，而是更注重重置可能產(chǎn)生問題的樣式（如，body,form的margin等），保留和堅(jiān)持部分瀏覽器的基礎(chǔ)樣式，解決部分潛在的問題，提升一些細(xì)節(jié)的體驗(yàn)，具體說明如下：

  • 移除body的margin聲明
  • 設(shè)置body的背景色為白色
  • 為排版設(shè)置了基本的字體、字號和行高
  • 設(shè)置全局鏈接顏色，且當(dāng)鏈接處于懸浮“:hover”狀態(tài)時才會顯示下劃線樣式

第2章 排版

一、標(biāo)題

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

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

  1. 重新設(shè)置了margin-top和margin-bottom的值， h1h3重置后的值都是20px；h4h6重置后的值都是10px。
  2. 所有標(biāo)題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
  3. 固定不同級別標(biāo)題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

標(biāo)題的具體運(yùn)用非常簡單，和我們平時運(yùn)用是一樣的，使用<h1>~<h6>標(biāo)簽，分別表示標(biāo)題一至標(biāo)題六，h 后面的數(shù)字越大，表示級別越小，文本也越小。

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

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

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

二、段落（正文文本）

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

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

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

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

  4. 字體為"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對我們中文并不太合適，但在實(shí)際項(xiàng)目中，大家可以根據(jù)自己的需求進(jìn)行重置。該設(shè)置都定義在<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元素之間具有一定的間距，便于用戶閱讀文本，特意設(shè)置了p元素的margin值（默認(rèn)情況之下，p元素具有一個上下外邊距，并且保持一個行高的高度）：

/*源碼請查看bootstrap.css文件中第467行~469行*/
p {
 margin: 0 0 10px;
}

如果你對CSS預(yù)處理器有所了解，那么你完全可以根據(jù)Bootstrap提供的預(yù)編譯版本LESS(或者Sass)進(jìn)行自定義排版設(shè)置。在Bootstrap中，排版設(shè)置的默認(rèn)值都存在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
第一條語句用于設(shè)置字體大小，第二條語句用于設(shè)置行高。系統(tǒng)默認(rèn)使用這兩個值產(chǎn)生整個頁面相應(yīng)的margin、padding和line-height的值。換句話說，你只需要修改這兩個變量的值，然后重新編譯，就可以自定義自己的Bootstrap排版樣式。

三、強(qiáng)調(diào)內(nèi)容

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

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

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

“.lead”對應(yīng)的樣式如下：

/*源碼查看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還通過元素標(biāo)簽:<small>、<strong>、<em>和<cite>給文本做突出樣式處理。

/*源碼查看bootstrap.css文件第55行~第58行*/
b,strong {
  font-weight: bold; /*文本加粗*/
}
/*源碼查看bootstrap.css文件第481行~第484行*/
small,.small {
  font-size: 85%; /*標(biāo)準(zhǔn)字體的85%,也就是14px * 0.85px，差不多12px*/
}
/*源碼查看bootstrap.css第485行~第487行*/
cite {
font-style: normal;
}

四、粗體

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

/*源碼查看bootstrap.css文件第55行~第58行*/

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

例如，下面的代碼使用<strong>標(biāo)簽定義了強(qiáng)調(diào)文本：

<p>我在學(xué)習(xí)<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知識。</p>

五、斜體

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

<p>我在慕課網(wǎng)上跟<em>大漠</em>一起學(xué)習(xí)<i>Bootstrap</i>的使用。我一定要學(xué)會<i>Bootstrap</i>。</p>

效果查看最右側(cè)結(jié)果窗口。

六、強(qiáng)調(diào)相關(guān)的類

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

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍(lán)色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍(lán)色（#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;
}

七、文本對齊風(fēng)格

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

  • 左對齊，取值left

  • 居中對齊，取值center

  • 右對齊，取值right

  • 兩端對齊，取值justify

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

  • .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;
}

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

八、列表

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

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

有序列表

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

定義列表

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

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

  • 普通列表(無序)
  • 有序列表
    無序列表和有序列表使用方式和我們平時使用的一樣（無序列表使用ul，有序列表使用ol標(biāo)簽），在樣式方面，Bootstrap只是在此基礎(chǔ)上做了一些細(xì)微的優(yōu)化，源碼請查看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上做了一些調(diào)整。

  • 去點(diǎn)列表
    通過給列表添加一個類名“.list-unstyled”,可以去除默認(rèn)的列表樣式的帶有項(xiàng)目符號的風(fēng)格。
/*源碼請查看bootstrap.css文件第580行~第583行*/
.list-unstyled {
padding-left: 0;
list-style: none;
}

從示例中可以看出，除了項(xiàng)目編號之外，還將列表默認(rèn)的左邊內(nèi)距也清０了。

  • 內(nèi)聯(lián)列表
    Bootstrap像去點(diǎn)列表一樣，通過添加類名“.list-inline”來實(shí)現(xiàn)內(nèi)聯(lián)列表，簡單點(diǎn)說就是把垂直列表換成水平列表，而且去掉項(xiàng)目符號（編號），保持水平顯示。也可以說內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生。
/*源碼查看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;
}
  • 描述列表(定義列表)
    對于定義列表而言，Bootstrap并沒有做太多的調(diào)整，只是調(diào)整了行間距，外邊距和字體加粗效果。
/*源碼請查看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;
}
  • 水平描述(定義)列表
    水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實(shí)現(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”才具有水平定義列表效果。其實(shí)現(xiàn)主要方式：
1、將dt設(shè)置了一個左浮動，并且設(shè)置了一個寬度為160px
2、將dd設(shè)置一個margin-left的值為180px，達(dá)到水平的效果
3、當(dāng)標(biāo)題寬度超過160px時，將會顯示三個省略號

其用法如下：

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一個致力于推廣國內(nèi)前端行業(yè)的技術(shù)博客。它以探索為己任，不斷活躍在行業(yè)技術(shù)最前沿，努力提供高質(zhì)量前端技術(shù)博文</dd>
    <dt>慕課網(wǎng)</dt>
    <dd>一個專業(yè)的，真心實(shí)意在做培訓(xùn)的網(wǎng)站</dd>
    <dt>我來測試一個標(biāo)題，我來測試一個標(biāo)題</dt>
    <dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd>
</dl>

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

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

九、代碼

在Bootstrap主要提供了三種代碼風(fēng)格：

  1. 使用<code></code>來顯示單行內(nèi)聯(lián)代碼
    一般是針對于單個單詞或單個句子的代碼
  2. 使用<pre></pre>來顯示多行塊代碼
    一般是針對于多行代碼（也就是成塊的代碼）
    <pre>元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時候代碼太多，而且不想讓其占有太大的頁面篇幅，就想控制代碼塊的大小。在pre標(biāo)簽上添加類名“.pre-scrollable”，就可以控制代碼塊區(qū)域最大高度為340px，一旦超出這個高度，就會在Y軸出現(xiàn)滾動條。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

友情提示：如果您了解LESS或Sass這樣的CSS預(yù)定定義處理器，你完全可以通過code.less或者_(dá)code.scss文件修改樣式，然后重新編譯，你就可以得到屬于自己的代碼樣式風(fēng)格。

  1. 使用<kbd></kbd>來顯示用戶輸入代碼
    一般是表示用戶要通過鍵盤輸入的內(nèi)容

預(yù)編譯版本的Bootstrap將代碼的樣式單獨(dú)提取出來：
1、LESS版本，請查閱code.less文件
2、Sass版本，請查閱_code.scss文件

code風(fēng)格：

<div>Bootstrap的代碼風(fēng)格有三種：
  <code><code></code>
  <code><pre></code>
  <code><kbd></code>
</div>

pre風(fēng)格：

<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>

kbd風(fēng)格：

<div>請輸入<kbd>ctrl+c</kbd>來復(fù)制代碼，然后使用<kbd>ctrl+v</kbd>來粘貼代碼</div>

不管使用哪種代碼風(fēng)格，在代碼中碰到小于號（<）要使用硬編碼“<”來替代，大于號(>)使用“>”來替代。而且對于<pre>代碼塊風(fēng)格，標(biāo)簽前面留多少個空格，在顯示效果中就會留多少個空格。

十、表格

表格是Bootstrap的一個基礎(chǔ)組件之一，Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格。在使用Bootstrap的表格過程中，只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格，

同樣的，如果你對CSS預(yù)處理器熟悉，你可以使用Bootstrap提供的預(yù)處理版本：
? LESS版本，對應(yīng)的文件是tables.less
? Sass版本，對應(yīng)的文件是_tables.scss

Bootstrap為表格不同的樣式風(fēng)格提供了不同的類名，主要包括：

  1. .table：基礎(chǔ)表格

  2. .table-striped：斑馬線表格

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

  4. .table-hover：鼠標(biāo)懸停高亮的表格

  5. .table-condensed：緊湊型表格

  6. .table-responsive：響應(yīng)式表格

1.表格行的類

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



其使用非常的簡單，只需要在<tr>元素中添加上表對應(yīng)的類名，就能達(dá)到你自己需要的效果：

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

特別提示：除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置，所以如果需要給tr元素添加其他顏色樣式時，在”.table-hover”表格中也要做相應(yīng)的調(diào)整。

注意要實(shí)現(xiàn)懸浮狀態(tài)，需要在<table>標(biāo)簽上加入table-hover類。

如下代碼：
<table class="table-hover">

2.表格--基礎(chǔ)表格

表格的結(jié)構(gòu)：

<table>
<thead>
<tr>
<th>表格標(biāo)題</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格單元格</td>
…
</tr>
     …
</tbody>
</table>

基礎(chǔ)表格：
在Bootstrap中，對于基礎(chǔ)表格是通過類名“.table”來控制。如果在<table>元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎(chǔ)表格，我們只需要在<table>元素上添加“.table”類名，就可以得到Bootstrap的基礎(chǔ)表格：

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

Bootstrap的基礎(chǔ)表格

“.table”主要有三個作用：

? 給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距

? 在thead底部設(shè)置了一個2px的淺灰實(shí)線

? 每個單元格頂部設(shè)置了一個1px的淺灰實(shí)線

3.斑馬線表格

有時候?yàn)榱俗尡砀窀唛喿x性，需要將表格制作成類似于斑馬線的效果。簡單點(diǎn)說就是讓表格帶有背景條紋效果。在Bootstrap中實(shí)現(xiàn)這種表格效果并不困難，只需要在·<table class="table">·的基礎(chǔ)上增加類名·“.table-striped”·即可：

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

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

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

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
斑馬線表格
4.帶邊框的表格

基礎(chǔ)表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實(shí)際運(yùn)用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎(chǔ)表格<table class="table">基礎(chǔ)上添加一個“.table-bordered”類名即可：
<table class="table **table-bordered**"> …</table>
樣式如下圖所示：


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

.table-bordered {
  border: 1px solid #ddd;/*整個表格設(shè)置邊框*/
}
.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; /*每個單元格設(shè)置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表頭底部邊框*/
}
5.鼠標(biāo)懸浮高亮的表格

當(dāng)鼠標(biāo)懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數(shù)據(jù)。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實(shí)現(xiàn)這種表格效果。鼠標(biāo)懸停高亮的表格使用也簡單，僅需要<table class="table">元素上添加類名“table-hover”即可：
<table class="**table table-hover**">…</table>
效果圖如下：


從效果圖中可以看出，當(dāng)你鼠標(biāo)懸浮在某一單元格上時，單元格所在行的背景色都會變成淺灰色。
鼠標(biāo)懸浮高亮的效果主要是通過“hover”事件來實(shí)現(xiàn)，設(shè)置了“tr:hover”時的th、td的背景色為新顏色。其源碼請查看bootstrap.css文件中第1469行~第1472行：

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

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

<table class="table table-striped table-bordered table-hover">
…
</table>
6.緊湊型表格

何謂緊湊型表格，簡單理解，就是單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小。換句話說，要實(shí)現(xiàn)緊湊型表格只需要重置表格單元格的內(nèi)距padding的值。那么在Bootstrap中，通過類名“table-condensed”重置了單元格內(nèi)距值。緊湊型表格的運(yùn)用，也只是需要在<table class="table">基礎(chǔ)上添加類名“table-condensed”：
<table class="**table table-condensed**">…</table>
效果圖如下：


從上面效果圖可以看出，Bootstrap中緊湊型的表格與基礎(chǔ)表格差別不大，因?yàn)橹皇菍卧竦膬?nèi)距由8px調(diào)至5px。
源碼請查看bootstrap.css文件第1442行~第1449行：

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

正如上一小節(jié)中懸浮高亮表格中所講解的，在Bootstrap中制作表格中，可以將上面幾種表格樣式結(jié)合在一起使用，從而制作出更為精美的表格。結(jié)合的方法也很簡單，就是在<table class="table">基礎(chǔ)上添加你需要的表格樣式類型。

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

7.響應(yīng)式表格

隨著各種手持設(shè)備的出現(xiàn)，要想讓你的Web頁面適合千羅萬像的設(shè)備瀏覽，響應(yīng)式設(shè)計(jì)的呼聲越來越高。在Bootstrap中也為表格提供了響應(yīng)式的效果，將其稱為響應(yīng)式表格。Bootstrap提供了一個容器，并且此容器設(shè)置類名“.table-responsive”,此容器就具有響應(yīng)式效果，然后將<table class="table">置于這個容器當(dāng)中，這樣表格也就具有響應(yīng)式效果。Bootstrap中響應(yīng)式表格效果表現(xiàn)為：當(dāng)你的瀏覽器可視區(qū)域小于768px時，表格底部會出現(xiàn)水平滾動條。當(dāng)你的瀏覽器可視區(qū)域大于768px時，表格底部水平滾動條就會消失。示例如下：
<div class="table-responsive"><table class="table table-bordered"> …</table></div>
運(yùn)行效果如下：

第3章 表單

一、基礎(chǔ)表單

表單主要功能是用來與用戶做交流的一個網(wǎng)頁控件，良好的表單設(shè)計(jì)能夠讓網(wǎng)頁與用戶更好的溝通。表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、復(fù)選按鈕、文本域和按鈕等。其中每個控件所起的作用都各不相同，而且不同的瀏覽器對表單控件渲染的風(fēng)格都各有不同。

同樣，表單也是Bootstrap框架中的核心內(nèi)容，下面向大家介紹Bootstrap框架中表單的制作。

表單源碼查詢

Bootstrap框架的表單，其源碼占據(jù)了大量的代碼，同樣的，根據(jù)不同的Bootstrap版本，你可以輕松獲取相應(yīng)的源碼：

? LESS版本：對應(yīng)源文件 forms.less

? ? Sass版本：對應(yīng)源文件 _forms.scss

編譯后的Bootstrap版本，可以查閱bootstrap.css文件第1630行~第1991行

不過在樣式表中，還對表單做了一些初始化，詳細(xì)代碼可以查閱bootstrap.css文件第110行~第178行。

對于基礎(chǔ)表單，Bootstrap并未對其做太多的定制性效果設(shè)計(jì)，僅僅對表單內(nèi)的fieldset、legend、label標(biāo)簽進(jìn)行了定制。如：

/*源碼請查閱bootstrap.css文件第1631行~第1652行*/
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}

label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}

主要將這些元素的margin、padding和border等進(jìn)行了細(xì)化設(shè)置。
當(dāng)然表單除了這幾個元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過定制了一個類名**form-control**，也就是說，如果這幾個元素使用了類名“form-control”，將會實(shí)現(xiàn)一些設(shè)計(jì)上的定制效果。
1、寬度變成了100%
2、設(shè)置了一個淺灰色（#ccc）的邊框
3、具有4px的圓角
4、設(shè)置陰影效果，并且元素得到焦點(diǎn)之時，陰影和邊框效果會有所變化
5、設(shè)置了placeholder的顏色為#999
詳細(xì)請查閱bootstrap.css文件第1690行~第1732行。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基礎(chǔ)表單</title>
    <link rel="stylesheet" >
</head>
<body>
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">郵箱：</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="請輸入您的郵箱地址">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密碼</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入您的郵箱密碼">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 記住密碼
    </label>
  </div>
  <button type="submit" class="btn btn-default">進(jìn)入郵箱</button>
</form> 
</body>
</html>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

二、水平表單

Bootstrap框架默認(rèn)的表單是垂直顯示風(fēng)格，但很多時候我們需要的水平表單風(fēng)格（標(biāo)簽居左，表單控件居右）見下圖。

在Bootstrap框架中要實(shí)現(xiàn)水平表單效果，必須滿足以下兩個條件：
1、在<form>元素是使用類名“form-horizontal”。
2、配合Bootstrap框架的網(wǎng)格系統(tǒng)。
在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
1、設(shè)置表單控件padding和margin值。
2、改變“form-group”的表現(xiàn)形式，類似于網(wǎng)格系統(tǒng)的“row”。

三、內(nèi)聯(lián)表單

有時候我們需要將表單的控件都在一行內(nèi)顯示，類似這樣的：

在Bootstrap框架中實(shí)現(xiàn)這樣的表單效果是輕而易舉的，你只需要在<form>元素中添加類名“form-inline”即可。內(nèi)聯(lián)表單實(shí)現(xiàn)原理非常簡單，欲將表單控件在一行顯示，就需要將表單控件設(shè)置成內(nèi)聯(lián)塊元素（display:inline-block）。/源碼請查閱bootstrap.css文件第1928行~第1962行/
如果你要在input前面添加一個label標(biāo)簽時，會導(dǎo)致input換行顯示。如果你必須添加這樣的一個label標(biāo)簽，并且不想讓input換行，你需要將label標(biāo)簽也放在容器“form-group”中，如：

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
</div>
<div class="form-group">
    <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>

“sr-only”，這個樣式將標(biāo)簽隱藏了。
/源碼請查閱bootstrap.css文件第342行~第350行/

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

四、表單控件

1.輸入框input

每一個表單都是由表單控件組成。離開了控件，表單就失去了意義。接下來的我們簡單的來了解Bootstrap框架中表單控件的相關(guān)知識。

單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因?yàn)锽ootstrap框架都是通過input[type=“?”](其中?號代表type類型，比如說text類型，對應(yīng)的是input[type=“text”])的形式來定義樣式的。

為了讓控件在各種表單風(fēng)格中樣式不出錯，需要添加類名“form-control”，如：

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口:

2.下拉選擇框select

Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設(shè)置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統(tǒng)一的樣式風(fēng)格。

<form role="form">
<div class="form-group">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  </div>
  <div class="form-group">
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口:

3.文本域(textarea)

文本域和原始使用方法一樣，設(shè)置rows可定義其高度，設(shè)置cols可以設(shè)置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設(shè)置cols屬性。因?yàn)锽ootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：


4.復(fù)選框checkbox和單選擇按鈕radio

Bootstrap框架中checkbox和radio有點(diǎn)特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標(biāo)簽配合使用會出現(xiàn)一些小問題（最頭痛的是對齊問題）。使用Bootstrap框架，開發(fā)人員無需考慮太多，只需要按照下面的方法使用即可。

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜歡
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口（案例1）：

從上面的示例，我們可以得知：
1、不管是checkbox還是radio都使用label包起來了
2、checkbox連同label標(biāo)簽放置在一個名為“.checkbox”的容器內(nèi)
3、radio連同label標(biāo)簽放置在一個名為“.radio”的容器內(nèi)
在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來處理復(fù)選框、單選按鈕與標(biāo)簽的對齊方式。

復(fù)選框和單選按鈕水平排列：
有時候，為了布局的需要，將復(fù)選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：
1、如果checkbox需要水平排列，只需要在label標(biāo)簽上添加類名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標(biāo)簽上添加類名“radio-inline”

5.按鈕

按鈕也是表單重要控件之一,制作按鈕通常使用下面代碼來實(shí)現(xiàn)：
? input[type=“submit”]
? input[type=“button”]
? input[type=“reset”]
? <button>
在Bootstrap框架中的按鈕都是采用<button>來實(shí)現(xiàn)。
有關(guān)于Bootstrap中按鈕如何制作，在這里不做過多闡述，因?yàn)榘粹o也是Bootstrap框架中核心部分之一，后面我們專門有一節(jié)內(nèi)容來介紹Bootstrap的按鈕。
這里先讓大家看看Bootstrap的按鈕長成什么樣：

  1. 基本按鈕
    Bootstrap框架V3.x版本的基本按鈕和V2.x版本的基本按鈕一樣，都是通過類名“btn”來實(shí)現(xiàn)。不同的是在V3.x版本要簡約很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如說文本陰影（text-shadow）、漸變背景（background-image）、邊框陰影（box-shadow）等。
    難能可貴的是，Bootstrap框架中的考慮了不同瀏覽器的解析差異，進(jìn)行了比較安全的兼容性處理，使按鈕效果在不同的瀏覽器中所呈現(xiàn)的效果基本相同。
    Bootstrap框架的按鈕使用非常的簡單，使用方式如下：
    <button class="btn" type="button">我是一個基本按鈕</button>
  2. 默認(rèn)按鈕
    Bootstrap框架首先通過基礎(chǔ)類名“.btn”定義了一個基礎(chǔ)的按鈕風(fēng)格，然后通過“.btn-default”定義了一個默認(rèn)的按鈕風(fēng)格。默認(rèn)按鈕的風(fēng)格就是在基礎(chǔ)按鈕的風(fēng)格的基礎(chǔ)上修改了按鈕的背景顏色、邊框顏色和文本顏色。
    使用默認(rèn)按鈕風(fēng)格也非常的簡單，只需要在基礎(chǔ)按鈕“btn”的基礎(chǔ)上增加類名“btn-default”即可：
    <button class="btn btn-default" type="button">默認(rèn)按鈕</button>

其他：

  1. 多標(biāo)簽支持
    一般制作按鈕除了使用<button>標(biāo)簽元素之外，還可以使用<input type="submit">和<a>標(biāo)簽等。同樣，在Bootstrap框架中制作按鈕時，除了剛才所說的這些標(biāo)簽元素之外，還可以使用在其他的標(biāo)簽元素上，唯一需要注意的是，要在制作按鈕的標(biāo)簽元素上添加類名“btn”。如果不添加是不會有任何按鈕效果。
<button class="btn btn-default" type="button">button標(biāo)簽按鈕</button>
<input type="submit" class="btn btn-default" value="input標(biāo)簽按鈕"/>
<a href="##" class="btn btn-default">a標(biāo)簽按鈕</a>
<span class="btn btn-default">span標(biāo)簽按鈕</span>
<div class="btn btn-default">div標(biāo)簽按鈕</div>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：


注意：雖然在Bootstrap框架中使用任何標(biāo)簽元素都可以實(shí)現(xiàn)按鈕風(fēng)格，但并不建議這樣使用，為了避免瀏覽器兼容性問題，強(qiáng)烈建議使用button或a標(biāo)簽來制作按鈕。

  1. 定制風(fēng)格
    在介紹按鈕開篇就說過，Web頁面可能會有不同的按鈕風(fēng)格。那么在Bootstrap框架也考慮了。在Bootstrap框架中除了默認(rèn)的按鈕風(fēng)格之外，還有其他六種按鈕風(fēng)格，每種風(fēng)格的其實(shí)都一樣，不同之處就是按鈕的背景顏色、邊框顏色和文本顏色。
    在Bootstrap框架中不同的按鈕風(fēng)格都是通過不同的類名來實(shí)現(xiàn)，在使用過程中，開發(fā)者只需要選擇不同的類名即可：




    使用起來就很簡單，就像前面介紹的默認(rèn)按鈕一樣的使用方法，只需要在基礎(chǔ)按鈕“.btn”基礎(chǔ)上追加對應(yīng)的類名，就可以得到需要的按鈕風(fēng)格。

  2. 按鈕大小
    在Bootstrap框架中，對于按鈕的大小，也是可以定制的。類似于input一樣，通過在基礎(chǔ)按鈕“.btn”的基礎(chǔ)上追加類名來控制按鈕的大小。
    在Bootstrap框架中提供了三個類名來控制按鈕大小：


  3. 塊狀按鈕
    從前面幾節(jié)的內(nèi)容中，大家可能發(fā)現(xiàn)了，每個示例中的按鈕寬度都是依靠按鈕文本和padding的值來決定。但有時候在制作按鈕的時候需要按鈕寬度充滿整個父容器（width:100%），特別是在移動端的制作中。那么前面的方法我們都無法很好的實(shí)現(xiàn)，除非重新定義按鈕的寬度。其實(shí)在Bootstrap中并不需要這樣做，Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器，并且這個按鈕不會有任何的padding和margin值。在實(shí)際當(dāng)中，常把這種按鈕稱為塊狀按鈕。
    使用方法和前面的類似，只需要在原按鈕類名上添加“.btn-block”類名，當(dāng)然“.btn”類名是不可或缺的：
  4. 按鈕狀態(tài)
    Bootstrap框架針對按鈕的狀態(tài)做了一些特殊處理。在Bootstrap框架中針對按鈕的狀態(tài)效果主要分為兩種：活動狀態(tài)和禁用狀態(tài)。
    (1)活動狀態(tài)
    Bootstrap按鈕的活動狀態(tài)主要包括按鈕的懸浮狀態(tài)(:hover)，點(diǎn)擊狀態(tài)(:active)和焦點(diǎn)狀態(tài)（:focus）幾種。
    不同風(fēng)格下的按鈕都具有這幾種狀態(tài)效果，只是顏色做了一定的調(diào)整。
    當(dāng)按鈕處理正在點(diǎn)擊狀態(tài)（也就是鼠標(biāo)按下的未松開的狀態(tài)），對于<button>元素是通過“:active”偽類實(shí)現(xiàn)，而對于<a>這樣的標(biāo)簽元素則是通過添加類名“.active”來實(shí)現(xiàn)
    (2)禁用狀態(tài)
    和input等表單控件一樣，在Bootstrap框架的按鈕中也具有禁用狀態(tài)的設(shè)置。禁用狀態(tài)與其他狀態(tài)按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調(diào)整為65%。
    **
    在Bootstrap框架中，要禁用按鈕有兩種實(shí)現(xiàn)方式：
    方法1：在標(biāo)簽中添加disabled屬性
    方法2：在元素標(biāo)簽中添加類名“disabled”
    **
    兩者的主要區(qū)別是：
    “.disabled”樣式不會禁止按鈕的默認(rèn)行為，比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認(rèn)行為，則需要通過JavaScript這樣的語言來處理。對于<a>標(biāo)簽也存在類似問題，如果通過類名“.disable”來禁用按鈕，其鏈接行為是無法禁止。而在元素標(biāo)簽中添加“disabled”屬性的方法是可以禁止元素的默認(rèn)行為的。
    **
    下面是兩種方法的舉例：**
<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通過disabled屬性禁用按鈕</button>
<button class="btnbtn-primary btn-block disabled" type="button">通過添加類名disabled禁用按鈕</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按鈕</button>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

6.表單控件大小

前面看到的表單控件都正常的大小。可以通過設(shè)置控件的height，line-height，padding和font-size等屬性來實(shí)現(xiàn)控件的高度設(shè)置。不過Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大

這兩個類適用于表單中的input，textarea和select控件，具體使用如下：

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

7.表單控件狀態(tài)

表單主要用來與用戶溝通，好的表單就能更好的與用戶進(jìn)行溝通，而好的表單一定離不開表單的控件狀態(tài)。

表單狀態(tài)的作用：
每一種狀態(tài)都能給用戶傳遞不同的信息，比如表單有焦點(diǎn)的狀態(tài)可以告訴用戶可以輸入或選擇東西，禁用狀態(tài)可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗(yàn)證狀態(tài)，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態(tài)。

  1. 焦點(diǎn)狀態(tài)
    焦點(diǎn)狀態(tài)是通過偽類“:focus”來實(shí)現(xiàn)。Bootstrap框架中表單控件的焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果。
    源碼請查閱bootstrap.css文件第1707行～第1712行：
.form-control:focus {
border-color: #66afe9;
outline: 0;
  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

從源碼中我們可以看出，要讓控件在焦點(diǎn)狀態(tài)下有上面樣式效果，需要給控件添加類名“form-control”：

  1. 禁用狀態(tài)
    Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實(shí)現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”。和其他表單的禁用狀態(tài)不同的是，Bootstrap框架做了一些樣式風(fēng)格的處理：
/*源碼請查看bootstrap.css文件第1723行～第1729行*/
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}

使用方法為：只需要在需要禁用的表單控件上加上“disabled”即可：
<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>
運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

在使用了“form-control”的表單控件中，樣式設(shè)置了禁用表單背景色為灰色，而且手型變成了不準(zhǔn)輸入的形狀。如果控件中不使用類名“form-control”，禁用的控件只會有一個不準(zhǔn)輸入的手型出來。
**
1.在Bootstrap框架中，如果fieldset設(shè)置了disabled屬性，整個域都將處于被禁用狀態(tài)。
2.對于整個禁用的域中，如果legend中有輸入框的話，這個輸入框是無法被禁用的。
**

  1. 驗(yàn)證狀態(tài)
    在制作表單時，不免要做表單驗(yàn)證。同樣也需要提供驗(yàn)證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
    1、.has-warning:警告狀態(tài)（黃色）
    2、.has-error：錯誤狀態(tài)（紅色）
    3、.has-success：成功狀態(tài)（綠色）
    使用的時候只需要在form-group容器上對應(yīng)添加狀態(tài)類名。
<form role="form">
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">警告狀態(tài)</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">錯誤狀態(tài)</label>
  <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態(tài)">
</div>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

很多時候，在表單驗(yàn)證的時候，不同的狀態(tài)會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應(yīng)的狀態(tài)下顯示 icon 出來，只需要在對應(yīng)的狀態(tài)下添加類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  ......
</div>
<div class="form-group has-error has-feedback">
  ......
</div>
</form>


從效果圖中可以看出，圖標(biāo)都居右。在 Bootstrap 的小圖標(biāo)都是使用@font-face來制作（后面的內(nèi)容中將會著重用一節(jié)內(nèi)容來介紹）。而且必須在表單中添加了一個 span 元素：
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

8.表單提示信息

平常在制作表單驗(yàn)證時，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，并且顯示在控件下邊。

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
  <span class="help-block">你輸入的信息是正確的</span>
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
  …
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

在Bootstrap V2.x版本中還提供了一個行內(nèi)提示信息，其使用了類名“help-inline”。一般讓提示信息顯示在控件的后面，也就是同一水平顯示。如果你想在BootstrapV3.x版本也有這樣的效果，你可以添加這段代碼：

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

如果你不想為bootstrap.css增加自己的代碼，而且設(shè)計(jì)又有這種樣的需求，那么只能借助于Bootstrap的網(wǎng)格系統(tǒng)。

<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
</div>
<span class="col-xs-6 help-block">你輸入的信息是正確的</span>
</div>
</div>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：


9.圖像

圖像在網(wǎng)頁制作中也是常要用到的元素，在Bootstrap框架中對于圖像的樣式風(fēng)格提供以下幾種風(fēng)格：
1、img-responsive：響應(yīng)式圖片，主要針對于響應(yīng)式設(shè)計(jì)
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片
使用方法：
使用方法非常簡單，只需要在<img>標(biāo)簽上添加對應(yīng)的類名，如下代碼：

![140x140](http://placehold.it/140x140)
![140x140](http://placehold.it/140x140)
![140x140](http://placehold.it/140x140)
![140x140](http://placehold.it/140x140)
![140x140](http://placehold.it/140x140)

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

設(shè)置圖片大小：
由于樣式?jīng)]有對圖片做大小上的樣式限制，所以在實(shí)際使用的時候，需要通過其他的方式來處理圖片大小。比如說控制圖片容器大小。（注意不可以通過css樣式直接修改img圖片的大小，這樣操作就不響應(yīng)了）

注意：
對于圓角圖片和圓形圖片效果，因?yàn)槭鞘褂昧薈SS3的圓角樣式來實(shí)現(xiàn)的，所以注意對于IE8以及其以下版本不支持，是沒有圓角效果的。
Bootstrap框架為了大家更好的維護(hù)圖像的樣式，同樣將這部分樣式獨(dú)立出來：
1、LESS版本，可以查閱scaffolding.less
2、Sass版本，可以查閱_scaffolding.scss
大家可以修改其中之一，重新編譯就可以得到自己需要的圖片樣式效果。

10.圖標(biāo)

這里說的圖標(biāo)就是Web制作中常看到的小icon圖標(biāo)，可以說這些小icon圖標(biāo)是一個優(yōu)秀Web中不可缺少的一部分，起到畫龍點(diǎn)睛的效果。在Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標(biāo)都是使用CSS3的@font-face屬性配合字體來實(shí)現(xiàn)的icon效果。

Bootstrap框架中圖標(biāo)都是glyphicons.com這個商業(yè)網(wǎng)站提供的，并且免費(fèi)授權(quán)給Bootstrap框架使用，所以大家可以放心使用在自己的項(xiàng)目當(dāng)中。

Bootstrap框架將內(nèi)部樣式也提取出來：
1、LESS版本：對應(yīng)源文件為glyphicons.less文件
2、Sass版本：對應(yīng)源文件為_glyphicons.scss文件
3、編譯后的Bootstrap版本：查看bootstrap.css文件第2375行～第2992行

在網(wǎng)頁中使用圖標(biāo)也非常的簡單，在任何內(nèi)聯(lián)元素上應(yīng)用所對應(yīng)的樣式即可：

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

所有icon都是以”glyphicon-”前綴的類名開始，然后后綴表示圖標(biāo)的名稱。

所有名稱查看：
請點(diǎn)擊：http://getbootstrap.com/components/#glyphicons 鏈接查閱或根據(jù)bootstrap.css文件第2393行～第2992行查閱。
特別說明：
除了使用glyphicon.com提供的圖標(biāo)之外，還可以使用第三方為Bootstrap框架設(shè)計(jì)的圖標(biāo)字體，如Font Awesome。使用方法和上面介紹的一樣，不過記得將字體下載到你本地。 感興趣的可以閱讀官網(wǎng)相關(guān)介紹。

第4章 網(wǎng)格系統(tǒng)

一、實(shí)現(xiàn)原理

網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。
在使用的時候大家可以根據(jù)實(shí)際情況重新編譯LESS（或Sass）源碼來修改12這個數(shù)值（也就是換成24或32，當(dāng)然你也可以分成更多，但不建議這樣使用）。

二、工作原理

Bootstrap框架的網(wǎng)格系統(tǒng)工作原理如下：
1、數(shù)據(jù)行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內(nèi)距(padding)。如：

<div class="container">
<div class="row"></div>
</div>

2、在行(.row)中可以添加列(.column)，但列數(shù)之和不能超過平分的總列數(shù)，比如12。如：

<div class="container">
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>

3、具體內(nèi)容應(yīng)當(dāng)放置在列容器（column）之內(nèi)，而且只有列（column）才可以作為行容器(.row)的直接子元素
4、通過設(shè)置內(nèi)距（padding）從而創(chuàng)建列與列之間的間距。然后通過為第一列和最后一列設(shè)置負(fù)值的外距（margin）來抵消內(nèi)距(padding)的影響

  1. 最外邊框，帶有一大片白色區(qū)域，就是相當(dāng)于瀏覽器的可視區(qū)域。在Bootstrap框架的網(wǎng)格系統(tǒng)中帶有響應(yīng)式效果，其帶有四種類型的瀏覽器（超小屏，小屏，中屏和大屏），其斷點(diǎn)（像素的分界點(diǎn)）是768px、992px和1220px。
  2. 第二個邊框(1)相當(dāng)于容器(.container)。針對不同的瀏覽器分辨率，其寬度也不一樣：自動、750px、970px和1170px。
  3. ２號橫條闡述的是，將容器的行（.row）平分了12等份，也就是列。每個列都有一個“padding-left:15px”(圖中粉紅色部分)和一個“padding-right:15px”(圖中紫色部分)。這樣也導(dǎo)致了第一個列的padding-left和最后一列的padding-right占據(jù)了總寬度的30px，從而致使頁面不美觀，當(dāng)然，如果你需要留有一定的間距，這個做法是不錯的。
  4. ３號橫條就是行容器(.row),其定義了“margin-left”和”margin-right”值為”-15px”，用來抵消第一個列的左內(nèi)距和最后一列的右內(nèi)距。
  5. 將行與列給合在一起就能看到橫條4的效果。也就是我們期望看到的效果，第一列和最后一列與容器（.container）之間沒有間距。

三、基本用法

網(wǎng)格系統(tǒng)用來布局，其實(shí)就是列的組合。Bootstrap框架的網(wǎng)格系統(tǒng)中有四種基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的網(wǎng)格樣式，關(guān)于屏幕尺寸如下圖：

  1. 列組合
    列組合簡單理解就是更改數(shù)字來合并列（原則：列總和數(shù)不能超12），有點(diǎn)類似于表格的colspan屬性。
    實(shí)現(xiàn)列組合方式非常簡單，只涉及兩個CSS兩個特性：浮動與寬度百分比。
/*確保所有列左浮動*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
 }

/*定義每個列組合的寬度（使用的百分比）*/
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  1. 列偏移
    有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術(shù)手段來。這個時候就可以使用列偏移（offset）功能來實(shí)現(xiàn)。使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數(shù))，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。
    實(shí)現(xiàn)原理非常簡單，就是利用十二分之一（1/12）的margin-left。然后有多少個offset，就有多少個margin-left。
  2. 列排序
    列排序其實(shí)就是改變列的方向，就是改變左右浮動，并且設(shè)置浮動的距離。在Bootstrap框架的網(wǎng)格系統(tǒng)中是通過添加類名“col-md-push-*”(右)和“col-md-pull-*”(左)(其中星號代表移動的列組合數(shù))。
  3. 列的嵌套
    Bootstrap框架的網(wǎng)格系統(tǒng)還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當(dāng)前外部列的寬度。來看一個簡單示例：
<div class="container">
    <div class="row">
        <div class="col-md-8">
        我的里面嵌套了一個網(wǎng)格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
    <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
    我的里面嵌套了一個網(wǎng)格
        <div class="row">
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    </div>
</div>


注意：嵌套的列總數(shù)也需要遵循不超過12列。不然會造成末位列換行顯示。

來源：慕課網(wǎng)_玩轉(zhuǎn)Bootstrap（基礎(chǔ)）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第5章 菜單、按鈕及導(dǎo)航 一、下拉菜單 小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨(dú)立的組件，根...
    凜0_0閱讀 5,056評論 0贊 66
  • 首先下載 bootstrap 傳送門：中文文檔http://v3.bootcss.com/ 傳送門：英文文檔htt...
    mogugit閱讀 1,726評論 5贊 21
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4贊 61
  • 我躲過了青春痘，躲過了加班痘，卻沒能躲過層出不窮的姨媽痘。 相信不少妹紙和我一樣，一來大姨媽就瘋狂爆痘，到底是哪里...
    燈火的溫情閱讀 1,398評論 1贊 0
  • 夢這個東西，怪吆～ 夢啊，她是另一個真實(shí)的你，不知道可取不可取，昨夜的我，聲嘶力竭的在訓(xùn)斥一個我壓根就記不得的人，...
    青澀的1912閱讀 240評論 0贊 0