组件

Bootstrap内置几十种高可用的组件,以实现导航栏,通知,弹出框等功能。

按钮组

按钮组可以将多个按钮做为一个复合组件来用。 由一系列 <a><button> 元素构建。

最佳实践

我们建议使用按钮组和工具条时应遵循下列准则:

  • 在一个按钮组中只使用一种元素, <a><button>
  • 不要在同一个按钮组中使用不同按钮颜色。
  • 使用图标补充内容或直接替代文本时,应包含说明性的alt或title文字。

补充 下面会单独强调带下拉框的按钮组,其包含一个下拉/上弹三角以表示可点击触发下拉/上弹。

默认例子

button 标签按钮构建的标准按钮组:

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

工具条的例子

集合几组 <div class="btn-group"> ,再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

复选和单选形式

按钮组也可实现单选和复选功能。前者只有一个按钮被按下,后者可以按下多个按钮。详见Javascript插件

获取相关的javascript »

按钮组中的下拉项

强调! 为了渲染正常,带下拉项的按钮应该被 .btn-group 嵌套,然后再放入 .btn-toolbar 内。

下拉按钮

标记例子

和按钮组类似,下拉按钮仍使用按钮标记,并用到少量其他标记以增强显示效果,同时支持Bootstrap的下拉jquery插件。

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

适应所有按钮的尺寸

下拉按钮适应任何尺寸,可以是 .btn-large, .btn-small, 或 .btn-mini

需要Javascript

下拉按钮需要 Bootstrap下拉插件 实现功能。

在某些情况下(诸如使用手机浏览),下拉菜单会超出可视区域。这时要么手动对齐,要么使用定制的javascript。


带间隔的下拉按钮

简介和例子

在按钮组的样式和标记的基础上,我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮,右侧是下拉链接。

尺寸

使用 .btn-mini, .btn-small, 和 .btn-large 指定大小。

<div class="btn-group">
  ...
  <ul class="dropdown-menu pull-right">
    <!-- dropdown menu links -->
  </ul>
</div>

标记的例子

我们对普通的下拉按钮进行扩展,将下拉区域独立出来,可对其单独点击收放菜单。

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

上弹菜单

下拉菜单也可以变成上弹菜单,只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可。它会改变 .caret 的箭头方向,并将菜单底部与按钮顶部对齐。

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

多页码分页

何时适用

受Rdio启发,我们设计了极为简致的页码样式,适用于应用和搜索结果。页码区域尺寸大,易于吸引注意力,易于扩展,易于点击。

页码链接的状态

Bootstrap使用一组样式类定制页码的状态,.disabled 用于不可点击链接,而 .active 用于表示当前页链接。

灵活的对齐方式

使用 .pagination-centered.pagination-right 可以改变页码的对齐方式,前者居中,后者居右。

例子

默认的页码组件非常灵活,有多种展示形式。

标记

分页标记是一个嵌套在 <div> 中的 <ul>

<div class="pagination">
  <ul>
    <li><a href="#">前一页</a></li>
    <li class="active">
      <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>

前后页 简便的前一页/后一页链接

前后页组件介绍

前后页组件是一组简便的分页实现,标记更少,样式更轻,适用于轻量级网站,如博客或网志。

禁用状态

前后页链接仍使用 .disabled 设置无效状态。

默认的例子

默认情况下,前后页组件居中。

<ul class="pager">
  <li>
    <a href="#">前一页</a>
  </li>
  <li>
    <a href="#">后一页</a>
  </li>
</ul>

居于左右端的链接

另一种情况下,链接分别居于左右端:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; 过去的</a>
  </li>
  <li class="next">
    <a href="#">更新的 &rarr;</a>
  </li>
</ul>
标签 标记
默认 <span class="label">默认</span>
成功 <span class="label label-success">成功</span>
警告 <span class="label label-warning">警告</span>
重要 <span class="label label-important">重要</span>
信息 <span class="label label-info">信息</span>
相反 <span class="label label-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-error">6</span>
信息 8 <span class="badge badge-info">8</span>
相反 10 <span class="badge badge-inverse">10</span>

主角单元

Bootstrap提供了一个轻巧又灵活的组件,用以在网站中着重展示内容,称之为"hero unit"/主角单元。 适用于市场类或强调内容的网站。

标记

将内容嵌套入应用 .hero-unit 的 div 中,如下:

<div class="hero-unit">
  <h1>标题</h1>
  <p>标签行</p>
  <p>
    <a class="btn btn-primary btn-large">
      了解更多
    </a>
  </p>
</div>

XXX,真汉子!

主角单元Hero Unit是一简单的大屏组件,用于增强内容或信息的吸引力

了解更多

页面标题

相当于一个简单的 h1 外壳,它有适当的留白,以便在页面中分割内容片段。 还可以在 h1 内嵌入 small ,html元素或是其他组件。

<div class="page-header">
  <h1>页面标题例子</h1>
</div>

默认缩略项

默认情况下,Bootstrap的缩略项使用很少的标记来展示链接图象。

高可定制

使用少量其他标记就可以在缩略项中添加任何一种HTML内容,比如标题,段落,或按钮。

  • 缩略项标签

    余华:文章怎么写很重要,怎么读也很重要。有时候将无耻的文章反过来读,也能读到真理的语句。敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词。

    动作 动作

  • 缩略项标签

    张思之:曾以为一国家只要有好的外交或者强大的国防就有面子,后来才明白其实人权才是一个国家最大的面子。···一个政权如果关起门来都不能维护自己本国普通公民的权利,它有什么资格在国际舞台上维护这个国家的权利,它的合法性就会遭到质疑。

    动作 动作

为什么使用缩略项

缩略项(1.4版之前使用 .media-grid )适用于栅格化的图片和视频,图片搜索结果,零售产品,文件夹等等。缩略项可以是链接,也可以是静态内容。

简洁灵活的标记

缩略项标记既简单又灵活—只须用一个 ul 嵌套多个 li 元素。缩略项内容可以是任何一种HTML内容,只须少许标记。

使用栅格列确定大小

新版本中,缩略项组件使用栅格类—诸如 .span2.span3 —确定缩略项的尺寸。

标记

正如之前所提到的,缩略项所需的标记是很少的。下面就是一个 带链接图象 的默认设置:

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

缩略项中的HTML内容仅须更改少许标记。将 <a> 变成 <div> 即可定制块状内容,如下:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
      <h5>缩略项标签</h5>
      <p>缩略项标题介绍</p>
    </div>
  </li>
  ...
</ul>

更多例子

尝试更多栅格类,混用不同的尺寸。

简洁的默认样式

重写过的基类

Bootstrap 2 简化了基类,用 .alert 代替了 .alert-message 。 并对最低要求的标记也进行了精简—默认只使用 <div> ,而无须嵌套 <p>

统一后的通知消息

为了得到代码少而质量高的组件,我们统一了块状通知和普通通知的外观。原有的块状样式类被命名为 .alert-block ,其padding更大,通常容纳文本也更多。


与javascript配合良好

Bootstrap用一个很好的jQuery插件驱动通知消息,方便用户快速地关闭通知。

Get the plugin »

通知的例子

在div中嵌套信息,并放置一个关闭图标。

× 外交部警告! 不要拿法律当挡箭牌。
<div class="alert">
  <a class="close" data-dismiss="alert">×</a>
  <strong>警告!</strong> 不要拿法律当挡箭牌。
</div>

进度条有两个效果加强类: .alert-block 用于提供更大padding,适合容纳更多文本组件;而 .alert-heading 用以修饰标题。

×

敏感词标题!

中方强调,中国是法治国家,任何公民的合法权益都受宪法和法律保护,同时任何公民都有义务遵守宪法和法律。

<div class="alert alert-block">
  <a class="close" data-dismiss="alert">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you're not...
</div>

语境下的强化 根据通知的涵义使用不同的类

危险/错误

× 前进进! 紧密团结在以希特勒元首为核心的纳粹党中央周围,高举国家意志和民族利益的大旗,直达人间地狱。
<div class="alert alert-error">
  ...
</div>

成功

× 钱贱贱! 很多敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词。
<div class="alert alert-success">
  ...
</div>

信息

× 杀尽尽! 紧密团结在以斯大林同志为核心的苏共中央周围,高举马列2B主义大旗,加速实现共产主义。
<div class="alert alert-info">
  ...
</div>

例子和标记

基本效果

默认的垂直渐变进度条。

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

条纹效果

使用渐变创建条纹进度条(不支持IE)

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

动画效果

条纹进度条的动果效果(不支持IE)

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

选项和浏览器支持

其他颜色

进度条使用和按钮/警告类相似的样式,提供一致的颜色风格。

.progress-info
.progress-success
.progress-warning
.progress-danger

条纹滚动条

与纯色相似,也可以使用多色的条纹进度条。

.progress-info
.progress-success
.progress-warning
.progress-danger

行为

进度条使用CSS3过渡效果,因此用javascript动态调整进度条宽度时,效果会非常平滑。

如果使用 .active ,那么 .progress-striped 导航栏就会呈现自左向右的条纹跑马灯动画效果。

浏览器支持

进度条使用CSS3渐变/过渡/动画以实现所有效果。IE7到IE9,以及某些老版本的Firefox还不能完全支持这些特性。

目前,Opera和IE还不支持动画效果。

消息墙

用来给某个元素添加包框效果。

来看呀来看呀,这就是消息墙!
<div class="well">
  ...
</div>

关闭图标

象对话框和弹出框一样,用常见的叉叉图标关闭内容。

×

<a class="close">&times;</a>