Bootstrap教程（基於Bootstrap3）~~~一文完結系列

原創 threecat.up 2020-07-04 07:47

目錄

前言：

一、簡介

二、環境安裝

三、Bootstrap CSS概覽

四、Bootstrap網格系統

五、排版

六、代碼

七、表格

八、表單

九、按鈕

十、圖片

十一、Bootstrap輔助類

十二、字體圖標（Glyphicons）

十三、下拉菜單（Dropdowns）

十四、按鈕組

十五、按鈕下拉菜單

十六、輸入框組

十七、導航欄

十八、麪包屑導航（Breadcrumbs）

十九、分頁

二十、標籤

二十一、徽章（Badges）

二十二、超大屏幕（Jumbotron）

二十三、頁面標題

二十四、縮略圖

二十五、Bootstrap警告

二十六、進度條

二十七、多媒體對象

二十八、創建一個網頁

二十九、插件

三十、插件

三十一、Bootstrap UI編輯器

總結：

前言：

     即使我們有了HTML+CSS+JavaScript，但是開發起來還是代碼比較多的，所以呢，我們就有了Bootstrap，來自Twitter，是目前最受歡迎的前端框架。它是基於HTML、CSS、JAVASCRIPT的，它簡潔靈活，使得Web開發更加快捷。

一、簡介

1、什麼是Bootstrap？

     Bootstrap是一個用於快速開發Web應用程序和網站的前端框架。Bootstrap是基於HTML、CSS、JAVASCRIPT的。由Twitter的Mark Otto和Jacob Thornton開發的。在2011年八月在GitHub上發佈的開源產品。

2、Bootstrap包的內容

1）基本結構：Bootstrap提供了一個帶有網格系統、鏈接樣式、背景的基本結構。

2）CSS：Bootstrap自帶一下特性：全局的CSS設置、定義基本的HTML元素樣式、可擴展的class，以及一個先進的網格系統。

3）組件：Bootstrap包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。

4）JavaScript插件：Bootstrap包含了十幾個自定義的jQuery插件，你可以直接包含所有的插件，也可以逐個包含這些插件。

5）定製：你可以定製Bootstrap的組件、LESS變量和jQuery插件來得到你自己的版本。

     我們依舊是先看一個例子：

<div class="container">
  <div class="jumbotron">
    <h1>我的第一個 Bootstrap 頁面</h1>
    <p>重置窗口大小，查看響應式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>學的不僅是技術，更是夢想！</p>
      <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>學的不僅是技術，更是夢想！</p>
      <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>學的不僅是技術，更是夢想！</p>
      <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
    </div>
  </div>
</div>
<div class="table-responsive">          
 <table class="table table-striped table-bordered">
   <thead>
     <tr>
       <th>#</th>
       <th>Name</th>
       <th>Street</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>Anna Awesome</td>
       <td>Broome Street</td>
     </tr>
     <tr>
       <td>2</td>
       <td>Debbie Dallas</td>
       <td>Houston Street</td>
     </tr>
     <tr>
       <td>3</td>
       <td>John Doe</td>
       <td>Madison Street</td>
     </tr>
   </tbody>
 </table>
</div>

二、環境安裝

1、下載Bootstrap

     從hrrp://getbootstrap.com/上下載Bootstrap的最新版本。其中有：

1）Download Bootstrap:你可以下載Bootstarp CSS、JavaScript和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。

2）Download Source：可以直接得到最新的Bootstrap LESS和JavaScript源代碼，如果是未編譯的源代碼，需要編譯LESS文件夾生成可重用的CSS文件，對於編譯LESS文件，官方只支持Recess，這個Twitter的基於less.js的CSS提示（爲了更好的開發理解，我們基本都是使用的預編譯版本）。

下載解壓之後有：

 

     當然，如果你下載的是最新版的Bootstrap4.x可能也沒有字體，這個是一個可選的Bootstrap主題。

2、HTML模板

     一個使用了Bootstrap的基本的HTML模板如下：

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支持 HTML5元素和媒體查詢 -->
      <!-- 注意： 如果通過 file://  引入 Respond.js 文件，則該文件無法起效果 -->
      <!--[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.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已編譯的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

 

3、Staticfile CDN推薦

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

三、Bootstrap CSS概覽

1、HTML5文檔類型（Doctype)

     Bootstrap使用了一些HTML5元素和CSS屬性。爲了讓這些正常工作，因爲需要使用HTML5文檔類型，其實就是在項目開頭包含<!DOCTYPE html，這個規範我們也一直都有的。

2、移動設備優先

     移動設備優先是Bootstrap3的最顯著的變化，Bootstrap開發的網站對移動設備友好，確保了適當的繪製和觸屏縮放，只需要在網頁的head中添加 viewport meta標籤：<meta name="viewport" content="width=device-width, initial-scale=1.0">，其中width屬性控制設備的寬度，加入你的網站將被不同屏幕分辨率的設備瀏覽，那麼將它設置爲device-width可以確保它能正確呈現在不同設備上。

initial-scale=1.0確保網頁被加載時，以1:1的比例呈現，不會有任何的縮放。通常，maximum-scale=1.0與user-scalable=no一起使用。可以禁止縮放功能，用戶只能滾動屏幕，讓網站更像原生應用。

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

3、響應式圖像

<img src="..." class="img-responsive" alt="響應式圖像">

     通過添加img-responsive class可以讓Bootstrap3中的圖像對響應式佈局的支持更友好。下面例子，爲圖像賦予了max-width:100%;和height:auto；屬性，可以讓圖形按比例縮放，不超過其父類元素的尺寸。

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

 

4、全局顯示、排版和鏈接

1）基本的全局顯示

Bootstrap3使用body{margin:0;}來移除body的邊距。

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

第一條規則設置body的默認字體爲“Helvetica Neue"，Helvetica,Arial,sans-serif。

第二條規矩設置文本的默認字體大小爲14像素

第三條規矩設置默認的行高爲14.28571429

第四條規矩設置默認的文本顏色爲#333333

最後一條規矩設置默認的背景顏色爲白色

 

2）排版

     使用@font-family-base、@font-size-base和@line-heitht-base屬性作爲排版樣式。

3）鏈接樣式

     通過屬性@link-color設置全局鏈接的顏色

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}
​
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

4）避免跨瀏覽器的不一致

     Bootstrap使用Normalize來建立跨瀏覽器的一致性，Normalize.css是一個很小的CSS文件，在HTML元素的默認樣式中提供了很好的跨瀏覽器一致性。

5）容器（Container)

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

     Bootstrap3的container class用於包裹頁面上的內容。

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}
.container:before,
.container:after {
  display: table;
  content: " ";
}

四、Bootstrap網格系統

     Bootstrap提供了一套響應式、移動設備優先的流式網絡系統，隨着屏幕或視口（viewport)尺寸的增加，系統會自動分爲最多12列。

1、Bootstrap網格系統（Grid System）的工作原理

  • 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。

  • 使用行來創建列的水平組。

  • 內容應該放置在列內，且唯有列可以是行的直接子元素。

  • 預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格佈局。LESS 混合類可用於更多語義佈局。

  • 列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。

  • 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。

 

2、媒體查詢

     媒體查詢是非常別緻的“有條件的CSS規則”。它只適用於一些基於某些規定條件的CSS。Bootstrap中媒體查詢允許你基於視口大小移動、顯示並隱藏內容。

/* 超小設備（手機，小於 768px） */
/* Bootstrap 中默認情況下沒有媒體查詢 */
​
/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }
​
/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }
​
/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

 

3、網格選項：

超小設備手機（<768px） 小型設備平板電腦（≥768px） 中型設備臺式電腦（≥992px） 大型設備臺式電腦（≥1200px）  
網格行爲 一直是水平的 以摺疊開始，斷點以上是水平的 以摺疊開始，斷點以上是水平的 以摺疊開始，斷點以上是水平的
最大容器寬度 None (auto) 750px 970px 1170px
Class 前綴 .col-xs- .col-sm- .col-md- .col-lg-
列數量和 12 12 12 12
最大列寬 Auto 60px 78px 95px
間隙寬度 30px （一個列的每邊分別 15px） 30px （一個列的每邊分別 15px） 30px （一個列的每邊分別 15px） 30px （一個列的每邊分別 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

 

4、基本的網絡結構

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

五、排版

1、標題：Bootstrap中定義了所有的HTML標題（h1-h6)的樣式。

1）內聯子標題：如果需要向任何標題添加一個內聯子標題，只需要簡單的在元素兩旁天劍<small>，或者添加.small class，這樣子你就可以得到一個字號更小的顏色更淺的文本：

 

<h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>
<h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>
<h3>我是標題3 h3. <small>我是副標題3 h3</small></h3>
<h4>我是標題4 h4. <small>我是副標題4 h4</small></h4>
<h5>我是標題5 h5. <small>我是副標題5 h5</small></h5>
<h6>我是標題6 h6. <small>我是副標題6 h6</small></h6>

2、引導主題副本

     爲了給段落添加強調文本，則可以添加class="lead",這裏將得到更大更粗、行高更高的文本：

<h2>引導主體副本</h2>
<p class="lead">這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。</p>

3、強調

     HTML的強調標籤<small>（設置文本爲父文本大小的85%）、<strong>（設置文本爲更粗的文本）、<em>（設置文本爲斜體）。

<small>本行內容是在標籤內</small><br>
<strong>本行內容是在標籤內</strong><br>
<em>本行內容是在標籤內，並呈現爲斜體</em><br>
<p class="text-left">向左對齊文本</p>
<p class="text-center">居中對齊文本</p>
<p class="text-right">向右對齊文本</p>
<p class="text-muted">本行內容是減弱的</p>
<p class="text-primary">本行內容帶有一個 primary class</p>
<p class="text-success">本行內容帶有一個 success class</p>
<p class="text-info">本行內容帶有一個 info class</p>
<p class="text-warning">本行內容帶有一個 warning class</p>
<p class="text-danger">本行內容帶有一個 danger class</p>

4、縮寫

     HTML元素提供了用於縮寫的標記，比如WWW或HTTP。Bootstrap定義<abbr>元素的樣式爲顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要你爲<abbr>title屬性添加了文本）。

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

5、地址

     使用<address>標籤，你可以在網頁上顯示聯繫信息，由於<address>默認爲display:block;，你需要使用<br>標籤來爲封閉的地址文本添加換行。

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

6、引用

     你可以在任意的HTML文本旁使用默認的<blockquote>。其它選項包括，添加一個<small>標籤來標識引用的來源，使用class.pull-right向右對齊引用。

<blockquote>
  <p>
  這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。
  </p>
</blockquote>
<blockquote>
  這是一個帶有源標題的引用。
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull-right">
  這是一個向右對齊的引用。
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
​

7、列表

  • 有序列表：有序列表是指以數字或其他有序字符開頭的列表。

  • 無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。如果您不想顯示這些着重號，您可以使用 class .list-unstyled 來移除樣式。您也可以通過使用 class .list-inline 把所有的列表項放在同一行中。

  • 定義列表：在這種類型的列表中，每個列表項可以包含 <dt>和 <dd>元素。<dt>代表 定義術語，就像字典。接着，<dd> 是<dt> 的描述。.dl-horizontal 可以讓 <dl> 內的短語及其描述排在一行。開始是像 <dl> 的默認樣式堆疊在一起，隨着導航條逐漸展開而排列在一行。

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>無序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定義樣式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>內聯列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定義列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定義列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

六、代碼

     Bootstrap允許你以兩種方式顯示代碼：

1）第一種是<code>標籤。如果你想要內聯顯示代碼，那麼就使用此標籤。

2）第二種是<pre>標籤。如果代碼需要被顯示爲一個獨立的塊元素或者代碼有多少行，那麼應該使用此標籤。例如：

p><code>&lt;header&gt;</code> 作爲內聯元素被包圍。</p>
<p>如果需要把代碼顯示爲一個獨立的塊元素，請使用 &lt;pre&gt; 標籤：</p>
<pre>
    &lt;article&gt;
        &lt;h1&gt;Article Heading&lt;/h1&gt;
    &lt;/article&gt;
</pre>

七、表格

     Bootstrap提供了一個清晰的創建表格的佈局，下表列出了Bootstrap支持的一些表格元素：

標籤 描述
<table> 爲表格添加基礎樣式。
<thead> 表格標題行的容器元素（<tr>），用來標識表格列。
<tbody> 表格主體中的表格行的容器元素（<tr>）。
<tr> 一組出現在單行上的表格單元格的容器元素（<td> 或 <th>）。
<td> 默認的表格單元格。
<th> 特殊的表格單元格，用來標識列或行（取決於範圍和位置）。必須在<thead>內使用。
<caption> 關於表格存儲內容的描述或總結。

1、表格類

類 描述
.table 爲任意 <table>添加基本樣式 (只有橫向分隔線)
.table-striped 在 <tbody>內添加斑馬線形式的條紋 ( IE8 不支持)
.table-bordered 爲所有表格的單元格添加邊框
.table-hover 在 <tbody> 內的任一行啓用鼠標懸停狀態
.table-condensed 讓表格更加緊湊

2、<tr>,<th>,<td>類

.active 將懸停的顏色應用在行或者單元格上
.success 表示成功的操作
.info 表示信息變化的操作
.warning 表示一個警告的操作
.danger 表示一個危險的操作

3、基本的表格

     如果你想要一個只帶有內邊框和水平分割的基本表，添加class.table，例如：

<table class="table">
  <caption>基本的表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

4、可選的表格類

     除了基本的表格標記和.table class,還有一些可以用來標記定義樣式的類

1）條紋表格：通過添加.table-striped class，就可以在<tbody>內的行上看到條紋：

<table class="table table-striped">
  <caption>條紋表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
      <th>郵編</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>
​

2）邊框表格：通過添加.table-bordered class，你可以看到每個元素周圍都有邊框，且佔整個表格是圓角的。

<table class="table table-bordered">
  <caption>邊框表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
      <th>郵編</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

3)懸停表格：通過添加.table-hover class，當指針懸停在行上時會出現淺灰色背景：

<table class="table table-hover">
  <caption>懸停表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
      <th>郵編</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

4）精簡表格：通過添加.table-condensed class，行內邊距被切爲兩半，以便看起來更緊湊：

<table class="table table-condensed">
  <caption>精簡表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
      <th>郵編</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody>
</table>

5)上下文類

     下表中所列出的上下文類允許你改變表格行或單元格的背景顏色：

類 描述
.active 對某一特定的行或單元格應用懸停顏色
.success 表示一個成功的或積極的動作
.warning 表示一個需要注意的警告
.danger 表示一個危險的或潛在的負面動作

這些類可以被應用到tr,rd,th。

<table class="table">
  <caption>上下文表格佈局</caption>
  <thead>
    <tr>
      <th>產品</th>
      <th>付款日期</th>
      <th>狀態</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>產品1</td>
      <td>23/11/2013</td>
      <td>待發貨</td></tr>
    <tr class="success">
      <td>產品2</td>
      <td>10/11/2013</td>
      <td>發貨中</td></tr>
    <tr class="warning">
      <td>產品3</td>
      <td>20/10/2013</td>
      <td>待確認</td></tr>
    <tr class="danger">
      <td>產品4</td>
      <td>20/10/2013</td>
      <td>已退貨</td></tr>
  </tbody>
</table>

6)響應式表格：通過把任意的.table包在.table-responsive class內，你可以讓表格水平滑動以適應小型設備（小於768px)。當在大於768px寬的大型設備上查看時，沒有任何差別。

<div class="table-responsive">
  <table class="table">
    <caption>響應式表格佈局</caption>
    <thead>
      <tr>
        <th>產品</th>
        <th>付款日期</th>
        <th>狀態</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>產品1</td>
        <td>23/11/2013</td>
        <td>待發貨</td></tr>
      <tr>
        <td>產品2</td>
        <td>10/11/2013</td>
        <td>發貨中</td></tr>
      <tr>
        <td>產品3</td>
        <td>20/10/2013</td>
        <td>待確認</td></tr>
      <tr>
        <td>產品4</td>
        <td>20/10/2013</td>
        <td>已退貨</td></tr>
    </tbody>
  </table>
</div>

八、表單

1、表單佈局：垂直表單（默認），內聯表單，水平表單

1）垂直或基本表單

     基本的表單結構是Bootstrap自帶的，個別的表單控件自動接收一些全局樣式。

創建步驟：

  • 向父 <form>元素添加 role="form"。

  • 把標籤和控件放在一個帶有 class .form-group 的 <div>中。這是獲取最佳間距所必需的。

  • 向所有的文本元素 <input>、<textarea>和 <select>添加 class ="form-control" 。

<form role="form">
  <div class="form-group">
    <label for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
  </div>
  <div class="form-group">
    <label for="inputfile">文件輸入</label>
    <input type="file" id="inputfile">
    <p class="help-block">這裏是塊級幫助文本的實例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">請打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

2）內聯表單

     如果需要創建一個表單，它的所有元素都是內聯的，向左對齊的，標籤是並排，請想<form>標籤價class.form-inline。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">文件輸入</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">請打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

3）水平表單

     水平表單與其它表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需創建一個水平佈局的表單，步驟：

  • 向父 <form> 元素添加 class .form-horizontal。

  • 把標籤和控件放在一個帶有 class .form-group 的 <div>中。

  • 向標籤添加 class .control-label。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="請輸入名字">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="請輸入姓">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">請記住我
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登錄</button>
    </div>
  </div>
</form>

 

2、支持的表單控件

     Bootstrap支持最常見的表單控件，主要是input、textarea、checkbox、radio和select。

1）輸入框

Bootstrap提供了對所有原生的HTML5的input類型的支持，包括：text,password,datetime,datetime-local,date,month,time,week,number,email,url,serch,tel和color。適當的type聲明是必需的，這樣才能讓input獲得完整的樣式。

<form role="form">
  <div class="form-group">
    <label for="name">標籤</label>
    <input type="text" class="form-control" placeholder="文本輸入">
  </div>
 </form>

2）文本框

     當你需要多行輸入時，就可以使用文本框，必要時可以改變rows屬性。

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

3）複選框和單選框

     複選框和單選框按鈕用於讓用戶從一系列設置的選項中進行選擇。

label for="name">默認的複選框和單選按鈕的實例</label>
<div class="checkbox">
    <label><input type="checkbox" value="">選項 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">選項 2</label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 選項 1
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">選項 2 - 選擇它將會取消選擇選項 1
    </label>
</div>
<label for="name">內聯的複選框和單選按鈕的實例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 選項 2
    </label>
</div>

4）選擇框

     如果你想讓用戶從多個選項中進行選擇，但是默認情況下只能選擇一個選項時，可以使用選擇框。

<form role="form">
  <div class="form-group">
    <label for="name">選擇列表</label>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <label for="name">可多選的選擇列表</label>
    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

5）靜態控件

     當你需要在一個水平表單內的表單標籤後放置純文本時，請在<p>上使用class.form-control-static。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密碼</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="請輸入密碼">
    </div>
  </div>
</form>

3、表單空間狀態

     除了:focus狀態，Bootstrap還爲禁止的輸入框定義了樣式，並提供了表單驗證的class。

1）輸入框焦點

     當輸入框input接收到:focus時，輸入框的輪廓會被移除，同時應用box-shadow。

2）禁用的輸入框input

     如果你需要禁用一個輸入框input，只需要簡單的添加disabled屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及但鼠標的指針懸停在元素上時鼠標指針的樣式。

3）禁用的字段集fieldset

     對<fieledset>添加disable屬性來禁用<fieldset>內所的所有空間。

4）驗證狀態

     Bootstrap包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單的添加適當的class(.has-warning、has-error或.has-success)即可使用驗證狀態。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">聚焦</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="該輸入框獲得焦點...">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止選擇</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError">輸入錯誤</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
    </div>
  </div>
</form>

4、調整表單空間大小

     可以使用class.input-lg和.col-lg-*來設置表單的高度和寬度。

<form role="form">
  <div class="form-group">
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="默認輸入">
  </div>
  <div class="form-group">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
  </div>
  <div class="form-group"></div>
  <div class="form-group">
    <select class="form-control input-lg">
      <option value="">.input-lg</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control">
      <option value="">默認選擇</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control input-sm">
      <option value="">.input-sm</option>
    </select>
  </div>
  <div class="row">
    <div class="col-lg-2">
      <input type="text" class="form-control" placeholder=".col-lg-2">
    </div>
    <div class="col-lg-3">
      <input type="text" class="form-control" placeholder=".col-lg-3">
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder=".col-lg-4">
    </div>
  </div>
</form>

5、表單幫助文本

    Bootstrp表單控件可以在輸入框input上有一個塊級幫助文本。爲了添加一個佔用整個寬度的內容塊，請在<input>後使用.help-block。

九、按鈕

     任何帶有class.btn的元素都會繼承圓角灰色按鈕的默認外觀，但是Bootstrap也提供了選項可以自定義樣式。

類 描述
.btn 爲按鈕添加基本樣式
.btn-default 默認/標準按鈕
.btn-primary 原始按鈕樣式（未被操作）
.btn-success 表示成功的動作
.btn-info 該樣式可用於要彈出信息的按鈕
.btn-warning 表示需要謹慎操作的按鈕
.btn-danger 表示一個危險動作的按鈕操作
.btn-link 讓按鈕看起來像個鏈接 (仍然保留按鈕行爲)
.btn-lg 製作一個大按鈕
.btn-sm 製作一個小按鈕
.btn-xs 製作一個超小按鈕
.btn-block 塊級按鈕(拉伸至父元素100%的寬度)
.active 按鈕被點擊
.disabled 禁用按鈕 
<!-- 標準的按鈕 -->
<button type="button" class="btn btn-default">默認按鈕</button>
<!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應謹慎採取的動作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動作 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行爲 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>

1、按鈕大小

Class 描述
.btn-lg 這會讓按鈕看起來比較大。
.btn-sm 這會讓按鈕看起來比較小。
.btn-xs 這會讓按鈕看起來特別小。
.btn-block 這會創建塊級的按鈕，會橫跨父元素的全部寬度。

2、按鈕狀態

1）激活狀態

     按鈕在激活時將呈現爲被按壓的外觀（深色的背景、深色的邊框、陰影）。

元素 Class
按鈕元素 添加 .active class 來顯示它是激活的。
錨元素 添加 .active class 到 <a> 按鈕來顯示它是激活的。

2）禁用狀態

     當你禁用一個按鈕時，它的顏色會變淡50%，並失去漸變。

元素 Class
按鈕元素 添加 disabled 屬性 到 <button> 按鈕。
錨元素 添加 disabled class 到 <a> 按鈕。

3）按鈕標籤

你可以在<a>、<button>或<input>元素上使用按鈕class。

<a class="btn btn-default" href="#" role="button">鏈接</a>
<button class="btn btn-default" type="submit">按鈕</button>
<input class="btn btn-default" type="button" value="輸入">
<input class="btn btn-default" type="submit" value="提交">

4）按鈕組

     在div中直接使用.btn-group可以創建按鈕組：

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

5)自適應大小的按鈕組

     可以通過.btn-group-justified類來設置自適應大小的按鈕組。

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

6）內嵌下拉菜單的按鈕組

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

7）分割按鈕

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>

十、圖片

Bootstrap提供了三個可對圖片應用簡單樣式的class:

  • img-rounded：添加 border-radius:6px 來獲得圖片圓角。

  • .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。

  • .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。

1、<img>類

類 描述
.img-rounded 爲圖片添加圓角 (IE8 不支持)
.img-circle 將圖片變爲圓形 (IE8 不支持)
.img-thumbnail 縮略圖功能
.img-responsive 圖片響應式 (將很好地擴展到父元素)

2、響應式圖片

通過<img>標籤添加.img-responsive類來讓圖片支持響應式設計。圖片可以很好的擴展到父元素。.img-responsive類將max-width:100%;和height:auto；樣式應用在圖片上：

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

十一、Bootstrap輔助類

1、文本

     以下不同的類展示了不同的文本顏色。如果文本是個鏈接鼠標移動到文本上會變暗：

類 描述
.text-muted "text-muted" 類的文本樣式
.text-primary "text-primary" 類的文本樣式
.text-success "text-success" 類的文本樣式
.text-info "text-info" 類的文本樣式
.text-warning "text-warning" 類的文本樣式
.text-danger "text-danger" 類的文本樣式

2、背景

     下不同的類展示了不同的背景顏色。 如果文本是個鏈接鼠標移動到文本上會變暗：

類 描述
.bg-primary 表格單元格使用了 "bg-primary" 類
.bg-success 表格單元格使用了 "bg-success" 類
.bg-info 表格單元格使用了 "bg-info" 類
.bg-warning 表格單元格使用了 "bg-warning" 類
.bg-danger 表格單元格使用了 "bg-danger" 類

3、其它

類 描述
.pull-left 元素浮動到左邊
.pull-right 元素浮動到右邊
.center-block 設置元素爲 display:block 並居中顯示
.clearfix 清除浮動
.show 強制元素顯示
.hidden 強制元素隱藏
.sr-only 除了屏幕閱讀器外，其他設備上隱藏元素
.sr-only-focusable 與 .sr-only 類結合使用，在元素獲取焦點時顯示(如：鍵盤操作的用戶)
.text-hide 將頁面元素所包含的文本內容替換爲背景圖
.close 顯示關閉按鈕
.caret 顯示下拉式功能

十二、字體圖標（Glyphicons）

1、什麼是字體圖標

     字體圖標是在Web項目中使用的圖標字體。雖然，Glyphicons Halfings需要商業許可，但是你看呀通過基於項目的Bootstrap來免費獲取這些圖標。

2、獲取圖標

     下載Bootstrap3.x版本，在fonts文件夾內就可以找到字體圖標：

  • glyphicons-halflings-regular.eot

  • glyphicons-halflings-regular.svg

  • glyphicons-halflings-regular.ttf

  • glyphicons-halflings-regular.woff

3、CSS規則解釋

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
 
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

     所以font-face規則實際上是找到glyphicons地方聲明font-family和位置。

4、用法

     如需使用圖標，只需要簡單的使用下面的代碼即可。

<span class="glyphicon glyphicon-search"></span>

<p>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button>
</p>
<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User
</button>

十三、下拉菜單（Dropdowns）

     下拉菜單時可切換的，是以列表格式顯示鏈接的上下文菜單。這裏可以通過與下拉菜單JavaScript插件的互動來實現。

如需使用下拉菜單，只需要在class.dropdown內加上下拉菜單即可。

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">數據挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">數據通信/網絡</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
        </li>
    </ul>
</div>

更多：

類 描述
.dropdown 指定下拉菜單，下拉菜單都包裹在 .dropdown 裏
.dropdown-menu 創建下拉菜單
.dropdown-menu-right 下拉菜單右對齊
.dropdown-header 下拉菜單中添加標題
.dropup 指定向上彈出的下拉菜單
.disabled 下拉菜單中的禁用項
.divider 下拉菜單中的分割線

十四、按鈕組

     按鈕組允許多個按鈕被堆疊在同一行上，當你想要把按鈕對齊在一起時，這就顯得很有用。可以通過Bootstrap按鈕插件添加可選的JavaScript單選框和複選框樣式行爲。

Class 描述 代碼示例
.btn-group 該 class 用於形成基本的按鈕組。在 .btn-group 中放置一系列帶有 class .btn 的按鈕。 <div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div>
.btn-toolbar 該 class 有助於把幾組 <div class="btn-group"> 結合到一個 <div class="btn-toolbar"> 中，一般獲得更復雜的組件。 <div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
.btn-group-lg, .btn-group-sm, .btn-group-xs 這些 class 可應用到整個按鈕組的大小調整，而不需要對每個按鈕進行大小調整。 <div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>
.btn-group-vertical 該 class 讓一組按鈕垂直堆疊顯示，而不是水平堆疊顯示。 <div class="btn-group-vertical"> ... </div>

1、基本的按鈕組：使用class.btn-group

<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <button type="button" class="btn btn-default">按鈕 3</button>
</div>

2、按鈕工具欄：使用class.btn-toolbar

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <button type="button" class="btn btn-default">按鈕 3</button>
 </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 4</button>
    <button type="button" class="btn btn-default">按鈕 5</button>
    <button type="button" class="btn btn-default">按鈕 6</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 7</button>
    <button type="button" class="btn btn-default">按鈕 8</button>
    <button type="button" class="btn btn-default">按鈕 9</button>
</div>
</div>

3、按鈕的大小：使用class.btn-group-*

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <button type="button" class="btn btn-default">按鈕 3</button>
</div>
    <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">按鈕 4</button>
    <button type="button" class="btn btn-default">按鈕 5</button>
    <button type="button" class="btn btn-default">按鈕 6</button>
</div>
    <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">按鈕 7</button>
    <button type="button" class="btn btn-default">按鈕 8</button>
    <button type="button" class="btn btn-default">按鈕 9</button>
</div>

4、嵌套

<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉鍊接 1</a></li>
        <li><a href="#">下拉鍊接 2</a></li>
    </ul>
    </div>
</div>

5、垂直的按鈕組：使用class.btn-group-vertical

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉鍊接 1</a></li>
        <li><a href="#">下拉鍊接 2</a></li>
    </ul>
    </div>
</div>

十五、按鈕下拉菜單

     如需向按鈕添加下拉菜單，只需要簡單的在一個btn-group容器中放置按鈕和下拉菜單即可。你也可以使用<span class="caret"></span>來指示按鈕作爲下拉菜單。

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默認
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一個功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分離的鏈接</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一個功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分離的鏈接</a>
        </li>
    </ul>
</div>

十六、輸入框組

     Bootstrap支持的另一個特性，輸入框組。輸入框組擴展自表單控件。使用輸入框組，你可以很容易的向基於文本的輸入框添加作爲前綴和後綴的文本或按鈕。

通過向輸入域添加前綴或後綴的內容，你可以向用戶添加公共元素。

向.form-control添加前綴或後綴元素的步驟如下：

  • 把前綴或後綴元素放在一個帶有 class .input-group 的 <div> 中。

  • 接着，在相同的 <div> 內，在 class 爲 .input-group-addon 的 <span> 內放置額外的內容。

  • 把該 <span> 放置在 <input> 元素的前面或者後面

1、基本的輸入框組

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>

2、導航元素

Bootstrap提供的用於定義導航元素的選項，都是使用相同的標記和基類.nav。Bootstrap也提供了一個用於共享標記和狀態的幫助器類。

1）表格導航或標籤

創建一個標籤式的導航菜單：

  • 以一個帶有 class .nav 的無序列表開始。

  • 添加 class .nav-tabs。

<p>標籤式的導航菜單</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

2）膠囊式的導航菜單

     如果需要把標籤改成膠囊的樣式，只需要使用class.nav-pills代替.nav-tabs即可。

<p>基本的膠囊式導航菜單</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

3）垂直的膠囊式導航菜單

     使用class.nva、.nav-pills的同時使用class.nav-stacked，讓膠囊垂直堆疊。

<p>垂直的膠囊式導航菜單</p>
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

4、下拉菜單

     導航菜單與下拉菜單使用相似的語法。默認情況下，列表項的錨與一些數據屬性協同合作來觸發帶有.dropdown-menu class的無序列表。

1）帶有下拉菜單的標籤：

向標籤添加下拉菜單的步驟如下：

  • 以一個帶有 class .nav 的無序列表開始。

  • 添加 class .nav-tabs。

  • 添加帶有 .dropdown-menu class 的無序列表。

<p>帶有下拉菜單的標籤</p>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分離的鏈接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

2）帶有下拉菜單的膠囊

     只需要把.nav-tabs class改爲.nav-pills

<p>帶有下拉菜單的膠囊</p>
  <ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分離的鏈接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

十七、導航欄

1、默認的導航欄

     創建一個默認的導航欄的步驟如下：

  • 向 <nav> 標籤添加 class .navbar、.navbar-default。

  • 向上面的元素添加 role="navigation"，有助於增加可訪問性。

  • 向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。

  • 爲了嚮導航欄添加鏈接，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可。

2、響應式的導航欄

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切換導航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
​

十八、麪包屑導航（Breadcrumbs）

     麪包屑導航是一種基於網站層次信息的顯示方式。帶有.breadcrumb class的無序列表：

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

實例：

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>

十九、分頁

     Bootstrap支持分頁特性，分頁，是一種無序列表，Bootstrap像處理其他界面元素一樣處理分頁。

Class 描述 示例代碼
.pagination 添加該 class 來在頁面上顯示分頁。 <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul>
.disabled, .active 您可以自定義鏈接，通過使用 .disabled 來定義不可點擊的鏈接，通過使用 .active 來指示當前的頁面。 <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul>
.pagination-lg, .pagination-sm 使用這些 class 來獲取不同大小的項。  

1、默認分頁

用到了class.pagination

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

2、分頁的狀態

用到了class.disabled、.active：

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

3、翻頁

     如果你想要創建一個簡單的分頁鏈接爲用戶提供導航，可以通過翻頁來實現。

Class 描述 示例代碼
.pager 添加該 class 來獲得翻頁鏈接。 <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
.previous, .next 使用 class .previous 把鏈接向左對齊，使用 .next 把鏈接向右對齊。 <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
.disabled 添加該 class 來設置對應按鈕禁止使用。 <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>

默認的翻頁：

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

二十、標籤

     標籤用class.label來顯示：

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>

二十一、徽章（Badges）

     徽章與標籤相似，主要的區別在於徽章的邊角更加圓滑。徽章主要用於突出顯示新的或未讀的項。只需要把<span class="badge">添加到鏈接、Bootstrap導航等這些元素上即可。

例如：展示未讀郵件

<a href="#">Mailbox <span class="badge">50</span></a>

1、激活導航狀態

你可以在激活狀態的膠囊式導航和列表導航中放置徽章，通過使用<span class="badge">來激活鏈接：

<h4>膠囊式導航中的激活狀態</h4>
<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首頁
            <span class="badge">42</span>
        </a>
    </li>
    <li>
        <a href="#">簡介</a>
    </li>
    <li>
        <a href="#">消息
            <span class="badge">3</span>
        </a>
    </li>
</ul>
<br>
<h4>列表導航中的激活狀態</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span>首頁</a>
        </li>
    <li>
        <a href="#">簡介</a>
    </li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span>消息
        </a>
    </li>
</ul>

二十二、超大屏幕（Jumbotron）

     該組件可以增加標題的大小，併爲登錄頁面內容添加更多的外邊距。步驟如下：

  • 創建一個帶有 class .jumbotron. 的容器<div>。

  • 除了更大的 <h1>，字體粗細 font-weight 被減爲 200。

<div class="container">
   <div class="jumbotron">
        <h1>歡迎登陸頁面！</h1>
        <p>這是一個超大屏幕（Jumbotron）的實例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        學習更多</a>
      </p>
   </div>
</div>

二十三、頁面標題

     如需使用Page Header，只需要把標題放置帶有class.page-header的<div>中：

<div class="page-header">
    <h1>頁面標題實例
        <small>子標題</small>
    </h1>
</div>
<p>這是一個示例文本。這是一個示例文本。這是一個示例文本。這是一個示例文本。這是一個示例文本。</p>

二十四、縮略圖

     使用Bootstrap創建縮略圖的步驟如下：

  • 在圖像周圍添加帶有 class .thumbnail 的 <a> 標籤。

  • 這會添加四個像素的內邊距（padding）和一個灰色的邊框。

  • 當鼠標懸停在圖像上時，會動畫顯示出圖像的輪廓。

<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的佔位符縮略圖">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的佔位符縮略圖">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的佔位符縮略圖">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的佔位符縮略圖">
        </a>
    </div>
</div>

1、添加自定義的內容

當我們有了一個基本的縮略圖，我們可以向縮略圖添加各種HTML內容，比如標題、段落或按鈕。具體步驟如下：

  • 把帶有 class .thumbnail 的 <a> 標籤改爲 <div>。

  • 在該 <div> 內，您可以添加任何您想要添加的東西。由於這是一個 <div>，我們可以使用默認的基於 span 的命名規則來調整大小。

  • 如果您想要給多個圖像進行分組，請把它們放置在一個無序列表中，且每個列表項向左浮動。

<div class="row">
    <div class="col-sm-6 col-md-3">
         <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
             alt="通用的佔位符縮略圖">
            <div class="caption">
                <h3>縮略圖標籤</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
         </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的佔位符縮略圖">
            <div class="caption">
                <h3>縮略圖標籤</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的佔位符縮略圖">
            <div class="caption">
                <h3>縮略圖標籤</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的佔位符縮略圖">
            <div class="caption">
                <h3>縮略圖標籤</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

二十五、Bootstrap警告

     創建一個內聯的可取消的警告框，可以使用警告jQuery插件。通過創建一個<div>，並向其添加一個.alert class和四個上下文class（.alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警告框。

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！請注意這個信息。</div>
<div class="alert alert-warning">警告！請不要提交。</div>
<div class="alert alert-danger">錯誤！請進行一些更改。</div>

1、可取消的警告

創建一個可取消的警告（Dismissal Alert）步驟如下：

  • 通過創建一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警告框。

  • 同時向上面的 <div> class 添加可選的 .alert-dismissable。

  • 添加一個關閉按鈕。

<div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            成功！很好地完成了提交。
        </div>
        <div class="alert alert-info alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            信息！請注意這個信息。
        </div>
        <div class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            警告！請不要提交。
        </div>
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            錯誤！請進行一些更改。
        </div>

二十六、進度條

     嗚嗚嗚，Bootstrap的進度條當然花裏胡哨了，太多了，所以這裏我們就看看默認的吧~

創建一個基本的進度條的步驟如下：

  • 添加一個帶有 class .progress 的 <div>。

  • 接着，在上面的 <div> 內，添加一個帶有 class .progress-bar 的空的 <div>。

  • 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="width: 60%"; 表示進度條在 60% 的位置。

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

二十七、多媒體對象

     我們來看一個簡單的文本圖片實例：

<！- 左對齊-> < div class = “ media ” > < div class = “ media-left ” > < img src = “ img_avatar1.png ” class = “ media-object ” 樣式= “ width：60px ” > </ div > < div class = “ media-body ” > <h4 class = “
 
   
       
  
   
     media-heading “ > 左對齊</ h4 > < p > 這是一些示例文本... </ p > </ div > </ div > <！- 右對齊-> < div class = ” media “ > < div class = “ media-body ” > < h4 class = “ media-heading ” > 左對齊</ h4 > <p >
    
  
​
 
​
 
   
     
    這是一些示例文本... </ p > </ div > < div class = “ media-right ” > < img src = “ img_avatar1.png ” class = “ media-object ” 樣式= “ width：60px ” > </ div > </ div >

二十八、創建一個網頁

     使用Bootstrap3來創建一個簡單的響應式網頁

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>我的第一個 Bootstrap 頁面</h1>
  <p>重置瀏覽器窗口大小查看效果！</p> 
</div>
 
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">網站名</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">主頁</a></li>
        <li><a href="#">頁面 2</a></li>
        <li><a href="#">頁面 3</a></li>
      </ul>
    </div>
  </div>
</nav>
 
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h2>關於我</h2>
      <h5>我的照片:</h5>
      <div class="fakeimg">這邊插入圖像</div>
      <p>關於我的介紹..</p>
      <h3>鏈接</h3>
      <p>描述文本。</p>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">鏈接 1</a></li>
        <li><a href="#">鏈接 2</a></li>
        <li><a href="#">鏈接 3</a></li>
      </ul>
      <hr class="hidden-sm hidden-md hidden-lg">
    </div>
    <div class="col-sm-8">
      <h2>標題</h2>
      <h5>副標題</h5>
      <div class="fakeimg">圖像</div>
      <p>一些文本..</p>
      <p>菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！</p>
      <br>
      <h2>標題</h2>
      <h5>副標題</h5>
      <div class="fakeimg">圖像</div>
      <p>一些文本..</p>
      <p>菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！</p>
    </div>
  </div>
</div>
 
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>底部內容</p>
</div>

二十九、插件

     Bootstrap自帶12種jQuery插件，擴展了功能。你可以利用Bootstrap數據API(Bootstrap Data API)，大部分插件可以在不編寫任何代碼的情況下觸發。

站點引入Bootstrap插件的方式有兩種：

  • 單獨引用：使用 Bootstrap 的個別的 *.js 文件。一些插件和 CSS 組件依賴於其他插件。如果您單獨引用插件，請先確保弄清這些插件之間的依賴關係。

  • 編譯（同時）引用：使用 bootstrap.js 或壓縮版的 bootstrap.min.js。

1、data屬性

     你可以通過data屬性API就能使用所有的Bootstrap插件，無需一行JavaScript代碼。

關閉data屬性API的方法：

$(document).off('.data-api')

關閉一個特定的插件的方法：

$(document).off('.alert.data-api')

 

2、編程方式的API

     所有Bootstrap插件提供了純JavaScript方式的API。所有公開的API都是單獨支持或鏈式調用，並且返回其所操作的元素結合。例如：

$(".btn.danger").button("toggle").addClass("fat")

 

3、事件

     Bootstrap爲大多數插件的獨特行爲提供了自定義事件，一般來說，有兩種形式：

動詞不定式：這會在事件開始時被觸發。例如 ex: show。動詞不定式事件提供了 preventDefault 功能。這使得在事件開始前可以停止操作的執行。

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模態框的顯示
  if (!data) return e.preventDefault() 
})

過去分詞形式：這會在動作執行完畢之後被觸發。例如 ex: shown。

三十、插件

1、過渡效果插件（Transition）

2、模態框（Modal）插件

3、下拉菜單（Dropdown）插件

4、滾動監聽（Scrollspy）插件

5、標籤頁（Tab）插件

6、提示工具（Tooltip）插件

7、彈出框（Popover）插件

8、警告框（Alert）插件

9、按鈕（Button）插件

10、摺疊（Collapse）插件

11、輪播（Carousel）插件

12、附加導航（Affix）插件

三十一、Bootstrap UI編輯器

1、Bootstrap Magic

2、BootSwatchr

3、Bootstrap Live Editor

4、Fancy Boot

 

總結：

     最新的Bootstrap4更新了很多的組件功能，大家可以去看看。瞭解了基本原理之後，其實Bootstrap提供的便捷的可視化編程老香了，哈哈哈。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

10 個實用的 Chrome DevTools 設計功能

Chrome DevTools 不只是開發者的工具，也是網頁設計師的好幫手。讓我來爲大家介紹十個非常實用的設計功能。 直達 Google 開發者在線課程，收穫 Web 技術乾貨 https://developers.google.cn/le

王莹 2021-11-30 09:53:49

PWA 的高級模式

漸進式 Web 應用 (PWA) 讓開發者打造的 Web 應用在體驗上能夠與用戶的桌面設備或移動設備上安裝的其他應用別無二致。在本次專題演講中，我們將瞭解各家公司如何結合運用緩存策略和現代 Web API 來實現快速而彈性的 Web 體驗。

王莹 2021-11-29 16:13:59

核心網頁指標的新變化以及成功模式

我們一直都在積極收集關於網頁指標的反饋，在本次專題演講中，我們將分享我們關於如何利用工具衡量和優化網頁指標的最新研究成果。 直達 Google 開發者在線課程，收穫 Web 技術乾貨 https://developers.google.cn

王莹 2021-11-29 16:13:59

隱私沙盒近期動向

web 平臺的默認隱私保障正在逐步強化。您的網站該如何爲更注重隱私保護的 web 做好準備？我們將爲您逐一介紹下面這些開發者須知事項：具體變化和原因、如何爲第三方 cookie 的停用做好準備、有哪些可用的工具、有哪些可嘗試的新 API、C

王莹 2021-11-29 16:13:59

Site Kit 和 CMS 核心網頁指標的新變化

Sitekit 是一個 Google 所開發的一站式工具套件，供網站站長和創作者查看網站性能和健康狀況。 在本次專題演講中，我們將展示 Sitekit 的強大功能，以及 Google 如何與網站構建平臺和託管服務提供商合作集成此一站式解決方

王莹 2021-11-26 10:09:03

2021 Google 開發者大會一覽，同步Android、TensorFlow、Web開發等最新動態

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

罗燕珊 2021-11-16 19:33:53

ssm根據pdf模板導出pdf

一、使用word設計pdf模板，並另存爲pdf格式的文件。 二、使用Adobe Acrobat DC工具，打開pdf文件，工具中選擇準備表單並打開 三、在文件中設置域名稱，如下圖 四、下面是正式的操作 pom依賴 <!-- 生成P

LVAmber 2020-07-08 12:00:10

koa應用的部署

koa應用的部署 koa2項目的簡單創建到服務器的部署， 本例使用centos。 創建koa2項目 npm install -g koa-generator npm start 是 npm run start npm stop

这魏先森 2020-07-08 08:25:02

Ruby on Rails的國際化，本地化問題的解決(轉載)

原文出自: http://my.donews.com/woodstudio/ Ruby on Rails是一個很不錯的web開發框架，不過由於目前其本身對國際化的支持較差，所以需要一些輔助的東西來解決國際化問題。 我最先使用的是一個叫

iteye_17269 2020-07-08 02:37:16

Could not open ServletContext resource [/WEB-INF/a

   錯誤如下： org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document from resourc

iteye_3794 2020-07-08 00:39:42

windows系統遠程提權、MySQL UDF提權

本文目錄權限提升提權本質提權分類windows系統提權基礎命令windows提權輔助工具輔助工具介紹windows遠程提權上手操作一下Mysql UDF提權udf介紹udf.dll獲取上傳udf執行提權命令 前言 小白一枚，之前聽

m0re 2020-07-07 23:45:29

前後端數據交互-json 你還不會傳集合嗎?

文章目錄json前端jsp後端配置導入beancontroller測試結果後端控制檯前端控制檯 json json(JavaScript Object Notation) 是一種數據格式，就是將key和value按規範封裝成一串字

唔仄lo咚锵 2020-07-07 22:40:07

關於DOM的一段話

[size=large]DOM實際上是以面向對象的方式描述的對象模型。DOM定義了表示和修改文檔所需要的對象，這些對象的屬性和行爲以及這些對象之間的關

iteye_17543 2020-07-07 22:21:22

RESTful風格API到底是什麼？

什麼是RESTful REST（Resource Representational State Transfer）是Roy Thomas Fielding在他2000年的博士論文中提出的。如果一個架構符合REST原則，就稱爲RES

hongmin.shm 2020-07-07 21:53:41

Spring攔截器Interceptor與Servlet過濾器Filter詳解

文章目錄一、先說結論1.攔截器Interceptor與過濾器Filter的區別2.攔截器鏈與過濾器鏈的執行順序Filter 鏈執行順序Interceptor 執行順序3.攔截器與過濾器的執行時機4.攔截器與過濾器的適用場景攔截器I

hongmin.shm 2020-07-07 21:53:41