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

默认分页

.pagination

<ul class="pagination">
    <li><a href="#">«a>li>
    <li><a href="#">1a>li>
    <li><a href="#">2a>li>
    <li><a href="#">3a>li>
    <li><a href="#">»a>li>
ul>

分页状态

.disabled
.active

分页大小

• pagination-lg
• pagination-sm

翻页

.pager

<ul class="pager">
    <li><a href="#">Previousa>li>
    <li><a href="#">Nexta>li>
ul>

左右对齐的翻页

.previous .next

<ul class="pager">
    <li class="previous"><a href="#">← Oldera>li>
    <li class="next"><a href="#">Newer →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">50span>a>

<h4>胶囊式导航中的激活状态h4>
<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首页
            <span class="badge">42span>
        a>
    li>
    <li>
        <a href="#">简介a>
    li>
    <li>
        <a href="#">消息
            <span class="badge">3span>
        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">42span>首页a>
        li>
    <li>
        <a href="#">简介a>
    li>
    <li>
        <a href="#">
            <span class="badge pull-right">3span>消息
        a>
    li>
ul>

缩略图

在图像周围添加带有 class .thumbnail 的 标签。
这会添加四个像素的内边距（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>