Bootstrap 布局組件（全）

更新時(shí)間：2016年07月18日 10:28:48 作者：qq_27626333

這篇文章主要為大家詳細(xì)介紹了Bootstrap布局組件，感興趣的小伙伴們可以參考一下

Bootstrap 布局組件

1、Bootstrap字體圖標(biāo)

（1）、字體圖標(biāo)列表鏈接

http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

（2）、用法

如需使用圖標(biāo)，只需要簡(jiǎn)單地使用下面的代碼即可。請(qǐng)?jiān)趫D標(biāo)和文本之間保留適當(dāng)?shù)目臻g。沒有g(shù)lyphicon的css。

（3）、定制字體圖標(biāo)

我們已經(jīng)看到如何使用字體圖標(biāo)，接下來我們看看如何定制字體圖標(biāo)。

我們將以上面的實(shí)例開始，并通過改變字體尺寸、顏色和應(yīng)用文本陰影來進(jìn)行定制圖標(biāo)。

A、定制圖標(biāo)

<button type="button" class="btn btn-primary btn-lg">

 <span class="glyphicon glyphicon-user"></span> User

</button>

B、定制字體尺寸

通過增加或減少圖標(biāo)的字體尺寸，您可以讓圖標(biāo)看起來更大或更小。

<button type="button" class="btn btn-primary btn-lg"style="font-size: 60px">

 <span class="glyphicon glyphicon-user"></span> User

</button>

C、定制字體顏色

<button type="button" class="btn btn-primary btn-lg"style="color: rgb(212, 106, 64);">

 <span class="glyphicon glyphicon-user"></span> User

</button>

D、應(yīng)用文本陰影

<button type="button" class="btn btn-primary btn-lg"style="text-shadow: black 5px 3px 3px;">

 <span class="glyphicon glyphicon-user"></span> User

</button>

2、Bootstrap下拉菜單

（1）、下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單。這可以通過與下拉菜單（Dropdown） JavaScript 插件的互動(dòng)來實(shí)現(xiàn)。

如需使用下列菜單，只需要在 class .dropdown 內(nèi)加上下拉菜單即可。

<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="#">數(shù)據(jù)挖掘</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">
      數(shù)據(jù)通信/網(wǎng)絡(luò)
     </a>
   </li>
   <li role="presentation" class="divider"></li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
   </li>
  </ul></div>

（2）、對(duì)齊

通過向 .dropdown-menu 添加 class .pull-right 來向右對(duì)齊下拉菜單。

（3）、標(biāo)題

您可以使用 class dropdown-header 向下拉菜單的標(biāo)簽區(qū)域添加標(biāo)題。

3、Bootstrap 按鈕組

（1）、按鈕組允許多個(gè)按鈕被堆疊在同一行上。當(dāng)你想要把按鈕對(duì)齊在一起時(shí)，這就顯得非常有用。

（2）、嵌套

您可以在一個(gè)按鈕組內(nèi)嵌套另一個(gè)按鈕組，即，在一個(gè) .btn-group 內(nèi)嵌套另一個(gè) .btn-group 。當(dāng)您向讓下拉菜單與一系列按鈕組合使用時(shí)，就會(huì)用到這個(gè)。

4、Bootstrap 按鈕下拉菜單

使用 Bootstrap class 向按鈕添加下拉菜單。如需向按鈕添加下拉菜單，只需要簡(jiǎn)單地在在一個(gè) .btn-group 中放置按鈕和下拉菜單即可。您也可以使用 <span class="caret"></span> 來指示按鈕作為下拉菜單。

<div class="btn-group">

  <button type="button" class="btn btn-default dropdown-toggle"

   data-toggle="dropdown">

   默認(rèn) <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

   <li><a href="#">功能</a></li>

   <li><a href="#">另一個(gè)功能</a></li>

   <li><a href="#">其他</a></li>

   <li class="divider"></li>

   <li><a href="#">分離的鏈接</a></li>

  </ul>

</div>

（1）、分割的按鈕下拉菜單

分割的按鈕下拉菜單使用與下拉菜單按鈕大致相同的樣式，但是對(duì)下拉菜單添加了原始的功能。分割按鈕的左邊是原始的功能，右邊是顯示下拉菜單的切換。

<div class="btn-group">

  <button type="button" class="btn btn-default">默認(rèn)</button>

  <button type="button" class="btn btn-default dropdown-toggle"

   data-toggle="dropdown">

   <span class="caret"></span>

   <span class="sr-only">切換下拉菜單</span>

  </button>

  <ul class="dropdown-menu" role="menu">

   <li><a href="#">功能</a></li>

   <li><a href="#">另一個(gè)功能</a></li>

   <li><a href="#">其他</a></li>

   <li class="divider"></li>

   <li><a href="#">分離的鏈接</a></li>

  </ul>

</div>

（2）、按鈕下拉菜單的大小

您可以使用帶有各種大小按鈕的下拉菜單：.btn-large、.btn-sm 或 .btn-xs。

（3）、按鈕上拉菜單

菜單也可以往上拉伸的，只需要簡(jiǎn)單地向父 .btn-group 容器添加 .dropup 即可。

5、Bootstrap 輸入框組

輸入框組。輸入框組擴(kuò)展自表單控件。使用輸入框組，您可以很容易地向基于文本的輸入框添加作為前綴和后綴的文本或按鈕。

通過向輸入域添加前綴和后綴的內(nèi)容，您可以向用戶輸入添加公共的元素。例如，您可以添加美元符號(hào)，或者在 Twitter 用戶名前添加 @，或者應(yīng)用程序接口所需要的其他公共的元素。

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

A、把前綴或后綴元素放在一個(gè)帶有 class .input-group 的 <div> 中。

B、接著，在相同的 <div> 內(nèi)，在 class 為 .input-group-addon 的 <span> 內(nèi)放置額外的內(nèi)容。

C、把該 <span> 放置在 <input> 元素的前面或者后面。

為了保持跨瀏覽器的兼容性，請(qǐng)避免使用 <select> 元素，因?yàn)樗鼈冊(cè)?WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應(yīng)用輸入框組的 class，輸入框組是一個(gè)孤立的組件。

 <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">

  <span class="input-group-addon">.00</span>

 </div>

 </form>

（1）、輸入框組的大小

您可以通過向 .input-group 添加相對(duì)表單大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）來改變輸入框組的大小。輸入框中的內(nèi)容會(huì)自動(dòng)調(diào)整大小。

（2）、復(fù)選框和單選插件

您可以把復(fù)選框和單選插件作為輸入框組的前綴或者后綴元素

<div class="input-group">

   <span class="input-group-addon">

     <input type="checkbox">

   </span>

   <input type="text" class="form-control">

</div>

（3）、按鈕插件

您也可以把按鈕作為輸入框組的前綴或者后綴元素，這個(gè)時(shí)候您就不是添加 .input-group-addon class，您需要使用class .input-group-btn 來包裹按鈕。這是必需的，因?yàn)槟J(rèn)的瀏覽器樣式不會(huì)被重寫。

<div class="input-group">

  <span class="input-group-btn">

   <button class="btn btn-default" type="button">

    Go!

   </button>

  </span>

  <input type="text" class="form-control">

</div>

（4）、帶有下拉菜單的按鈕

在輸入框組中添加帶有下拉菜單的按鈕，只需要簡(jiǎn)單地在一個(gè) .input-group-btn class 中包裹按鈕和下拉菜單即可。

<div class="input-group">

  <div class="input-group-btn">

    <button type="button" class="btn btn-default

     dropdown-toggle" data-toggle="dropdown">

     下拉菜單

     <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

    <li><a href="#">功能</a></li>

    <li><a href="#">另一個(gè)功能</a></li>

    <li><a href="#">其他</a></li>

    <li class="divider"></li>

    <li><a href="#">分離的鏈接</a></li>

    </ul>

 </div>

 <input type="text" class="form-control">

</div>

（5）、分割的下拉菜單按鈕

在輸入框組中添加帶有下拉菜單的分割按鈕，使用與下拉菜單按鈕大致相同的樣式，但是對(duì)下拉菜單添加了主要的功能，

 <div class="input-group">

  <div class="input-group-btn">

   <button type="button" class="btn btn-default" tabindex="-1">

    下拉菜單

   </button>

   <button type="button" class="btn btn-default dropdown-toggle"   

   data-toggle="dropdown" tabindex="-1">

     <span class="caret"></span>

     <span class="sr-only">切換下拉菜單</span>

    </button>

    <ul class="dropdown-menu">

      <li><a href="#">功能</a></li>

      <li><a href="#">另一個(gè)功能</a></li>

      <li><a href="#">其他</a></li>

      <li class="divider"></li>

      <li><a href="#">分離的鏈接</a></li>

    </ul>

   </div>

   <input type="text" class="form-control">

 </div>

6、Bootstrap 導(dǎo)航元素

使用相同的標(biāo)記和基類 .nav。Bootstrap 也提供了一個(gè)用于共享標(biāo)記和狀態(tài)的幫助器類。改變修飾的 class，可以在不同的樣式間進(jìn)行切換。

(1)、表格導(dǎo)航或標(biāo)簽

創(chuàng)建一個(gè)標(biāo)簽式的導(dǎo)航菜單：

A、以一個(gè)帶有 class .nav 的無序列表開始。

B、添加 class .nav-tabs。

<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）、膠囊式的導(dǎo)航菜單

A、基本的膠囊式導(dǎo)航菜單

如果需要把標(biāo)簽改成膠囊的樣式，只需要使用 class .nav-pills 代替 .nav-tabs 即可，其他的步驟與上面相同。

<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>

B、垂直的膠囊式導(dǎo)航菜單

您可以在使用 class .nav、.nav-pills 的同時(shí)使用 class .nav-stacked，讓膠囊垂直堆疊。

<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>

（3）、兩端對(duì)齊的導(dǎo)航

您可以在屏幕寬度大于 768px 時(shí)，通過在分別使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同時(shí)使用 class .nav-justified，讓標(biāo)簽式或膠囊式導(dǎo)航菜單與父元素等寬。在更小的屏幕上，導(dǎo)航鏈接會(huì)堆疊。

<ul class="nav nav-pills nav-justified">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

</ul>

<ul class="nav nav-tabs nav-justified">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

</ul>

(4)、禁用鏈接

對(duì)每個(gè) .nav class，如果添加了 .disabled class，則會(huì)創(chuàng)建一個(gè)灰色的鏈接，同時(shí)禁用了該鏈接的 :hover 狀態(tài)，

<ul class="nav nav-pills">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li class="disabled"><a href="#">iOS（禁用鏈接）</a></li>

</ul>

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li class="disabled"><a href="#">VB.Net（禁用鏈接）</a></li>

</ul>

(5)、下拉菜單

導(dǎo)航菜單與下拉菜單使用相似的語法。默認(rèn)情況下，列表項(xiàng)的錨與一些數(shù)據(jù)屬性協(xié)同合作來觸發(fā)帶有 .dropdown-menu class 的無序列表。

A、帶有下拉菜單的標(biāo)簽

向標(biāo)簽添加下拉菜單的步驟如下：

以一個(gè)帶有 class .nav 的無序列表開始。

添加 class .nav-tabs。

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

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</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 class="divider"></li>

     <li><a href="#">分離的鏈接</a></li>

   </ul>

  </li>

  <li><a href="#">PHP</a></li>

</ul>

B、帶有下拉菜單的膠囊

步驟與創(chuàng)建帶有下拉菜單的標(biāo)簽相同，只是需要把 .nav-tabs class 改為 .nav-pills。

7、Bootstrap 導(dǎo)航欄

導(dǎo)航欄是一個(gè)很好的功能，是 Bootstrap 網(wǎng)站的一個(gè)突出特點(diǎn)。導(dǎo)航欄在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。導(dǎo)航欄在移動(dòng)設(shè)備的視圖中是折疊的，隨著可用視口寬度的增加，導(dǎo)航欄也會(huì)水平展開。在 Bootstrap 導(dǎo)航欄的核心中，導(dǎo)航欄包括了站點(diǎn)名稱和基本的導(dǎo)航定義樣式。

（1）、默認(rèn)的導(dǎo)航欄

創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的步驟如下：

A、向 <nav> 標(biāo)簽添加 class .navbar、.navbar-default。

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

C、向 <div> 元素添加一個(gè)標(biāo)題 class .navbar-header，內(nèi)部包含了帶有 class navbar-brand 的 <a> 元素。這會(huì)讓文本看起來更大一號(hào)。

D、為了向?qū)Ш綑谔砑渔溄?，只需要?jiǎn)單地添加帶有 class .nav、.navbar-nav 的無序列表即可。

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <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 class="divider"></li>

        <li><a href="#">分離的鏈接</a></li>

        <li class="divider"></li>

        <li><a href="#">另一個(gè)分離的鏈接</a></li>

      </ul>

     </li>

   </ul>

  </div>

</nav>

（2）、響應(yīng)式的導(dǎo)航欄

為了給導(dǎo)航欄添加響應(yīng)式特性，您要折疊的內(nèi)容必須包裹在帶有 classes .collapse、.navbar-collapse 的 <div> 中。折疊起來的導(dǎo)航欄實(shí)際上是一個(gè)帶有 class .navbar-toggle 及兩個(gè) data- 元素的按鈕。第一個(gè)是 data-toggle，用于告訴 JavaScript 需要對(duì)按鈕做什么，第二個(gè)data-target，指示要切換到哪一個(gè)元素。三個(gè)帶有 class .icon-bar 的 <span> 創(chuàng)建所謂的漢堡按鈕。這些會(huì)切換為 .nav-collapse <div> 中的元素。為了實(shí)現(xiàn)以上這些功能，您必須包含 Bootstrap 折疊（Collapse）插件。

<nav class="navbar navbar-default" role="navigation">

 <div class="navbar-header">

  <button type="button" class="navbar-toggle" data-toggle="collapse"

     data-target="#example-navbar-collapse">

     <span class="sr-only">切換導(dǎo)航</span>

     <span class="icon-bar"></span>

     <span class="icon-bar"></span>

     <span class="icon-bar"></span>

   </button>

   <a class="navbar-brand" href="#">W3Cschool</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 class="divider"></li>

        <li><a href="#">分離的鏈接</a></li>

        <li class="divider"></li>

        <li><a href="#">另一個(gè)分離的鏈接</a></li>

      </ul>

 </li></ul></div></nav>

（3）、導(dǎo)航欄中的表單

導(dǎo)航欄中的表單不是使用 Bootstrap 表單章節(jié)中所講到的默認(rèn)的 class，它是使用 .navbar-form class。這確保了表單適當(dāng)?shù)拇怪睂?duì)齊和在較窄的視口中折疊的行為。使用對(duì)齊方式選項(xiàng)（這將在組件對(duì)齊方式部分進(jìn)行詳細(xì)講解）來決定導(dǎo)航欄中的內(nèi)容放置在哪里。

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <form class="navbar-form navbar-left" role="search">

    <div class="form-group">

     <input type="text" class="form-control" placeholder="Search">

     </div>

     <button type="submit" class="btn btn-default">提交</button>

   </form>  

  </div>

</nav>

（4）、導(dǎo)航欄中的按鈕

您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按鈕，按鈕在導(dǎo)航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。不要在 .navbar-nav 內(nèi)的 <a> 元素上使用 .navbar-btn，因?yàn)樗皇菢?biāo)準(zhǔn)的 button class。

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <form class="navbar-form navbar-left" role="search">

     <div class="form-group">

  <input type="text" class="form-control" placeholder="Search">

 </div>

 <button type="submit" class="btn btn-default">提交按鈕</button>

 </form>  

<button type="button" class="btn btn-default navbar-btn">

     導(dǎo)航欄按鈕

   </button>

  </div>

</nav>

（5）、導(dǎo)航欄中的文本

如果需要在導(dǎo)航中包含文本字符串，請(qǐng)使用 class .navbar-text。這通常與 <p> 標(biāo)簽一起使用，確保適當(dāng)?shù)那皩?dǎo)和顏色。

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <p class="navbar-text">Signed in as Thomas</p>

  </div>

</nav>

（6）、非導(dǎo)航鏈接

如果您不想在常規(guī)的導(dǎo)航欄導(dǎo)航組件內(nèi)使用標(biāo)準(zhǔn)的鏈接，那么請(qǐng)使用 class navbar-link 來為默認(rèn)的和倒轉(zhuǎn)的導(dǎo)航欄選項(xiàng)添加適當(dāng)?shù)念伾?/p>

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <p class="navbar-text navbar-right">Signed in as

     <a href="#" class="navbar-link">Thomas</a>

   </p>

</div></div>

（7）、組件對(duì)齊方式

您可以使用實(shí)用工具 class .navbar-left 或 .navbar-right 向左或向右對(duì)齊導(dǎo)航欄中的導(dǎo)航鏈接、表單、按鈕或文本這些組件。這兩個(gè) class 都會(huì)在指定的方向上添加 CSS 浮動(dòng)。

（8）、固定到頂部

Bootstrap 導(dǎo)航欄可以動(dòng)態(tài)定位。默認(rèn)情況下，它是塊級(jí)元素，它是基于在 HTML 中放置的位置定位的。通過一些幫助器類，您可以把它放置在頁面的頂部或者底部，或者您可以讓它成為隨著頁面一起滾動(dòng)的靜態(tài)導(dǎo)航欄。如果您想要讓導(dǎo)航欄固定在頁面的頂部，請(qǐng)向 .navbar class 添class .navbar-fixed-top。下面的實(shí)例演示了這點(diǎn)：為了防止導(dǎo)航欄與頁面主體中的其他內(nèi)容的頂部相交錯(cuò)，請(qǐng)向 <body> 標(biāo)簽添加至少 50 像素的內(nèi)邊距（padding），內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置。

</nav>

（9）、固定到底部

如果您想要讓導(dǎo)航欄固定在頁面的底部，請(qǐng)向 .navbar class 添加 class .navbar-fixed-bottom。

(10)、靜態(tài)的頂部

如需創(chuàng)建能隨著頁面一起滾動(dòng)的導(dǎo)航欄，請(qǐng)?zhí)砑?.navbar-static-top class。該 class 不要求向 <body> 添加內(nèi)邊距（padding）。

</nav>

（11）、倒置的導(dǎo)航欄

為了創(chuàng)建一個(gè)帶有黑色背景白色文本的倒置的導(dǎo)航欄，只需要簡(jiǎn)單地向 .navbar class 添加 .navbar-inverse class 即可，如下面的實(shí)例所示：

為了防止導(dǎo)航欄與頁面主體中的其他內(nèi)容的頂部相交錯(cuò)，請(qǐng)向 <body> 標(biāo)簽添加至少 50 像素的內(nèi)邊距（padding），內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置。

8、Bootstrap 面包屑導(dǎo)航（Breadcrumbs）

面包屑導(dǎo)航（Breadcrumbs）是一種基于網(wǎng)站層次信息的顯示方式。以博客為例，面包屑導(dǎo)航可以顯示發(fā)布日期、類別或標(biāo)簽。它們表示當(dāng)前頁面在導(dǎo)航層次結(jié)構(gòu)內(nèi)的位置。

Bootstrap 中的面包屑導(dǎo)航（Breadcrumbs）是一個(gè)簡(jiǎn)單的帶有 .breadcrumb class 的無序列表。分隔符會(huì)通過 CSS（bootstrap.min.css）中下面所示的 class 自動(dòng)被添加：

</ol>

9、Bootstrap 分頁

（1）、分頁（Pagination），是一種無序列表，Bootstrap 像處理其他界面元素一樣處理分頁。

（2）、翻頁（Pager）

如果您想要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的分頁鏈接為用戶提供導(dǎo)航，可通過翻頁來實(shí)現(xiàn)。與分頁鏈接一樣，翻頁也是無序列表。默認(rèn)情況下，鏈接是居中顯示。下表列出了 Bootstrap 處理翻頁的 class。

10、Bootstrap 標(biāo)簽

Bootstrap 標(biāo)簽。標(biāo)簽可用于計(jì)數(shù)、提示或頁面上其他的標(biāo)記顯示。您可以使用修飾的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 來改變標(biāo)簽的外觀。

11、Bootstrap 徽章（Badges）

（1）、徽章與標(biāo)簽相似，主要的區(qū)別在于徽章的邊角更加圓滑。

徽章（Badges）主要用于突出顯示新的或未讀的項(xiàng)。如需使用徽章，只需要把 <span class="badge"> 添加到鏈接、Bootstrap 導(dǎo)航等這些元素上即可。當(dāng)沒有新的或未讀的項(xiàng)時(shí)，通過 CSS 的 :empty 選擇器，徽章會(huì)折疊起來，表示里邊沒有內(nèi)容。

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

（2）、激活導(dǎo)航狀態(tài)

您可以在激活狀態(tài)的膠囊式導(dǎo)航和列表導(dǎo)航中放置徽章。通過使用 <span class="badge"> 來激活鏈接。

<h4>膠囊式導(dǎo)航中的激活狀態(tài)</h4>

<ul class="nav nav-pills">

 <li class="active"><a href="#">首頁 <span class="badge">42</span></a></li>

  <li><a href="#">簡(jiǎn)介</a></li>

  <li><a href="#">消息 <span class="badge">3</span></a></li>

</ul>

12、Bootstrap 超大屏幕（Jumbotron）

超大屏幕（Jumbotron）。顧名思義該組件可以增加標(biāo)題的大小，并為登陸頁面內(nèi)容添加更多的外邊距（margin）。使用超大屏幕（Jumbotron）的步驟如下：

A、創(chuàng)建一個(gè)帶有 class .jumbotron. 的容器 <div>。

B、除了更大的 <h1>，字體粗細(xì) font-weight 被減為 200px。

<div class="container">

  <div class="jumbotron">

   <h1>歡迎登陸頁面！</h1>

   <p>這是一個(gè)超大屏幕（Jumbotron）的實(shí)例。</p>

   <p><a class="btn btn-primary btn-lg" role="button">

     學(xué)習(xí)更多</a>

   </p>

  </div></div>

為了獲得占用全部寬度且不帶圓角的超大屏幕，請(qǐng)?jiān)谒械?.container class 外使用 .jumbotron class，

13、Bootstrap 頁面標(biāo)題（Page Header）

頁面標(biāo)題（Page Header）是個(gè)不錯(cuò)的功能，它會(huì)在網(wǎng)頁標(biāo)題四周添加適當(dāng)?shù)拈g距。當(dāng)一個(gè)網(wǎng)頁中有多個(gè)標(biāo)題且每個(gè)標(biāo)題之間需要添加一定的間距時(shí)，頁面標(biāo)題這個(gè)功能就顯得特別有用。如需使用頁面標(biāo)題（Page Header），請(qǐng)把您的標(biāo)題放置在帶有 class .page-header 的 <div> 中：

<div class="page-header">

  <h1>頁面標(biāo)題實(shí)例

   <small>子標(biāo)題</small>

  </h1>

</div>

14、Bootstrap 縮略圖

（1）、Bootstrap 縮略圖。大多數(shù)站點(diǎn)都需要在網(wǎng)格中布局圖像、視頻、文本等。Bootstrap 通過縮略圖為此提供了一種簡(jiǎn)便的方式。使用 Bootstrap 創(chuàng)建縮略圖的步驟如下：

A、在圖像周圍添加帶有 class .thumbnail 的 <a> 標(biāo)簽。

B、這會(huì)添加四個(gè)像素的內(nèi)邊距（padding）和一個(gè)灰色的邊框。

C、當(dāng)鼠標(biāo)懸停在圖像上時(shí)，會(huì)動(dòng)畫顯示出圖像的輪廓。

<div class="col-sm-6 col-md-3">

   <a href="#" class="thumbnail">

     <img src="/wp-content/uploads/2014/06/kittens.jpg"

     alt="通用的占位符縮略圖">

   </a>

</div>

（2）、添加自定義的內(nèi)容

現(xiàn)在我們有了一個(gè)基本的縮略圖，我們可以向縮略圖添加各種 HTML 內(nèi)容，比如標(biāo)題、段落或按鈕。具體步驟如下：

A、把帶有 class .thumbnail 的 <a> 標(biāo)簽改為 <div>。

B、在該 <div> 內(nèi)，您可以添加任何您想要添加的東西。由于這是一個(gè) <div>，我們可以使用默認(rèn)的基于 span 的命名規(guī)則來調(diào)整大小。

C、如果您想要給多個(gè)圖像進(jìn)行分組，請(qǐng)把它們放置在一個(gè)無序列表中，且每個(gè)列表項(xiàng)向左浮動(dòng)。

15、Bootstrap 警告（Alerts）

警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用戶提供了一種定義消息樣式的方式。它們?yōu)榈湫偷挠脩舨僮魈峁┝松舷挛男畔⒎答?。您可以為警告框添加一個(gè)可選的關(guān)閉按鈕。為了創(chuàng)建一個(gè)內(nèi)聯(lián)的可取消的警告框，請(qǐng)使用警告（Alerts） jQuery 插件。

您可以通過創(chuàng)建一個(gè) <div>，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個(gè)基本的警告框。

<div class="alert alert-success">成功！很好地完成了提交。</div>

<div class="alert alert-danger">錯(cuò)誤！請(qǐng)進(jìn)行一些更改。</div>

（1）、可取消的警告（Dismissal Alerts）

創(chuàng)建一個(gè)可取消的警告（Dismissal Alert）步驟如下：

A、通過創(chuàng)建一個(gè) <div>，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個(gè)基本的警告框。

B、同時(shí)向上面的 <div> class 添加可選的 .alert-dismissable。

C、添加一個(gè)關(guān)閉按鈕。

<div class="alert alert-success alert-dismissable">

  <button type="button" class="close" data-dismiss="alert"

   aria-hidden="true">

   ×

  </button>

  成功！很好地完成了提交。

</div>

（2）、警告（Alerts）中的鏈接

在警告（Alerts）中創(chuàng)建鏈接的步驟如下：

B、使用 .alert-link 實(shí)體類來快速提供帶有匹配顏色的鏈接。

<a href="#" class="alert-link">成功！很好地完成了提交。</a>

</div>

16、Bootstrap 進(jìn)度條

本章將講解 Bootstrap 進(jìn)度條。在本教程中，您將看到如何使用 Bootstrap 創(chuàng)建加載、重定向或動(dòng)作狀態(tài)的進(jìn)度條。

Bootstrap 進(jìn)度條使用 CSS3 過渡和動(dòng)畫來獲得該效果。Internet Explorer 9 及之前的版本和舊版的 Firefox 不支持該特性，Opera 12 不支持動(dòng)畫。

（1）、默認(rèn)的進(jìn)度條

創(chuàng)建一個(gè)基本的進(jìn)度條的步驟如下：

A、添加一個(gè)帶有 class .progress 的 <div>。

B、接著，在上面的 <div> 內(nèi)，添加一個(gè)帶有 class .progress-bar 的空的 <div>。

C、添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進(jìn)度條在 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>

（2）、交替的進(jìn)度條

創(chuàng)建不同樣式的進(jìn)度條的步驟如下：

A、添加一個(gè)帶有 class .progress 的 <div>。

B、接著，在上面的 <div> 內(nèi)，添加一個(gè)帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。

C、添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進(jìn)度條在 60% 的位置。

<div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar"

   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

   style="width: 90%;">

   <span class="sr-only">90% 完成（成功）</span>

  </div>

</div>

（3）、條紋的進(jìn)度條

創(chuàng)建一個(gè)條紋的進(jìn)度條的步驟如下：

A、添加一個(gè)帶有 class .progress 和 .progress-striped 的 <div>。

B、接著，在上面的 <div> 內(nèi)，添加一個(gè)帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。

C、添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進(jìn)度條在 60% 的位置。

<div class="progress progress-striped">

  <div class="progress-bar progress-bar-success" role="progressbar"

   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

   style="width: 90%;">

   <span class="sr-only">90% 完成（成功）</span>

  </div>

</div>

（4）、動(dòng)畫的進(jìn)度條

創(chuàng)建一個(gè)動(dòng)畫的進(jìn)度條的步驟如下：

A、添加一個(gè)帶有 class .progress 和 .progress-striped 的 <div>。同時(shí)添加 class .active。

B、接著，在上面的 <div> 內(nèi)，添加一個(gè)帶有 class .progress-bar 的空的 <div>。

C、添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進(jìn)度條在 60% 的位置。

這將會(huì)使條紋具有從右向左的運(yùn)動(dòng)感。

<div class="progress progress-striped active">

  <div class="progress-bar progress-bar-success" role="progressbar"

   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

   style="width: 40%;">

   <span class="sr-only">40% 完成</span>

  </div>

</div>

（5）、堆疊的進(jìn)度條

您甚至可以堆疊多個(gè)進(jìn)度條。把多個(gè)進(jìn)度條放在相同的 .progress 中即可實(shí)現(xiàn)堆疊，

17、Bootstrap 多媒體對(duì)象（Media Object）

Bootstrap 中的多媒體對(duì)象（Media Object）。這些抽象的對(duì)象樣式用于創(chuàng)建各種類型的組件（比如：博客評(píng)論），我們可以在組件中使用圖文混排，圖像可以左對(duì)齊或者右對(duì)齊。媒體對(duì)象可以用更少的代碼來實(shí)現(xiàn)媒體對(duì)象與文字的混排。

媒體對(duì)象輕量標(biāo)記、易于擴(kuò)展的特性是通過向簡(jiǎn)單的標(biāo)記應(yīng)用 class 來實(shí)現(xiàn)的。你可以在 HTML 標(biāo)簽中添加以下兩種形式來設(shè)置媒體對(duì)象：

A、.media：該 class 允許將媒體對(duì)象里的多媒體（圖像、視頻、音頻）浮動(dòng)到內(nèi)容區(qū)塊的左邊或者右邊。

B、.media-list：如果你需要一個(gè)列表，各項(xiàng)內(nèi)容是無序列表的一部分，可以使用該 class。可用于評(píng)論列表與文章列表。

<div class="media">

 <a class="pull-left" href="#">

  <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"

   alt="媒體對(duì)象">

  </a>

  <div class="media-body">

   <h4 class="media-heading">媒體標(biāo)題</h4>

   這是一些示例文本。這是一些示例文本。 

  </div>

</div>

18、Bootstrap 列表組

列表組件用于以列表形式呈現(xiàn)復(fù)雜的和自定義的內(nèi)容。創(chuàng)建一個(gè)基本的列表組的步驟如下：

A、向元素 <ul> 添加 class .list-group。

B、向 <li> 添加 class .list-group-item。

<ul class="list-group">

  <li class="list-group-item">免費(fèi)域名注冊(cè)</li>

  <li class="list-group-item">免費(fèi) Window 空間托管</li>

</ul>

(1)、向列表組添加徽章

我們可以向任意的列表項(xiàng)添加徽章組件，它會(huì)自動(dòng)定位到右邊。只需要在 <li> 元素中添加 <span class="badge"> 即可。

<ul class="list-group">

  <li class="list-group-item">免費(fèi)域名注冊(cè)</li>

  <li class="list-group-item"><span class="badge">新</span>

   24*7 支持

  </li>

</ul>

（2）、向列表組添加鏈接

通過使用錨標(biāo)簽代替列表項(xiàng)，我們可以向列表組添加鏈接。我們需要使用 <div> 代替 <ul> 元素。

<a href="#" class="list-group-item">免費(fèi) Window 空間托管</a>

（3）、向列表組添加自定義內(nèi)容

我們可以向上面已添加鏈接的列表組添加任意的 HTML 內(nèi)容。

19、Bootstrap 面板（Panels）

Bootstrap 面板（Panels）。面板組件用于把 DOM 組件插入到一個(gè)盒子中。創(chuàng)建一個(gè)基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，

<div class="panel panel-default">

  <div class="panel-body">

   這是一個(gè)基本的面板

  </div>

</div>

（1）、面板標(biāo)題

我們可以通過以下兩種方式來添加面板標(biāo)題：

A、使用 .panel-heading class 可以很簡(jiǎn)單地向面板添加標(biāo)題容器。

B、使用帶有 .panel-title class 的 <h1>-<h6> 來添加預(yù)定義樣式的標(biāo)題。

<div class="panel panel-default">

  <div class="panel-heading">不帶 title 的面板標(biāo)題</div>

  <div class="panel-body">面板內(nèi)容</div>

</div>

（2）、面板腳注

我們可以在面板中添加腳注，只需要把按鈕或者副文本放在帶有 class .panel-footer 的 <div> 中即可。

<div class="panel panel-default">

  <div class="panel-body">這是一個(gè)基本的面板</div>

  <div class="panel-footer">面板腳注</div>

</div>

（3）、帶語境色彩的面板

使用語境狀態(tài)類 panel-primary、panel-success、panel-info、panel-warning、panel-danger，來設(shè)置帶語境色彩的面板。

<div class="panel panel-primary">

  <div class="panel-heading">

   <h3 class="panel-title">面板標(biāo)題</h3>

  </div>

  <div class="panel-body"> 這是一個(gè)基本的面板</div>

</div>

（4）、帶表格的面板

為了在面板中創(chuàng)建一個(gè)無邊框的表格，我們可以在面板中使用 class .table。假設(shè)有個(gè) <div> 包含 .panel-body，我們可以向表格的頂部添加額外的邊框用來分隔。如果沒有包含 .panel-body 的 <div>，則組件會(huì)無中斷地從面板頭部移動(dòng)到表格。

<div class="panel panel-default">

  <div class="panel-heading">

   <h3 class="panel-title">面板標(biāo)題</h3>

  </div>

  <div class="panel-body">這是一個(gè)基本的面板 </div>

  <table class="table">

   <th>產(chǎn)品</th><th>價(jià)格 </th>

   <tr><td>產(chǎn)品 A</td><td>200</td></tr>

   <tr><td>產(chǎn)品 B</td><td>400</td></tr>

  </table>

</div>

（5）、帶列表組的面板

我們可以在任何面板中包含列表組，通過在 <div> 元素中添加 .panel 和 .panel-default 類來創(chuàng)建面板，并在面板中添加列表組。

<div class="panel panel-default">

  <div class="panel-heading">面板標(biāo)題</div>

   <div class="panel-body">

     <p>這是一個(gè)基本的面板內(nèi)容。</p>

  </div>

  <ul class="list-group">

   <li class="list-group-item">免費(fèi)域名注冊(cè)</li>

   <li class="list-group-item">每年更新成本</li>

  </ul>

</div>

20、Bootstrap Well

Well 是一種會(huì)引起內(nèi)容凹陷顯示或插圖效果的容器 <div>。為了創(chuàng)建 Well，只需要簡(jiǎn)單地把內(nèi)容放在帶有 class .well 的 <div> 中即可。

（1）、尺寸大小

您可以使用可選類 well-lg 或 well-sm 來改變 Well 的尺寸大小。這兩個(gè)類是與 .well 類結(jié)合使用的。這兩個(gè)類會(huì)影響內(nèi)邊距（padding），根據(jù)使用的類，Well 會(huì)顯示得更大或者更小。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: