Bootstrap——分页，翻页，标签，缩略图

默认分页

.pagination

<ul class="pagination">    <li><a href="#">&laquo;</a></li>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">&raquo;</a></li></ul>

分页状态

.disabled
.active

分页大小

• pagination-lg
• pagination-sm

翻页

.pager

<ul class="pager">    <li><a href="#">Previous</a></li>    <li><a href="#">Next</a></li></ul>

左右对齐的翻页

.previous .next

<ul class="pager">    <li class="previous"><a href="#">&larr; Older</a></li>    <li class="next"><a href="#">Newer &rarr;</a></li></ul>

标签

<span class="label label-default">默认标签</span><span class="label label-primary">主要标签</span><span class="label label-success">成功标签</span><span class="label label-info">信息标签</span><span class="label label-warning">警告标签</span><span class="label label-danger">危险标签</span>

徽章

比标签更加圆滑一点

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

<h4>胶囊式导航中的激活状态</h4><ul class="nav nav-pills">    <li class="active">        <a href="#">首页            <span class="badge">42</span>        </a>    </li>    <li>        <a href="#">简介</a>    </li>    <li>        <a href="#">消息            <span class="badge">3</span>        </a>    </li></ul><br><h4>列表导航中的激活状态</h4><ul class="nav nav-pills nav-stacked" style="max-width: 260px;">    <li class="active">        <a href="#">            <span class="badge pull-right">42</span>首页</a>        </li>    <li>        <a href="#">简介</a>    </li>    <li>        <a href="#">            <span class="badge pull-right">3</span>消息        </a>    </li></ul>

缩略图

在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。、

<div class="row">    <div class="col-sm-6 col-md-3">         <div class="thumbnail">            <img src="/wp-content/uploads/2014/06/kittens.jpg"              alt="通用的占位符缩略图">            <div class="caption">                <h3>缩略图标签</h3>                <p>一些示例文本。一些示例文本。</p>                <p>                    <a href="#" class="btn btn-primary" role="button">                        按钮                    </a>                     <a href="#" class="btn btn-default" role="button">                        按钮                    </a>                </p>            </div>         </div>    </div>    <div class="col-sm-6 col-md-3">        <div class="thumbnail">            <img src="/wp-content/uploads/2014/06/kittens.jpg"             alt="通用的占位符缩略图">            <div class="caption">                <h3>缩略图标签</h3>                <p>一些示例文本。一些示例文本。</p>                <p>                    <a href="#" class="btn btn-primary" role="button">                        按钮                    </a>                     <a href="#" class="btn btn-default" role="button">                        按钮                    </a>                </p>            </div>        </div>    </div>    <div class="col-sm-6 col-md-3">        <div class="thumbnail">            <img src="/wp-content/uploads/2014/06/kittens.jpg"             alt="通用的占位符缩略图">            <div class="caption">                <h3>缩略图标签</h3>                <p>一些示例文本。一些示例文本。</p>                <p>                    <a href="#" class="btn btn-primary" role="button">                        按钮                    </a>                     <a href="#" class="btn btn-default" role="button">                        按钮                    </a>                </p>            </div>        </div>    </div>    <div class="col-sm-6 col-md-3">        <div class="thumbnail">            <img src="/wp-content/uploads/2014/06/kittens.jpg"             alt="通用的占位符缩略图">            <div class="caption">                <h3>缩略图标签</h3>                <p>一些示例文本。一些示例文本。</p>                <p>                    <a href="#" class="btn btn-primary" role="button">                        按钮                    </a>                     <a href="#" class="btn btn-default" role="button">                        按钮                    </a>                </p>            </div>        </div>    </div></div>