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>