bootstrap——元件（九、其他）

1、路徑導航

在一個帶有層次的導航結構中标明目前頁面的位置。

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>           

2、span

1）标簽

.label

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>           

2）徽章

.badge

給連結、導航等元素嵌套徽章，可以很醒目的展示新的或未讀的資訊條目。

<span class="badge">42</span>           

<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
</button>           

3、縮略圖

通過縮略圖元件擴充 Bootstrap 的 栅格系統，可以很容易地展示栅格樣式的圖像、視訊、文本等内容。

1）預設樣式的執行個體

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="../images/a.jpg" />
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="../images/a.jpg" />
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="../images/a.jpg" />
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="../images/a.jpg" />
            </a>
        </div>
    </div>
</div>           

2）自定義内容

使用帶有.thumbnail的div

在div裡面任意布局内容

<div class="col-xs-3">
    <div class="thumbnail">
        <img src="../images/a.jpg" />
        <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
    </div>
</div>           

4、警告框

警告框元件通過提供一些靈活的預定義消息，為常見的使用者動作提供回報消息。

1）普通警告框

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

2）可關閉的警告框

.alert-dismissable

給警告框的div添加.alert-dismissable

再添加一個關閉按鈕

關閉按鈕如下：

就是給button添加.close和data-dismiss=”alert”

<button type="button" class="close" data-dismiss="alert">...</button>           

<div class="alert alert-info alert-dismissable"> 
     Info!
     <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
 </div>           

3）警告框中的連結

.alert-link

隻需要給a添加.alert-link就可以了

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>           

5、清單組

使用ul，以來.list-group和.list-group-item

1）清單組基本應用

<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
</ul>           

2）帶徽章的清單組

給清單組加入徽章元件，它會自動被放在右邊。

<ul class="list-group">
    <li class="list-group-item">
        Cras justo odio
        <span class="badge">14</span>
    </li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
</ul>           

3）連結清單組

div替換ul，a替換li。實作連結清單組

.active表示目前選項被選中

.disabled表示不能不選擇

<div class="list-group">
    <a href="#" class="list-group-item active">Cras justo odio</a>
    <a href="#" class="list-group-item disabled">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>           

4）情境類

.list-group-item-success

.list-group-item-info

.list-group-item-warning

.list-group-item-danger

5）定制内容

清單組中的每個元素都可以是任何 HTML 内容，甚至是像下面的帶連結的清單組。

每一項裡面可以包含.list-group-item-heading和.list-group-item-text

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>           

6、面版

雖然不總是必須，但是某些時候你可能需要将某些 DOM 内容放到一個盒子裡。對于這種情況，可以試試面闆元件。

1）面闆基本用法

使用一個div包裹，給這個div添加.panel

一個panel裡面可以有三個div，.panel-heading和.panel-body和.panel-footer

<div class="panel panel-default">
    <div class="panel-heading">
        <h5>panel title</h5>
    </div>
    <div class="panel-body">
        <p>panel body</p>
    </div>
    <div class="panel-footer">
        <p>panel footer</p>
    </div>
</div>           

2）情境效果

可以給帶.panel的控制台添加一下類

.panel-primary

.panel-success

.panel-info

.panel-warning

.panel-danger

3）帶表格的面版

table放在.panel-body後面，需要添加.table，這樣會在table上面添加一個橫線，實作分隔

<div class="panel panel-default">
    <div class="panel-heading">
        <h5>panel title</h5>
    </div>
    <div class="panel-body">
        <p>panel body</p>
    </div>
    <table class="table">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <div class="panel-footer">
        <p>panel footer</p>
    </div>
</div>           

4）帶清單組的面版

<div class="panel panel-default">
    <div class="panel-heading">
        <h5>panel title</h5>
    </div>
    <div class="panel-body">
        <p>panel body</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
    </ul>
    <div class="panel-footer">
        <p>panel footer</p>
    </div>
</div>           

7、well

把 Well 用在元素上，能有嵌入（inset）的的簡單效果。

<div class="well">...</div>
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>