成分

Bootstrap 中内置了许多可重用的组件,以提供导航、警报、弹出框等等。

按钮组

使用按钮组将多个按钮连接在一起作为一个复合组件。用一系列<a><button>元素构建它们。

最佳实践

对于使用按钮组和工具栏,我们建议遵循以下准则:

  • 始终在单个按钮组中使用相同的元素,<a><button>.
  • 不要在同一个按钮组中混用不同颜色的按钮。
  • 使用图标作为文本的补充或替代,但请确保在适当的情况下包含 alt 和标题文本。

带有下拉菜单的相关按钮组(见下文)应单独调用,并始终包含一个下拉插入符号以指示预期行为。

默认示例

以下是 HTML 如何查找使用锚标记按钮构建的标准按钮组:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

工具栏示例

将集合组合<div class="btn-group"><div class="btn-toolbar">更复杂的组件。

  1. <div= "btn 工具栏" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

复选框和收音机口味

按钮组也可以用作单选,其中只有一个按钮处于活动状态,或复选框,其中任意数量的按钮都可能处于活动状态。查看Javascript 文档

获取 JavaScript »

按钮组中的下拉菜单

小心!带有下拉菜单的按钮必须单独包装在.btn-groupa.btn-toolbar中以正确呈现。

按钮下拉菜单

示例标记

与按钮组类似,我们的标记使用常规按钮标记,但添加了一些改进样式并支持 Bootstrap 的下拉 jQuery 插件。

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. 行动
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "下拉菜单" >
  7. <!-- 下拉菜单链接 -->
  8. </ul>
  9. </div>

适用于所有按钮尺寸

按钮下拉菜单适用于任何大小。您的按钮大小为.btn-large.btn-small.btn-mini

需要 javascript

按钮下拉菜单需要Bootstrap 下拉插件才能运行。

在某些情况下——比如移动端——下拉菜单会延伸到视口之外。您需要手动或使用自定义 javascript 解决对齐问题。


拆分按钮下拉菜单

概述和示例

基于按钮组样式和标记,我们可以轻松创建拆分按钮。拆分按钮的左侧是标准操作,右侧是带有上下文链接的下拉切换。

尺寸

使用额外的按钮类.btn-mini, .btn-small, 或.btn-large来调整大小。

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "下拉菜单向右" >
  4. <!-- 下拉菜单链接 -->
  5. </ul>
  6. </div>

示例标记

我们扩展了普通按钮下拉菜单,以提供第二个按钮操作,该操作作为单独的下拉触发器操作。

  1. <div class = "btn-group" >
  2. <button class = "btn" >动作</button>
  3. <按钮= “btn下拉切换”数据切换= “下拉” >
  4. <span class = "caret" ></span>
  5. </按钮>
  6. <ul class = "下拉菜单" >
  7. <!-- 下拉菜单链接 -->
  8. </ul>
  9. </div>

下拉菜单

下拉菜单也可以通过将单个类添加到.dropdown-menu. 它将翻转方向.caret并重新定位菜单本身以从下向上移动而不是自上而下。

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <按钮= “btn下拉切换”数据切换= “下拉” >
  4. <span class = "caret" ></span>
  5. </按钮>
  6. <ul class = "下拉菜单" >
  7. <!-- 下拉菜单链接 -->
  8. </ul>
  9. </div>

多页面分页

何时使用

受 Rdio 启发的超简单和极简风格的分页,非常适合应用程序和搜索结果。大块很难错过,易于扩展,并提供大点击区域。

有状态的页面链接

链接是可定制的,并且可以在多种情况下使用正确的类。.disabled对于不可点击的链接和.active当前页面。

灵活对齐

添加两个可选类中的任何一个来更改分页链接的对齐方式:.pagination-centered.pagination-right.

例子

默认的分页组件是灵活的,并且可以在许多变体中工作。

标记

包裹在一个<div>,分页只是一个<ul>

  1. <div= “分页” >
  2. <ul>
  3. <li><a href = "#" >上一页</a></li>
  4. <li class = "活动" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4​​ </a></li>
  10. <li><a href = "#" >下一个</a></li>
  11. </ul>
  12. </div>

寻呼机用于快速上一个和下一个链接

关于寻呼机

分页器组件是一组用于简单分页实现的链接,具有轻标记甚至更轻的样式。它非常适合博客或杂志等简单网站。

可选禁用状态

分页链接也使用来自分页的通用.disabled类。

默认示例

默认情况下,寻呼机将链接居中。

  1. <ul= “寻呼机” >
  2. <li>
  3. <a href = "#" >上一个</a>
  4. </li>
  5. <li>
  6. <a href = "#" >下一个</a>
  7. </li>
  8. </ul>

对齐的链接

或者,您可以将每个链接对齐到两侧:

  1. <ul= “寻呼机” >
  2. <li class = "上一个" >
  3. <a href = "#" > 年长的</a>
  4. </li>
  5. <li= “下一个” >
  6. <a href = "#" >较新的 → </a>
  7. </li>
  8. </ul>
标签 标记
默认 <span class="label">Default</span>
成功 <span class="label label-success">Success</span>
警告 <span class="label label-warning">Warning</span>
重要的 <span class="label label-important">Important</span>
信息 <span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>

关于

徽章是用于显示某种指标或计数的小而简单的组件。它们通常出现在 Mail.app 等电子邮件客户端或用于推送通知的移动应用程序中。

可用课程

姓名 例子 标记
默认 1 <span class="badge">1</span>
成功 2 <span class="badge badge-success">2</span>
警告 4 <span class="badge badge-warning">4</span>
重要的 6 <span class="badge badge-important">6</span>
信息 8 <span class="badge badge-info">8</span>
10 <span class="badge badge-inverse">10</span>

英雄单位

Bootstrap 提供了一个轻量级、灵活的组件,称为英雄单元,用于在您的网站上展示内容。它适用于营销和内容密集的网站。

标记

将您的内容包装成div这样:

  1. <div class = "英雄单位" >
  2. <h1>标题</h1>
  3. <p>标语</p>
  4. <p>
  5. <a= "btn btn-primary btn-large" >
  6. 学到更多
  7. </a>
  8. </p>
  9. </div>

你好世界!

这是一个简单的英雄单位,一个简单的巨型电子风格组件,用于引起对特色内容或信息的额外关注。

学到更多

页眉

一个简单的外壳,用于h1适当地分隔和分割页面上的内容部分。它可以利用h1's default small, 元素以及大多数其他组件(带有其他样式)。

  1. <div= "页眉" >
  2. <h1>示例页眉</h1>
  3. </div>

默认缩略图

默认情况下,Bootstrap 的缩略图旨在展示所需标记最少的链接图像。

高度可定制

通过一些额外的标记,可以将任何类型的 HTML 内容(如标题、段落或按钮)添加到缩略图中。

  • 缩略图标签

    Cras justo odio,dapibus ac facilisis in,egestas eget quam。Donec id elit non mi porta gravida 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

    行动 行动

  • 缩略图标签

    Cras justo odio,dapibus ac facilisis in,egestas eget quam。Donec id elit non mi porta gravida 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

    行动 行动

为什么使用缩略图

缩略图(以前.media-grid直到 v1.4)非常适合照片或视频网格、图像搜索结果、零售产品、投资组合等等。它们可以是链接或静态内容。

简单、灵活的标记

缩略图标记很简单——只要ul包含任意数量的li元素即可。它也非常灵活,允许任何类型的内容,只需更多标记即可包装您的内容。

使用网格列大小

最后,缩略图组件使用现有的网格系统类(如.span2.span3)来控制缩略图尺寸。

标记

如前所述,缩略图所需的标记简单明了。以下是链接图像的默认设置:

  1. <ul= “缩略图” >
  2. <li= "span3" >
  3. <a href = "#"= "缩略图" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

对于缩略图中的自定义 HTML 内容,标记会略有变化。<a>为了允许任何地方的块级内容,我们将其换成<div>这样的:

  1. <ul= “缩略图” >
  2. <li= "span3" >
  3. <div= "缩略图" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5>缩略图标签</h5>
  6. <p>缩略图标题就在这里...... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

更多示例

使用可供您使用的各种网格类探索所有选项。您还可以混合搭配不同的尺寸。

轻量级默认值

重写基类

在 Bootstrap 2 中,我们简化了基类:.alert而不是.alert-message. 我们还减少了所需的最低标记——<p>默认情况下不需要,只需要外部<div>.

单个警报消息

对于代码更少、更耐用的组件,我们删除了块警报、带有更多填充和通常更多文本的消息的差异化外观。班级也已更改为.alert-block.


非常适合使用 javascript

Bootstrap 带有一个很棒的 jQuery 插件,它支持警报消息,可以快速轻松地解除它们。

获取插件 »

示例警报

用简单的类将您的消息和可选的关闭图标包装在一个 div 中。

警告!最好检查一下自己,你看起来不太好。
  1. <div= "警报" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong>警告!</strong>最好检查一下自己,你看起来不太好。
  4. </div>

小心!iOS 设备需要一个href="#"来解除警报。确保包含它和锚点关闭图标的数据属性。或者,您可以使用<button>具有 data 属性的元素,我们选择为我们的文档执行此操作。使用时<button>,您必须包含,type="button"否则您的表格可能无法提交。

使用两个可选类轻松扩展标准警报消息:.alert-block更多填充和文本控件以及.alert-heading匹配标题。

警告!

最好检查一下自己,你看起来不太好。Nulla vitae elit libero,一个 pharetra augue。Praesent commodo cursus magna、vel scelerisque nisl consectetur 等。

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" >警告!</h4>
  4. 最好自己检查一下,你不是...
  5. </div>

上下文替代项添加可选类以更改警报的内涵

错误或危险

哦,快!更改一些内容并尝试再次提交。
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

成功

做得好!您已成功阅读此重要警报消息。
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

信息

小心!此警报需要您的注意,但它并不是非常重要。
  1. <div= "警报警报信息" >
  2. ...
  3. </div>

示例和标记

基本的

带有垂直渐变的默认进度条。

  1. <div= “进度” >
  2. <div= “酒吧”
  3. 样式= "宽度: 60 %; " ></div>
  4. </div>

有条纹的

使用渐变创建条纹效果(无 IE)。

  1. <div class = "progress progress-striped" >
  2. <div= “酒吧”
  3. 样式= "宽度: 20 %; " ></div>
  4. </div>

动画

采用条纹示例并对其进行动画处理(无 IE)。

  1. <div class = "进度进度条
  2. 活跃” >
  3. <div= “酒吧”
  4. 样式= "宽度: 40 %; " ></div>
  5. </div>

选项和浏览器支持

其他颜色

进度条使用一些相同的按钮和警报类来实现一致的样式。

条纹条

与纯色类似,我们有不同的条纹进度条。

行为

进度条使用 CSS3 过渡,因此如果您通过 javascript 动态调整宽度,它将平滑调整大小。

如果您使用.active该类,您的.progress-striped进度条将从左到右为条纹设置动画。

浏览器支持

进度条使用 CSS3 渐变、过渡和动画来实现其所有效果。IE7-9 或更早版本的 Firefox 不支持这些功能。

Opera 和 IE 目前不支持动画。

威尔斯

将井用作元素上的简单效果,使其具有嵌入效果。

看,我在井里!
  1. <div= “好” >
  2. ...
  3. </div>

关闭图标

使用通用关闭图标来关闭模式和警报等内容。

  1. <button class = "close" > × </按钮>

如果您更愿意使用锚点,iOS 设备需要一个 href="#" 来表示点击事件。

  1. <a class = "close" href = "#" > × </a>