路径、分页、标签和徽章组件

路径组件
路径组件也叫做面包屑导航。
面包屑导航

<ol class="breadcrumb">    <li><a href="#">首页      </a></li>     <li><a href="#">产品列 表</a></li>    <li class="active">韩版 2015 年羊绒毛衣</li> </ol>

分页组件
分页组件可以提供带有展示页面的功能。
默认分页

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

首选项和禁用

<li class="active"><a href="#">1</a></li><li class="disabled"><a href="#">2</a></li>

设置尺寸，四种 lg、默认、sm 和

果

<ul class="pager">    <li><a href="#">上一页</a></li>     <li><a href="#">下一页</a></li></ul>

对齐翻页链接

<ul class="pager">    <li class="previous"><a href="#">上一页</a></li>     <li class="next"><a href="#">下一页</a></li></ul>

翻页项禁用

上一页

标签
在文本后面带上标签

标签 new

不同色调的标签

标签 new

标签 new

标签 new

标签 new

标签 new

徽章
未读信息数量徽章

信息 10
按钮中使用徽章

提交 3

激活状态自动适配色调

<ul class="nav nav-pills">    <li class="active">        <a href="#">首页 <span class="badge">2</span></a>    </li>    <li><a href="#">资讯</a></li> </ul>

巨幕组件巨幕组件主要是展示网站的关键区域。在固定的范围内，有圆角

<div class="container">    <div class="jumbotron">         <h2>网站标题</h2>         <p>这是一个学习性的网站！</p>        <p><a href="#" class="btn btn-default">更多内容</a></p>     </div></div>100%全屏，没有圆角<div class="jumbotron">     <div class="container">        <h2>网站标题</h2> <p>这是一个学习性的网站！</p>        <p><a href="#" class="btn btn-default">更多内容</a></p>     </div></div>

页头组件增加一些空间

<div class="page-header">    <h1>大标题         <small>小标题</small>    </h1> </div>

缩略图组件缩略图配合响应式

<div class="container">    <div class="row">        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">            <img src="img/pic.png" alt=""> </div>        </div>        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">            <img src="img/pic.png" alt=""> </div>        </div>        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">            <img src="img/pic.png" alt=""> </div>        </div>        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">            <img src="img/pic.png" alt=""> </div>        </div>    </div></div>

自定义内容

<div class="container">    <div class="row">    <div class="col-xs-6 col-md-3 col-sm-4">         <div class="thumbnail">        <img src="img/pic.png" alt="">             <div class="caption">            <h3>图文并茂</h3>            <p>这是一个图片结合文字的缩略图</p>            <p>                <a href="#" class="btn btn-default">进入</a>            </p>            </div>        </div>    </div>    <div class="col-xs-6 col-md-3 col-sm-4">         <div class="thumbnail">            <img src="img/pic.png" alt="">             <div class="caption">                <h3>图文并茂</h3>                 <p>这是一个图片结合文字的缩略图</p>                 <p>                    <a href="#" class="btn btn-default">进入</a>                </p>            </div>        </div>    </div><div class="col-xs-6 col-md-3 col-sm-4">    <div class="thumbnail">        <img src="img/pic.png" alt="">        <div class="caption">             <h3>图文并茂</h3>             <p>这是一个图片结合文字的缩略图</p>            <p>                <a href="#" class="btn btn-default">进入</a>            </p>        </div>    </div></div><div class="col-xs-6 col-md-3 col-sm-4">    <div class="thumbnail">        <img src="img/pic.png" alt="">            <div class="caption">                <h3>图文并茂</h3>                 <p>这是一个图片结合文字的缩略图</p>                 <p><a href="#" class="btn btn-default">进入</a>                </p>            </div>        </div>    </div></div></div>

警告框组件警告框组件是一组预定义消息。基本警告框

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

带关闭的警告框

<div class="alert alert-success"> Bootstrap    <button type="button" class="close" data-dismiss="alert">         <span>&times;</span>    </button></div>

自动适配的超链接

<div class="alert alert-success">    Bootstrap，请到官网     <a href="#" class="alert-link">下载</a> </div>