分页
为您的网站或应用提供带有展示页码的分页组件，
或者可以使用简单的翻页组件。
默认分页
受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。
组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。
效果如下:
代码如下:
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Labelling the pagination component
The pagination component should be wrapped in a <nav> element
to identify it as a navigation section to screen readers and other assistive technologies.
In addition, as a page is likely to have more than one such navigation section already
(such as the primary navigation in the header, or a sidebar navigation),
it is advisable to provide a descriptive aria-label for the <nav> which reflects its purpose.
For example, if the pagination component is used to navigate between a set of search results,
an appropriate label could be aria-label="Search results pages".
禁用和激活状态
链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。
效果如下:
代码如下:
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li>
<li class="active"> <a href="#">1 <span class="sr-only">(current)</span> </a> </li>
...
</ul>
</nav>我们建议将 active 或 disabled 状态的链接（即 <a> 标签）替换为 <span> 标签，
或者在向前/向后的箭头处省略<a> 标签，这样就可以让其保持需要的样式而不能被点击。
<nav aria-label="..."> <ul class="pagination"><li class="disabled"> <span> <span aria-hidden="true">«</span> </span> </li><li class="active"> <span>1<span class="sr-only">(current)</span</span></li> ... </ul> </nav>
尺寸
想要更小或更大的分页？.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
效果如下:
代码如下:
<nav aria-label="..."> <ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."> <ul class="pagination">...</ul></nav>
<nav aria-label="..."> <ul class="pagination pagination-sm">...</ul></nav>翻页
用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。
默认实例
在默认的翻页中，链接居中对齐。
效果如下:
代码如下:
<nav aria-label="...">
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul></nav>
对齐链接
你还可以把链接向两端对齐：
效果如下:
代码如下:
<nav aria-label="...">
<ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">←</span>Older</a></li><li class="next"><a href="#">Newer<span aria-hidden="true">→</span></a></li> </ul></nav>
可选的禁用状态
.disabled 类也可用于翻页中的链接。
效果如下:
代码如下:
<nav aria-label="...">
<ul class="pager"> <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span>Older</a></li><li class="next"><a href="#">Newer<span aria-hidden="true">→</span></a></li> </ul> </nav>
标签
实例
效果如下:
代码如下:
<h3>
Example heading
<span class="label label-default">New</span>
</h3>
可用的变体
用下面的任何一个类即可改变标签的外观。
效果如下:
代码如下:
<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>
如果标签数量很多怎么办？
如果你有大量的设置为 inline 属性的标签全部放在一个较窄的容器元素内，
在页面上展示这些标签就会出现问题，每个标签就会有自己的一个 inline-block 元素（就像图标一样）。
解决的办法是为每个标签都设置为 display: inline-block; 属性。
关于这个问题以及实例，请参考 #13219 。
徽章
给链接、导航等元素嵌套 <span class="badge"> 元素，
可以很醒目的展示新的或未读的信息条目。
效果如下:
代码如下:
<a href="#">
Inbox
<span class="badge">42</span>
</a>
<button class="btn btn-primary" type="button"> Messages<span class="badge">4</span> </button>
Self collapsing
如果没有新的或未读的信息条目，也就是说不包含任何内容，
徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现) 。
跨浏览器兼容性
徽章组件在 Internet Explorer 8 浏览器中不会自动消失，
因为 IE8 不支持 :empty 选择符。
适配导航元素的激活状态
Bootstrap 提供了内置的样式，
让胶囊式导航内 处于激活状态的元素 所包含的徽章 展示相匹配的样式。
效果如下:
代码如下:
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"> <a href="#"> Home <span class="badge">42</span> </a> </li>
<li role="presentation"> <a href="#">Profile</a> </li>
<li role="presentation"> <a href="#"> Messages <span class="badge">3</span> </a> </li>
</ul>巨幕
这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。
效果如下:
代码如下:
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p> <a class="btn btn-primary btn-lg" href="#" role="button"> Learn more </a> </p>
</div>如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，
请把此组件放在所有 .container 元素的外面，
并在组件内部添加一个 .container 元素。
<div class="jumbotron">
<div class="container">
...
</div>
</div>页头
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。
它支持 h1 标签内内嵌 small元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。
效果如下:
代码如下:
<div class="page-header">
<h1>Example page header<small>Subtext for header</small></h1> </div>
缩略图
通过缩略图组件扩展 Bootstrap 的 栅格系统，
可以很容易地展示栅格样式的图像、视频、文本等内容。
如果你想实现一个类似 Pinterest 的瀑布流页面效果（不同高度和/宽度的缩略图顺序排列）的话，
那么,你必须使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore。
(强烈推荐) Salvattore官网: https://salvattore.js.org/
Isotope官网: https://isotope.metafizzy.co/
https://github.com/metafizzy/isotope
Masonry官网: https://masonry.desandro.com/
https://github.com/desandro/masonry
默认样式的实例
Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。
效果如下:
代码如下:
在 md中等屏幕 >=992 , 一行排列4个图片,每个图片占3格
在 xs超小屏幕 <768 , 一行排列2个图片,每个图片占6格
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>自定义内容
添加一点点额外的标签，就可以把任何类型的 HTML 内容，
例如标题、段落或按钮，加入缩略图组件内。
效果如下:
代码如下:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</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>
</div>警告框
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。
实例
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，
另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。
没有默认类
警告框没有默认类，只有基类和修饰类。
默认的灰色警告框并没有多少意义。
所以您要使用一种有意义的警告类。
目前提供了成功、消息、警告或危险。
效果如下:
代码如下:
<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>可关闭的警告框
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。
依赖警告框 JavaScript 插件
如果需要为警告框组件提供关闭功能，请使用 jQuery 警告框插件。
确保在所有设备上的正确行为
务必给 <button> 元素添加 data-dismiss="alert" 属性。
2. 效果如下:
2. 代码如下:
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>警告框中的链接
用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。
效果如下:
代码如下:
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>进度条
通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。
跨浏览器兼容性
进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。
这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。
Opera 12 不支持 animation 属性。
Content Security Policy (CSP) compatibility
内容安全策略 CSP
If your website has a Content Security Policy (CSP) which doesn't allow style-src 'unsafe-inline',
then you won't be able to use inline style attributes to set progress bar widths
as shown in our examples below.
Alternative methods for setting the widths that are compatible with strict CSPs
include using a little custom JavaScript (that sets element.style.width) or using custom CSS classes.
基本实例
默认样式的进度条
效果如下:
代码如下:
<div class="progress">
<div class="progress-bar" style="width: 60%;" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">60% Complete</span> </div> </div>
带有提示标签的进度条
将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类，从而让当前进度显示出来。
效果如下:
代码如下:
<div class="progress">
<div class="progress-bar" style="width: 60%;"role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > 60% </div> </div>
在展示很低的百分比时，如果需要让文本提示能够清晰可见，
可以为进度条设置 min-width 属性。
效果如下:
代码如下:
<div class="progress">
<div class="progress-bar" style="min-width: 2em;"role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" > 0% </div> </div><div class="progress"> <div class="progress-bar" style="min-width: 2em; width: 2%;"role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" > 2% </div> </div>
根据情境变化效果
进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。
效果如下:
代码如下:
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%"role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">40% Complete (success)</span> </div> </div><div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%"role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">20% Complete</span> </div> </div><div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 60%"role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">60% Complete (warning)</span> </div> </div><div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 80%"role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">80% Complete (danger)</span> </div> </div>
条纹效果
通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。
效果如下:
代码如下:
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%"role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">40% Complete (success)</span> </div> </div><div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%"role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">20% Complete</span> </div> </div><div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 60%"role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">60% Complete (warning)</span> </div> </div><div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 80%"role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">80% Complete (danger)</span> </div> </div>
动画效果
为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。
IE9 及更低版本的浏览器不支持。
效果如下:
代码如下:
<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width: 45%"role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" > <span class="sr-only">45% Complete</span> </div></div>
堆叠效果
把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。
效果如下:
代码如下:
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div><div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div><div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div>
媒体对象
这是一个抽象的样式，用以构建不同类型的组件，
这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
默认样式
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
效果如下:
代码如下:
<div class="media">
<div class="media-left"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div><div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </div>
.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，
但是，从 v3.3.0 版本开始，他们就不再被建议使用了。
.media-left 和 .media-right 替代了他们，
不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。
对齐
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
效果如下:
代码如下:
<div class="media">
<div class="media-left media-middle"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div><div class="media-body"> <h4 class="media-heading">Middle aligned media</h4> ... </div> </div>
媒体对象列表
用一点点额外的标记，就能在列表内 使用媒体对象组件（对评论列表或文章列表很有用）。
牛B, 就是一直嵌套<div class="media"> </div>
效果如下:
代码如下:
<ul class="media-list">
<li class="media"><div class="media-left"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div><div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div></li> </ul>
列表组
列表组是灵活又强大的组件，
不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。
基本实例
最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。
我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。
效果如下:
代码如下:
<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>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>徽章
给列表组加入徽章组件，它会自动被放在右边。
效果如下:
代码如下:
<ul class="list-group">
<li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li></ul>
链接
用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组
（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。
没必要给列表组中的每个元素都加一个父元素。
效果如下:
代码如下:
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">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>按钮
列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），
并且无需为每个按钮单独包裹一个父元素。
千万注意不要使用标准的 .btn 类！
效果如下:
代码如下:
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>被禁用的条目
为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果。
效果如下:
代码如下:
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">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>情境类
为列表中的条目添加情境类，默认样式或链接列表都可以。
还可以为列表中的条目设置 .active 状态。
效果如下:
代码如下:
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>定制内容
列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。
效果如下:
代码如下:
<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>面版
虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。
对于这种情况，可以试试面板组件。
基本实例
默认的 .panel 组件所做的只是设置 基本的边框（border）和内补（padding）来包含内容。
效果如下:
代码如下:
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>带标题的面版
通过 .panel-heading 可以很简单地为面板加入一个标题容器。
你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。
不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。
为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。
效果如下:
代码如下:
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div><div class="panel-body"> Panel content </div> </div><div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div><div class="panel-body"> Panel content </div> </div>
带脚注的面版
把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。
效果如下:
代码如下:
<div class="panel panel-default"> <div class="panel-body"> Panel content </div><div class="panel-footer">Panel footer</div> </div>
情境效果
像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。
效果如下:
代码如下:
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>带表格的面版
为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。
如果是带有 .panel-body的面板，我们为表格的上方添加一个边框，看上去有分隔效果。
1. 效果如下:
1. 代码如下:
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div><div class="panel-body"> <p>...</p> </div><!-- Table --> <table class="table"> ... </table> </div>
如果没有 .panel-body ，面版标题会和表格连接起来，没有空隙。
2. 效果如下:
2. 代码如下:
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>带列表组的面版
可以简单地在任何面版中加入具有最大宽度的列表组。
效果如下:
代码如下:
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div><div class="panel-body"> <p>...</p> </div><!-- List group --> <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> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div>
具有响应式特性的嵌入内容
根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，
从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。
这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。
如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。
超级提示： 不需要为 <iframe> 元素设置 frameborder="0" 属性，因为我们已经替你这样做了！
效果如下: (啥也没有)
代码如下:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>Well
默认效果
把 Well 用在元素上，就能有嵌入（inset）的简单效果。
效果如下:
代码如下:
<div class="well">...</div>可选类/样式
通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。
效果如下:
未完待续,下一章节,つづく