一、字體圖標(biāo)

注意：想要使用字體圖標(biāo)蟹地，我們之前引用js和css所在文件夾一定要有fonts組件

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

想要使用字體圖標(biāo)积暖，要單獨(dú)創(chuàng)建一個(gè)span標(biāo)簽作為作用域，寫類名的時(shí)候怪与，要先寫glyphicon再寫圖標(biāo)名

二夺刑、下拉菜單

1.基本用法

寫一個(gè).dropdown容器，里面放入觸發(fā)器和下拉菜單

    <div class="dropdown">
        <button class="btn btn-default" data-toggle="dropdown" >  
             觸發(fā)器
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" >
            <li><a href="#">子菜單1</a></li>
            <li><a href="#">子菜單2</a></li>
            <li><a href="#">子菜單3</a></li>
        </ul>
    </div>

2.彈出方向

通過(guò)為下拉菜單的父元素設(shè)置 <b>.dropup</b> 類，可以讓菜單向上彈出（默認(rèn)是向下彈出的）遍愿。

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

3.標(biāo)題

在下拉菜單中存淫，可以為某一個(gè)<b>li</b>標(biāo)簽添加<b>.dropdown-header</b>設(shè)置成標(biāo)題形式

    <ul class="dropdown-menu" >
             ...
        <li class="dropdown-header">標(biāo)題</li>
             ...
    </ul>

4.分割線

在下拉菜單中，可以為某一個(gè)<b>li</b>標(biāo)簽添加<b>divider</b>設(shè)置成分割線樣式

    <ul class="dropdown-menu" >
             ...
        <li  class="divider"></li>
             ...
    </ul>
     

5.不可用菜單（禁用）

為下拉菜單中的 <b>li</b> 元素添加 <b>.disabled</b> 類沼填，從而禁用相應(yīng)的菜單項(xiàng)纫雁。

    <ul class="dropdown-menu" >
       ...
        <li class="disabled"><a href="#">此菜單不可用</a></li>
      ....
    </ul>

三、按鈕組

通過(guò)按鈕組容器把一組按鈕放在同一行里倾哺。與之前所學(xué)的<b>按鈕</b>插件配合使用

1.基本用法

將類名為<b>.btn</b>的按鈕放到按鈕組<b>.btn-group</b>中

    <div class="btn-group">
      <button type="button" class="btn btn-default">左邊</button>
      <button type="button" class="btn btn-default">中間</button>
      <button type="button" class="btn btn-default">右邊</button>
    </div>

2.按鈕工具欄

把一組<b>.btn-group</b>組合進(jìn)一個(gè)<b>.btn-toolbar</b>中就可以做成更復(fù)雜的組件轧邪。

    <div class="btn-toolbar" >
      <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
      </div>
      <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>

3.垂直排列

讓一組按鈕垂直堆疊排列顯示而不是水平排列。

    <div class="btn-group-vertical" >
      ...
    </div>

4.嵌套

想要把下拉菜單混合到一系列按鈕中羞海，只須分兩步：

• 把下拉菜單直接復(fù)制粘貼到按鈕組<b>.btn-group</b>中
• 將下拉菜單的<b>.dropdown</b>改為<b>.btn-group</b>

    <div class="btn-group" >
        <button class="btn btn-default">1</button>
        <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>

如果在下拉菜單外面沒(méi)有包裹<b>.btn-group</b>,下拉菜單將會(huì)錯(cuò)位

5.分裂按鈕下拉菜單

我們把下拉菜單放到按鈕組中忌愚，一個(gè)重要的原因就是可以做出分裂式的下拉菜單，只要將上面的稍作修改即可

四却邓、導(dǎo)航

bootstrap 中的導(dǎo)航組件都依賴同一個(gè)<b>.nav</b> 類

    <ul class="nav">
          <li><a href="#">主頁(yè)</a></li>
          <li><a href="#">新聞</a></li>
          <li><a href="#">關(guān)于</a></li>
    </ul>

1.標(biāo)簽頁(yè)(選項(xiàng)卡標(biāo)題)

注意 <b>.nav-tabs</b> 類依賴 <b>.nav</b> 基類硕糊。

    <ul class="nav nav-tabs">
      <li class="active"><a href="#">主頁(yè)</a></li>
      <li><a href="#">新聞</a></li>
      <li><a href="#">關(guān)于</a></li>
    </ul>

2.膠囊式標(biāo)簽頁(yè)

HTML 標(biāo)記相同，但使用 .nav-pills 類：

    <ul class="nav nav-pills">
      ...
    </ul>

3.禁止

對(duì)任何導(dǎo)航組件（標(biāo)簽頁(yè)腊徙、膠囊式標(biāo)簽頁(yè)）简十，都可以添加 .disabled 類，從而實(shí)現(xiàn)鏈接為灰色且沒(méi)有鼠標(biāo)懸停效果撬腾。

    <ul class="nav nav-pills">
      ...
      <li class="disabled"><a href="#">新聞</a></li>
      ...
    </ul>

4.導(dǎo)航下拉菜單

    <ul class="nav nav-tabs">
      ...
        <li class="dropdown">
            <a data-toggle="dropdown" href="#">
              觸發(fā)器 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
      ...
    </ul>

五螟蝙、導(dǎo)航條

導(dǎo)航外面加一個(gè)<b>.navbar</b>

    <nav class="navbar navbar-default">
        <div class="container">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">菜單</a></li>
                <li><a href="#">菜單</a></li>
            </ul>
        </div>
    </nav>

1.品牌標(biāo)志（標(biāo)題-logo）

在導(dǎo)航條里面的有頭部信息，頭部信息里面有專門的<b>brand</b>品牌標(biāo)志

    <div class="navbar-header">
        <a class="navbar-brand" href="#">標(biāo)題</a>
    </div>

2.品牌圖標(biāo)

將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方替換為 <img> 元素即可展示自己的品牌圖標(biāo)民傻。由于 .navbar-brand 已經(jīng)被設(shè)置了內(nèi)補(bǔ)（padding）和高度（height）

       ...
      <a class="navbar-brand" href="#">
        ![](...)
      </a>
       ...

3.固定在頭部

添加 .navbar-fixed-top 類可以讓導(dǎo)航條固定在頂部

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        ...
      </div>
    </nav>

4.固定在底部

添加 .navbar-fixed-bottom 類可以讓導(dǎo)航條固定在底部

    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="container">
        ...
      </div>
    </nav>

5.靜止在頂部

通過(guò)添加 .navbar-static-top 類即可創(chuàng)建一個(gè)與頁(yè)面等寬度的導(dǎo)航條胰默，它會(huì)隨著頁(yè)面向下滾動(dòng)而消失

    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        ...
      </div>
    </nav>

5.反色的導(dǎo)航條

過(guò)添加 .navbar-inverse 類可以改變導(dǎo)航條的外觀

    <nav class="navbar navbar-inverse">
      ...
    </nav>

6.響應(yīng)式導(dǎo)航條

要實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航條，需要把導(dǎo)航條包含在.navbar-collapse和.collapse中漓踢，并添加一個(gè)觸發(fā)按鈕.navbar-toggle .collasped,并加上data-toggle屬性綁定響應(yīng)式功能和data-target屬性綁定下面的菜單

<div class="navbar navbar-default">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">按鈕</button>
        <a href="" class="navbar-brand">標(biāo)題</a>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="">菜單</a></li>
          <li><a href="">菜單</a></li>
          <li><a href="">菜單</a></li>
        </ul>
      </div>
</div>
</div>

六牵署、路徑導(dǎo)航(面包屑)

在一個(gè)帶有層次的導(dǎo)航結(jié)構(gòu)中標(biāo)明當(dāng)前頁(yè)面的位置。

    <ol class="breadcrumb">
      <li><a href="#">主頁(yè)</a></li>
      <li><a href="#">產(chǎn)品</a></li>
      <li class="active">新聞</li>
    </ol>

七喧半、分頁(yè)

為您的網(wǎng)站或應(yīng)用提供帶有展示頁(yè)碼的分頁(yè)組件奴迅，或者可以使用簡(jiǎn)單的翻頁(yè)組件。

1.默認(rèn)分頁(yè)

    <nav>
      <ul class="pagination">
        <li>
            <a href="#">
                <span >?</span>
            </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="#">
                <span>?</span>
            </a>
        </li>
      </ul>
    </nav>

2.禁用和激活狀態(tài)

鏈接在不同情況下可以定制挺据。你可以給不能點(diǎn)擊的鏈接添加 .disabled 類取具、給當(dāng)前頁(yè)添加 .active 類。

    <nav>
      <ul class="pagination">
        ...
          <li class="disabled"><a href="#" >1</a></li>
          <li class="active"><a href="#">2 </a></li>
        ...
      </ul>
  </nav>

3.翻頁(yè)

用簡(jiǎn)單的標(biāo)記和樣式吴菠，就能做個(gè)上一頁(yè)和下一頁(yè)的簡(jiǎn)單翻頁(yè)者填。

    <nav>
      <ul class="pager">
        <li><a href="#">上一頁(yè)</a></li>
        <li><a href="#">下一頁(yè)</a></li>
      </ul>
    </nav>

4.翻頁(yè)按鈕對(duì)齊

把鏈接向兩端對(duì)齊

    <nav>
      <ul class="pager">
        <li class="previous"><a href="#"><span>←</span>上一頁(yè)</a></li>
        <li class="next"><a href="#">下一頁(yè) <span>→</span></a></li>
      </ul>
    </nav>

八、徽章

給鏈接做葵、導(dǎo)航等元素嵌套<b>.badge></b> 元素占哟，可以很醒目的展示新的或未讀的信息條目。

    <a href="#">
          按鈕
          <span class="badge">42</span>
    </a>

    <button class="btn btn-primary">
          菜單
          <span class="badge">4</span>
    </button>

九、縮略圖

通過(guò)Bootstrap的<b>柵格系統(tǒng)</b>榨乎，可以很容易地展示柵格樣式的圖像怎燥、視頻、文本等內(nèi)容蜜暑。

1.基礎(chǔ)寫法

給包括的內(nèi)容加一個(gè)包裹標(biāo)簽铐姚，類名為：<b>.thumbnail</b>,周邊增加間距。

  <div class="row">
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
        ![](...)
      </a>
    </div>
    ...
  </div>

2.自定義寫法

可以把任何類型的 HTML 內(nèi)容肛捍，例如標(biāo)題隐绵、段落或按鈕，加入縮略圖組件內(nèi)拙毫。

    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          ![](...)
          <div class="caption">
              <h3>標(biāo)題</h3>
            <p>
              文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容
            </p>
            <p>
              <a href="#" class="btn btn-primary" >按鈕1</a>
              <a href="#" class="btn btn-default" >按鈕2</a>
            </p>
          </div>164312322
        </div>
      </div>
    </div>

十依许、警告框

將任意文本和一個(gè)可選的關(guān)閉按鈕組合在一起就能組成一個(gè)警告框，<b>.alert </b>類是必須要設(shè)置的缀蹄，另外bootstrap還提供了有特殊意義的4個(gè)類

1.警告框的四種樣式

    <div class="alert alert-success" >...</div>
    <div class="alert alert-info" >...</div>
    <div class="alert alert-warning" >...</div>
    <div class="alert alert-danger" >...</div>

2.可關(guān)閉的警告框

為警告框添加一個(gè)可選的 <b>.alert-dismissible </b>類和一個(gè)關(guān)閉按鈕峭跳。

    <div class="alert alert-warning alert-dismissible" >
        <button class="close" data-dismiss="alert">
            <span>×</span>
        </button>

        <strong>Warning!</strong>
        Better check yourself, you're not looking too good.
    </div>

3.警告框中的連接

用 <b>.alert-link</b> 工具類，可以為鏈接設(shè)置與當(dāng)前警告框相符的顏色缺前。

    <div class="alert alert-success" >
        <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-info" >
        <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-warning" >
        <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-danger" >
        <a href="#" class="alert-link">...</a>
    </div>

十一蛀醉、進(jìn)度條

1.基本實(shí)例

由父元素和子元素兩部分組成

<div class="progress">
  <div class="progress-bar" style="width: 60%;">
  </div>
</div>

2.帶有提示標(biāo)簽的進(jìn)度條

在子元素中寫上內(nèi)容即可

    <div class="progress">
      <div class="progress-bar" style="width: 60%;">
        60%
      </div>
    </div>

當(dāng)進(jìn)度條非常小的情況下，很容易將文本擠走衅码，所以拯刁，可以給進(jìn)度條設(shè)置<b>min-width</b>屬性

    <div class="progress">
      <div class="progress-bar"  style="min-width: 2em;">
        0%
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar"  style="min-width: 2em; width: 2%;">
        2%
      </div>
    </div>

3.設(shè)置顏色

滾動(dòng)條也可相應(yīng)的添加四種顏色

<div class="progress">
  <div class="progress-bar progress-bar-success"  style="width: 40%">
  </div>
</div>

4.條紋效果

通過(guò)漸變可以為進(jìn)度條創(chuàng)建條紋效果，IE9 及更低版本不支持

    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped"  style="width: 40%">
      </div>
    </div>

5.動(dòng)畫效果

為 .progress-bar-striped 添加 .active 類肆良，使其呈現(xiàn)出由右向左運(yùn)動(dòng)的動(dòng)畫效果筛璧。IE9 及更低版本的瀏覽器不支持逸绎。

    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped active"  style="width: 45%">
      </div>
    </div>

6.堆疊效果

把多個(gè)進(jìn)度條放入同一個(gè) .progress 中惹恃，使它們呈現(xiàn)堆疊的效果。

  <div class="progress">
      <div class="progress-bar progress-bar-success" style="width: 35%">
        
      </div>
      <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
      </div>
      <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
  </div>

十二棺牧、列表

1.基本

    <ul class="list-group">
        <li class="list-group-item">蘋果</li>
        <li class="list-group-item">西瓜</li>
        <li class="list-group-item">草莓</li>
        <li class="list-group-item">桃子</li>
        <li class="list-group-item">柚子</li>
    </ul>

2.徽章

如果是在列表里面放入徽章巫糙，則會(huì)自動(dòng)放到右邊

  <ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        水果
    </li>
  </ul>

十三、面板

1.基本

默認(rèn)的 <b>.panel</b> 組件所做的只是設(shè)置基本的邊框（border）和內(nèi)補(bǔ)（padding）來(lái)包含內(nèi)容颊乘。

里面內(nèi)容需要包括在<b>.panel-body</b>里面参淹。

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

2. 標(biāo)題

標(biāo)題需要包換在<b>.panel-heading</b>類的標(biāo)簽內(nèi)。

    <div class="panel panel-default">
        <div class="panel-heading">
          標(biāo)題內(nèi)容
        </div>
        <div class="panel-body">
          面板內(nèi)容
        </div>
    </div>

3.腳注

次要的文本放入 <b>.panel-footer</b> 容器內(nèi)乏悄。無(wú)法從情景顏色中繼承顏色

    <div class="panel panel-default">
        ...
        <div class="panel-footer">腳注（底部）</div>
    </div>

4.情景顏色

    <div class="panel panel-primary">...</div>
    <div class="panel panel-success">...</div>
    <div class="panel panel-info">...</div>
    <div class="panel panel-warning">...</div>
    <div class="panel panel-danger">...</div>