Bootstrap 中内置了许多可重用的组件,以提供导航、警报、弹出框等等。
受 Rdio 启发的超简单和极简风格的分页,非常适合应用程序和搜索结果。大块很难错过,易于扩展,并提供大点击区域。
链接是可定制的,并且可以在多种情况下使用正确的类。.disabled
对于不可点击的链接和.active
当前页面。
添加两个可选类中的任何一个来更改分页链接的对齐方式:.pagination-centered
和.pagination-right
.
包裹在一个<div>
,分页只是一个<ul>
。
- <div类= “分页” >
- <ul>
- <li><a href = "#" >上一页</a></li>
- <li class = "活动" >
- <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 = "#" >下一个</a></li>
- </ul>
- </div>
pager 组件是一组链接,用于简单的分页实现,带有轻标记甚至更轻的样式。它非常适合博客或杂志等简单网站。
默认情况下,寻呼机将链接居中。
- <ul类= “寻呼机” >
- <li>
- <a href = "#" >上一个</a>
- </li>
- <li>
- <a href = "#" >下一个</a>
- </li>
- </ul>
标签 | 标记 |
---|---|
默认 | <span class="label">Default</span> |
新的 | <span class="label label-success">New</span> |
警告 | <span class="label label-warning">Warning</span> |
重要的 | <span class="label label-important">Important</span> |
信息 | <span class="label label-info">Info</span> |
通过一些额外的标记,可以将任何类型的 HTML 内容(如标题、段落或按钮)添加到缩略图中。
缩略图(以前.media-grid
直到 v1.4)非常适合照片或视频网格、图像搜索结果、零售产品、投资组合等等。它们可以是链接或静态内容。
缩略图标记很简单——只要ul
包含任意数量的li
元素即可。它也非常灵活,允许任何类型的内容,只需更多标记即可包装您的内容。
最后,缩略图组件使用现有的网格系统类(如.span2
或.span3
)来控制缩略图尺寸。
如前所述,缩略图所需的标记简单明了。以下是链接图像的默认设置:
- <ul类= “缩略图” >
- <li类= "span3" >
- <a href = "#"类= "缩略图" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
对于缩略图中的自定义 HTML 内容,标记会略有变化。<a>
为了允许任何地方的块级内容,我们将其换成<div>
这样的:
- <ul类= “缩略图” >
- <li类= "span3" >
- <div类= "缩略图" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5>缩略图标签</h5>
- <p>缩略图标题就在这里...... </p>
- </div>
- </li>
- ...
- </ul>
在 Bootstrap 2 中,我们简化了基类:.alert
而不是.alert-message
. 我们还减少了所需的最低标记——<p>
默认情况下不需要,只需要外部<div>
.
对于代码更少、更耐用的组件,我们删除了块警报、带有更多填充和通常更多文本的消息的差异化外观。班级也已更改为.alert-block
.
Bootstrap 带有一个很棒的 jQuery 插件,它支持警报消息,可以快速轻松地解除它们。
用简单的类将您的消息和可选的关闭图标包装在一个 div 中。
- <div类= "警报" >
- <a类= "关闭" > × </a>
- <strong>警告!</strong>最好检查一下自己,你看起来不太好。
- </div>
使用两个可选类轻松扩展标准警报消息:.alert-block
更多填充和文本控件以及.alert-heading
匹配标题。
最好检查一下自己,你看起来不太好。Nulla vitae elit libero,一个 pharetra augue。Praesent commodo cursus magna、vel scelerisque nisl consectetur 等。
- <div class = "alert alert-block" >
- <a类= "关闭" > × </a>
- <h4 class = "alert-heading" >警告!</h4>
- 最好自己检查一下,你不是...
- </div>
带有垂直渐变的默认进度条。
- <div类= “进度” >
- <div类= “酒吧”
- 样式= “宽度:60 %;” ></div>
- </div>
使用渐变创建条纹效果。
- <div class = "进度进度信息
- 进度条" >
- <div类= “酒吧”
- 样式= "宽度: 20 %; " ></div>
- </div>
采用条纹示例并为其设置动画。
- <div class = "进度进度-危险
- 进度条活跃" >
- <div类= “酒吧”
- 样式= "宽度: 40 %; " ></div>
- </div>
进度条使用一些与按钮和警报相同的类名来实现类似的样式。
.progress-info
.progress-success
.progress-danger
或者,您可以自定义 LESS 文件并滚动您自己的颜色和大小。
进度条使用 CSS3 过渡,因此如果您通过 javascript 动态调整宽度,它将平滑调整大小。
如果您使用.active
该类,您的.progress-striped
进度条将从左到右为条纹设置动画。
进度条使用 CSS3 渐变、过渡和动画来实现其所有效果。IE7-8 或更早版本的 Firefox 不支持这些功能。
Opera 目前不支持动画。
将井用作元素上的简单效果,使其具有嵌入效果。
- <div类= “好” >
- ...
- </div>