成分

为提供导航、警报、弹出框等而构建的数十个可重用组件。

例子

两个基本选项,以及两个更具体的变体。

单键组

.btn用in包裹一系列按钮.btn-group

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

多个按钮组

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

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

垂直按钮组

使一组按钮显示为垂直堆叠而不是水平堆叠。

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

复选框和收音机口味

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

按钮组中的下拉菜单

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

概述和示例

使用任何按钮来触发下拉菜单,方法是将其放置在 a 中.btn-group并提供适当的菜单标记。

  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 解决对齐问题。


拆分按钮下拉菜单

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

  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>

尺寸

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

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" >动作</button>
  3. <按钮= “btn btn-mini下拉切换”数据切换= “下拉” >
  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 启发的简单分页,非常适合应用程序和搜索结果。大块很难错过,易于扩展,并提供大点击区域。

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

选项

禁用和活动状态

链接可针对不同情况进行定制。用于.disabled不可点击的链接并.active指示当前页面。

  1. <div= “分页” >
  2. <ul>
  3. <li class = "已禁用" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

您可以选择将活动或禁用的锚点换成跨度以删除点击功能,同时保留预期的样式。

  1. <div= “分页” >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "活动" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

尺寸

想要更大或更小的分页?添加.pagination-large.pagination-small.pagination-mini用于其他尺寸。

  1. <div class = "分页分页-大" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div= “分页” >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "分页分页-小" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "分页分页-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

结盟

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

  1. <div class = "分页以分页为中心" >
  2. ...
  3. </div>
  1. <div class = "分页分页权" >
  2. ...
  3. </div>

寻呼机

带有轻标记和样式的简单分页实现的快速上一个和下一个链接。它非常适合博客或杂志等简单网站。

默认示例

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

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

对齐的链接

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

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

可选禁用状态

寻呼机链接也使用分页中的通用.disabled实用程序类。

  1. <ul= “寻呼机” >
  2. <li class = "以前的禁用" >
  3. <a href = "#" > 年长的</a>
  4. </li>
  5. ...
  6. </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>

徽章

姓名 例子 标记
默认 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>

易于折叠

:empty为了便于实施,标签和徽章在没有内容时会简单地折叠(通过 CSS 的选择器)。

英雄单位

一个轻量级、灵活的组件,用于展示您网站上的关键内容。它适用于营销和内容密集的网站。

你好世界!

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

学到更多

  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>示例页眉<small>页眉的子文本</small></h1>
  3. </div>

默认缩略图

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

高度可定制

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

  • 300x200

    缩略图标签

    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。

    行动 行动

  • 300x200

    缩略图标签

    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。

    行动 行动

  • 300x200

    缩略图标签

    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= "span4" >
  3. <a href = "#"= "缩略图" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul= “缩略图” >
  2. <li= "span4" >
  3. <div= "缩略图" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3>缩略图标签</h3>
  6. <p>缩略图标题... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

更多示例

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

默认警报

将任何文本和可选的关闭按钮包裹起来,.alert以获得基本的警告警报消息。

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

关闭按钮

Mobile Safari 和 Mobile Opera 浏览器除了该data-dismiss="alert"属性外,还需要href="#"在使用<a>标签时解除警报。

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

或者,您可以使用<button>具有 data 属性的元素,我们选择为我们的文档执行此操作。使用时<button>,您必须包含,type="button"否则您的表格可能无法提交。

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </按钮>

通过 JavaScript 关闭警报

使用alerts jQuery 插件可以快速轻松地解除警报。


选项

对于较长的消息,请通过添加来增加警报包装器顶部和底部的填充.alert-block

警告!

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

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </按钮>
  3. <h4>警告!</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 class = "bar" style = " width : 60 %; " ></div>
  3. </div>

有条纹的

使用渐变创建条纹效果。在 IE7-8 中不可用。

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

动画

添加.active.progress-striped从右到左为条纹设置动画。并非在所有版本的 IE 中都可用。

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

堆叠的

将多个条放入同一条中.progress以堆叠它们。

  1. <div= “进度” >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

选项

其他颜色

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

  1. <div class = "进度进度信息" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "进度进度-成功" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "进度进度警告" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

条纹条

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "进度进度-成功进度-条纹" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div= “酒吧” style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div= "栏"样式= " width : 80 % " ></div>
  12. </div>

浏览器支持

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

Internet Explorer 10 和 Opera 12 之前的版本不支持动画。

用于构建各种类型的组件(如博客评论、推文等)的抽象对象样式,这些组件具有左对齐或右对齐的图像以及文本内容。

默认示例

默认媒体允许将媒体对象(图像、视频、音频)浮动到内容块的左侧或右侧。

64x64

媒体标题

Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
64x64

媒体标题

Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
64x64

媒体标题

Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
  1. <div= “媒体” >
  2. <a class = "pull-left" href = "#" >
  3. <img= "媒体对象" data-src = "holder.js/64x64" >
  4. </a>
  5. <div= “媒体主体” >
  6. <h4 class = "media-heading" >媒体标题</h4>
  7. ...
  8.  
  9. <!-- 嵌套媒体对象 -->
  10. <div= “媒体” >
  11. ...
  12. </div>
  13. </div>
  14. </div>

媒体列表

通过一些额外的标记,您可以在列表中使用媒体(对于评论线程或文章列表很有用)。

  • 64x64

    媒体标题

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。

    64x64

    嵌套媒体标题

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。
    64x64

    嵌套媒体标题

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。
    64x64

    嵌套媒体标题

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。
  • 64x64

    媒体标题

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。
  1. <ul= "媒体列表" >
  2. <li class = "媒体" >
  3. <a class = "pull-left" href = "#" >
  4. <img= "媒体对象" data-src = "holder.js/64x64" >
  5. </a>
  6. <div= “媒体主体” >
  7. <h4 class = "media-heading" >媒体标题</h4>
  8. ...
  9.  
  10. <!-- 嵌套媒体对象 -->
  11. <div= “媒体” >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

威尔斯

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

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

选修课

使用两个可选的修饰符类控制填充和圆角。

看,我在井里!
  1. <div class = "好好-大" >
  2. ...
  3. </div>
看,我在井里!
  1. <div class = "好-小" >
  2. ...
  3. </div>

关闭图标

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

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

href="#"如果您更愿意使用锚点,iOS 设备需要for click 事件。

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

助手类

用于小型显示或行为调整的简单、集中的类。

.pull-left

向左浮动一个元素

  1. = “拉左”
  1. . -{
  2. 浮动
  3. }

.pull-right

向右浮动元素

  1. = “拉右”
  1. . -{
  2. 浮动
  3. }

.静音

将元素的颜色更改为#999

  1. = “静音”
  1. . 静音{
  2. 颜色#999;
  3. }

.clearfix

清除float任何元素上的

  1. = “清除修复”
  1. . 清除修复{
  2. *缩放1
  3. &:之前
  4. &:{之后
  5. 显示表格
  6. 内容“”
  7. }
  8. &:{之后
  9. 明确两者
  10. }
  11. }