基础CSS · Twitter Bootstrap中文版/中文翻译

Bootstrap
  • 首页
  • 框架
  • 基础CSS
  • 组件
  • Javascript插件
  • 使用LESS
  • 定制
  • 译者言

基础CSS

在框架的基础上，对HTML基础元素进行样式定义，并利用可扩展的class增强其展示效果，从而提供形式新颖，风格一致的外观和体验。

  • 排版
  • 代码
  • 表格
  • 表单
  • 按钮
  • 图标

排版 标题，段落，列表，以及其他行级元素

标题 & body copy

排版尺度

整个排版系统的单位尺度都取决于variables.less文件中的两个Less变量：@baseFontSize 和 @baseLineHeight。 前者决定全局的默认字体大小font-size，后者决定默认的行高line-height。

我们利用这些变量，配合一些数学运算，就可以得到定义样式时所需的margins, paddings, line-heights等等。

body text例子

许小年：政府掌握了越来越多的资源，制订了日益烦琐的管理方法，为了获得企业发展所需要的资源，或者是仅仅为了生活下去，企业不得不按照潜规则与企业打交道。我非常赞同绿公司提出的要“守本分”，但是要想企业守本分，首先政府要守本分，“逼良为娼”还不是最可怕的，回过头来的“扫黄”才是致命的一击！

余华：在涉及敏感话题时，我以前总是希望别人说出我想说的话。别人有风险，自已很安全。后来意识到如果人人都和我一样，那么我们可能长久生活在风险里。要想抵达安全，风险是必经之路。所以我开始自已说了，越来越多的人已经在自己说了……荷马史诗里描述黑压压的兵勇前进时的情景：他们将大地踩得轰然作响。

h1. 敏感词万岁

h2. 千年王八万年龟

h3. 我们在下一盘很大的棋

h4. 官人，你这麻将打成相公了

h5. 至于你信不信,反正我信了？
h6. 404 error　网址找不到

强调，地址，缩写

元素 | 用法 | 选项
<strong> | 加粗强调一组文字 | 无
<em> | 倾斜强调一组文字 | 无
<abbr> | 包装缩写词，当鼠标经过时显示缩写词完整含义。比如少先队 | 可使用 title 属性存放完整字词信息 使用 .initialism 类可以将缩略词大写。
<address> | 用于包装联系信息的最外层元素或整个信息。 | 使用 <br> 换行以保持格式不变

强调文字的例子

李宗苗：车辆年检，195元/辆，全深圳300万辆，年收5.85亿元。

杨佩昌：在德国，汽车、公司都无需年检。我问德国人：汽车不年检，坏了怎么办？答：自己修车。问：企业不年检，公司倒闭如潮怎么办？德国人答：你看德国是这样的吗？我问：德国政府为何不强制年检？德国人反问：谁给了政府这个权力？如果政府对年检感兴趣，说明这种事对它有好处。

注意： 在HTML5仍可以使用 <b> 和 <i> 标签，但是它们的用途已经发生了改变。 <b> 仅仅用来加粗单词或短语，没有任何语义上的含义。而 <i> 主要用在语音和技术等方面。

地址的例子

这有两个使用 <address> 标签的例子：

TVlike文化有限公司
哪个省哪个市无名大道404号
佚名大厦89层64号
P: (123) 456-7890
有关负责人
giveme.money@chinagov.com

缩写的例子

使用 title 属性的缩写词会带有点状(dotted)底边线，鼠标经过时会显示带问号的箭头，并提示完整的字词信息。

对缩写词元素应用 .initialism 会减小一号字体大小，以协调排版效果。

例子：Html 是自切片面包问世以来最棒的发明。

例子：共青团是一个光荣而伟大的组织哟~

引用

元素 | 用法 | 选项
<blockquote> | 用于引用外部内容的块级元素 | cite 属性存放来源URL .pull-left 和 .pull-right 决定是内容居左还是居右
<small> | 可选元素，用于添加针对用户的引用，通常用于引言的作者。 | 可以将引言或出处置于 <cite> 标签内。

用 <blockquote> 嵌套 HTML 即可实现引用。 对于连续的引用内容，建议使用 <p> 标签。

还可以添加一个可选的 <small> 元素来表示引用的出处，该元素会利用样式在内容前加入宽度为一个字长的破折号 &mdash; 。

<blockquote>
  <p>一天吃六个胶囊，一天三次、一次两个，没有吃掉多少铬。</p>
  <small>卫生部合理用药专家孙忠实</small>
</blockquote>

引用的例子

默认引用样式如下:

一天吃六个胶囊，一天三次、一次两个，没有吃掉多少铬。

卫生部合理用药专家孙忠实 于人民网强国论坛

用 class="pull-right" 将引用内容居右:

我曾沾的光使我终身受益，因家庭牵连，我被关进监狱。五年的监狱生活，使我经受了磨难，锻炼了意志，学会了思考，懂得了公平，民主，法制对一个社会是多么重要；温饱，自由，尊严对一个人是多么重要！

薄熙来 于1993年3月于大连经贸会

列表

无序号

<ul>

  • Django是个好框架
  • Pyramid是个好框架
  • Tornado是个好框架
  • Flask是个好框架
  • Uliweb是个好框架
    • MVT模型
    • 组织结构
    • 资源共享的处理方式
    • URL映射
    • View和Template
    • ORM
    • I18N
    • 功能扩展
    • 命令行工具
    • 运行环境支持
    • 其它特点
  • Bottle是个好框架
  • Rails是个好框架
  • Yii是个好框架

无样式

<ul class="unstyled">

  • 以动手实践为荣 , 以只看不练为耻;
  • 以打印日志为荣 , 以单步跟踪为耻;
  • 以空格缩进为荣 , 以制表缩进为耻;
  • 以单元测试为荣 , 以人工测试为耻;
    • UnitTest很不错
    • Nose也很好用
    • 配合Profile很爽
    • 配合pdb也不错
  • 以模块复用为荣 , 以复制粘贴为耻;
  • 以多态应用为荣 , 以分支判断为耻;
  • 以Pythonic为荣 , 以冗余拖沓为耻;
  • 以总结分享为荣 , 以跪求其解为耻;

有序号

<ol>

  1. 以热爱祖国为荣，以危害祖国为耻吗？
  2. 以服务人民为荣，以背离人民为耻吗？
  3. 以崇尚科学为荣，以愚昧无知为耻吗？
  4. 以辛勤劳动为荣，以好逸恶劳为耻吗？
  5. 以团结互助为荣，以损人利己为耻吗？
  6. 以诚实守信为荣，以见利忘义为耻吗？
  7. 以遵纪守法为荣，以违法乱纪为耻吗？
  8. 以艰苦奋斗为荣，以骄奢淫逸为耻吗？

描述

<dl>

描述列表
适用于术语的定义/解释
Django
Django 是一种高级的基于python的web开发框架；
Django推崇一种快速,整洁而且实用主义哲学的设计及开发方式
Tornado
Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本。

水平状态的描述

<dl class="dl-horizontal">

描述列表
适用于术语的定义/解释
Django
Django 是一种高级的基于python的web开发框架；
Django推崇一种快速,整洁而且实用主义哲学的设计及开发方式
Tornado
Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本。

代码 行级/块状代码片段

行级代码片段

使用 <code> 包装行级代码片段

例如，<code>section</code> 应该被做为行级代码包装。

基本块状内容

使用<pre> 对多行代码进行包装。 切记一定要对代码中的每个<>进行转义，这样方能得到正常的渲染结果。

<p>示范文本...</p>

<pre>
  &lt;p&gt;示范文本...&lt;/p&gt;
</pre>

注意： 尽可能地让 <pre> 左对齐；因为会渲染所有空格和tab（就是你键盘左边的那个tab键）。

还可以使用 .pre-scrollable 给代码区域设置350px的最大高度并设置一个纵向滚动条。

Google Prettify 美化代码

在 <pre> 元素上应用 .prettyprint 和 .linenums 增强代码渲染效果。 .linenums 用于显示行号。

<p>示范文本...</p>

<pre class="prettyprint
     linenums">
  &lt;p&gt;示范文本...&lt;/p&gt;
</pre>

下载 google-code-prettify 并查看 使用指南.

表格 适用于展示扁平化的列表数据

表格标记

标签 | 描述
<table> | 用以包装表格化的数据
<thead> | 容纳表格标题行 (<tr>)以标识表格列，
<tbody> | 容纳表格行 (<tr>)
<tr> | 容纳行内的一组单元格 (<td> or <th>)
<td> | 默认的表格单元格
<th> | 用于列头(或是行，取决于标签所在位置和区域)的特殊标签 必须置于 <thead> 标签内。
<caption> | 表格用途的描述或摘要，对屏幕阅读器（视障人士读屏软件）非常有用
<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

表格选项

名称 | 类 | 描述
默认 | None | 无样式，仅仅有列和行
基本 | .table | 行与行之间以水平线相隔
有边线 | .table-bordered | 表格外围均有外边框
间隔背景 | .table-striped | 奇数行背景设为浅灰色
紧凑 | .table-condensed | 竖直方向padding缩减一半，从8px变为4px，所有的 td 和 th 元素都受影响

表格的例子

1. 默认表格样式

仅使用一组边线对表格进行格式化，以保证可读性并维持表格结构不变。 从 2.0 版本开始, 该效果不再做为默认，必须使用 .table 。

<table class="table">
  …
</table>
# | 电视剧 | 类型 | 年代
1 | 爱情公寓 | 都市爱情喜剧 | 2010
2 | 邪恶力量 | 悬疑魔幻 | 2005
3 | 神探伽俐略 | 推理探案 | 2008

2. 背景交替的表格

添加 .table-striped 让表格变得生动一点。

注意： 该效果要用到 :nth-child CSS 选择器，IE7-IE8不支持该特性，因而也无法呈现效果。

<table class="table table-striped">
  …
</table>
# | 电视剧 | 类型 | 年代
1 | 爱情公寓 | 都市爱情喜剧 | 2010
2 | 邪恶力量 | 悬疑魔幻 | 2005
3 | 神探伽俐略 | 推理探案 | 2008

3. 有边线的表格

为整个表格添加边线，出于美观考虑，每个边角都呈现圆角。

<table class="table table-bordered">
  …
</table>
# | 电视剧 | 类型 | 年代
1 | 爱情公寓 | 都市爱情喜剧 | 2010
2 | 邪恶力量 | 悬疑魔幻 | 2005
3 | 神探伽俐略 | 推理探案 | 2008

4. 紧凑表格

添加 .table-condensed 让表格更加紧凑，所有表格单元的padding都会减半(从8px到4px)

<table class="table table-condensed">
  …
</table>
# | 电视剧 | 类型 | 年代
1 | 爱情公寓 | 都市爱情喜剧 | 2010
2 | 邪恶力量 | 悬疑魔幻 | 2005
3 | 神探伽俐略 | 推理探案 | 2008

5. 组合使用

自由组合搭配表格类以实现不同的外观。

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
# | 电视剧 | 类型 | 年代
1 | 爱情公寓 | 都市爱情喜剧 | 2010
2 | 邪恶力量 | 悬疑魔幻 | 2005
3 | 神探伽俐略 | 推理探案 | 2008

表单

灵活的HTML和CSS

Bootstrap的优异之处在于：不管我们在应用中怎样使用表单输入元素和控件，其展示效果都特别棒！ 无需使用过多的HTML，况且我们已经还内置了几种常用模式。

更复杂的布局可以用简单而可扩展的类实现，更利于样式化和事件绑定。

包含四种布局

Bootstrap提供了下列四种表单布局:

  • 垂直式布局 (默认)
  • 搜索式布局
  • 行式布局
  • 水平式布局

四种布局虽然在标记上有不些许同，但都使用同样的表单控件，在表单行为上也是一致的。

控件状态以及其他

Bootstrap对于所有的基本表单控件（如input,textarea,select等等）都进行了样式定义。 同时也提供了一组自定义组件，比如前置/后置输入框和复合选框列表。

每种表单控件都有 error, warning, success 等不同状态，Bootstrap还包括了控件禁用时的样式。

四种表单

Bootstrap为四种常用表单提供了简单的标记和样式

名称 | 类 | 描述
垂直式 (默认) | .form-vertical (非必填，默认) | 堆叠式的，所有控件的标签文字都左对齐
行式 | .form-inline | 标签文字左对齐，控件以inline-block紧凑形式存在
搜索式 | .form-search | 经典的搜索美化方案，对文本框进行圆化
水平式 | .form-horizontal | 左浮动，标签与其对应的控件居于同一行，标签文字右对齐

表单单例 仅仅使用表单控件，无须额外标记

基本表单

2.0版本开始使用更为简洁灵活的表单默认样式，只使用表单控件，无须额外标记。

相关提示信息

块状帮助文字...

<form class="well">
  <label>标签名称</label>
  <input type="text" class="span3" placeholder="请输入文字...">
  <span class="help-inline">相关提示信息</span>
  <p class="help-block">块状帮助文字...</p>
  <label class="checkbox">
    <input type="checkbox"> 选我选我
  </label>
  <button type="submit" class="btn">Submit</button>
</form>

表单表单

借鉴了Webkit的默认样式，使用 .form-search 圆化搜索文本框

<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">搜索</button>
</form>

行级表单

使用 .form-inline 和 .form-horizontal 将原始的块状文本框样式变成 inline-block。

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="邮件">
  <input type="password" class="input-small" placeholder="密码">
  <label class="checkbox">
    <input type="checkbox"> 记住我
  </label>
  <button type="submit" class="btn">登录</button>
</form>

水平布局表单

Bootstrap支持的控件

除了文本域之外，任何HTML5输入框都是该样式

标记的例子

根据上面的例子，这里将展示如何标记一个控件组。 需要用到 .control-group, .control-label, 和 .controls 类。

<form class="form-horizontal">
  <fieldset>
    <legend>完善资料</legend>
    <div class="control-group">
      <label class="control-label" for="input01">您的尊姓大名</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">字母，数字，汉字皆可</p>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="input01">您的twitter网址</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">请输入您的twitter网址，以便我们收录</p>
      </div>
    </div>
  </fieldset>
</form>
完善资料

字母，数字，汉字皆可

请输入您的twitter网址，以便我们收录

包含哪些控件

左侧即是bootstrap支持的所有默认表单控件:

  • 文本输入框 (文本，密码，邮件等等)
  • 复选框
  • 单选框
  • 下拉框
  • 多选框
  • 上传框
  • 文本域

2.0版对表单默认布局的改变

1.4版之前，Bootstrap使用水平布局做为默认表单样式。从2.0版开始，我们不再默认水平布局，而采用更灵活更易扩展的垂直式布局做为默认布局。

表单控件状态
不可编辑，只读
警告信息
错误信息
耶！
耶！

重新设计的浏览器状态

Bootstrap重新设计了浏览器本身所定义的 focused 和 disabled 状态。 我们去除了Webkit默认的 outline 并对 :focus 状态应用了 box-shadow 。

表单验证

Bootstrap还包含error,warning,success的验证样式。使用时将error类添加到控件外层的 .control-group 元素上即可。

<fieldset
  class="control-group error">
  …
</fieldset>

扩展表单控件

同样是使用 .span* 类来指定输入框大小

静态类指定的尺寸与栅格系统的尺寸并不匹配，且自适应响应式样式，只对几种控件有效(比如 input 和 select).

@

这里显示帮助信息

.00
这里显示帮助信息
$.00

注意 建议使用label标签将option选项包裹起来，这样可以提供更大的点击区域，提升表单可用性。

前置 & 后置输入框

带前置/后置文本的输入组更有助于我们为输入框提供更多内容。在左侧的例子中，我们用@表示Twiiter某人，用$表示货币。

单选框和复选框

在1.4版本之前，Bootstrap罗列单选框和复选框时，要将它嵌套到到其他标记内。 从2.0版开始，只须用 <label class="checkbox"> 包含 <input type="checkbox"> 即可。

Bootstrap也支持行级单选框和复选框。只要对 .checkbox 或 .radio 应用 .inline 即可。

行级表单的前置/后置文本

在行级表单中使用前置/后置文本的输入框时，一定要确认 .add-on 和 input 在同一行，之间不得有空行和间隔。

表单帮助/提示文本

对表单中的输入框添加帮助/提示文本时，添加 <span class="help-inline"> 就是使用行级帮助文本； 在输入框后添加 <p class="help-block"> 就是使用块状帮助文本。

按钮

按钮 | 类class="" | 描述
btn | 带渐变的标准灰色按钮
btn btn-primary | 视觉吸引力强，用于标识一组按钮中最主要的那个动作
btn btn-info | 可用于替换默认样式
btn btn-success | 表示操作成功或动作正确
btn btn-warning | 表示该动作应谨慎
btn btn-danger | 表示危险或有潜在威胁的动作。
btn btn-inverse | 做为补充的深灰色按钮，与具体行为或动作无关。

用于动作的按钮

一般习惯下，按钮只用于动作，而超链接则用于对象。 比如，“下载”应该是一个按钮，而“最近的活动” 则应该是一个链接

使用 .btn 可以将按钮样式应到任何元素。不过一般来说，我们只对 <a> 和 <button> 元素使用按钮样式

跨浏览器兼容

IE9不支持渐变背景色的圆角裁剪，我们只好去掉了这个特性。此外，IE9 还搞砸了 button 元素的禁用样式， 居然在渲染时使用一个丑陋的文本阴影修饰按钮的灰色文字，对此我们实在无能为力。

多种尺寸

使用 .btn-large, .btn-small, 或 .btn-mini 可以得到三种不同尺寸的按钮。

禁用状态

对超链接按钮添加 .disabled 类，或是在 <button> 元素中设置 disabled 属性，却可将其变成禁用状态。

首要链接 链接

注意! 我们把 .disabled 做为工具类来用，就象使用 .active 一样，因而无须添加.btn前缀。

按钮类可用于多种标签

可以在<a>, <button>, <input> 等元素上使用 .btn 类。

超链接按钮
<a class="btn" href="">超链接按钮</a>
<button class="btn" type="submit">
  button按钮
</button>
<input class="btn" type="button"
         value="input-button按钮">
<input class="btn" type="submit"
         value="input-submit按钮">

做为最佳实践，出于跨浏览器兼容的考虑，建议您根据内容为按钮选择最合适的元素。比如你正在使用 input ,就可以将按钮设计为 <input type="submit"> 。

图标 由 Glyphicons 友情提供

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal

使用css sprite

我们将所有图标放入一个文件中，这样就避免了每次使用不同图标时都发起额外的请求。 借助 background-position 修改背景位置，一整张图片可以显示出多个小图标。我们在twitter.com就是这么用的，效果不错。

和其他组件一样，出于命名和识别的方便，所有图标类都有一个 .icon- 前缀。 这样会避免与其他组件相冲突。

Glyphicons 允许我们在开源工具箱中使用他们设计的小型图标，前提是我们要在文档中提供链接和声明。 如果您的项目也使用了这组图标，不妨也这么做。

如何使用

Bootstrap用 <i> 标签显示图标。图标类只有一个共同的前缀，没有基准类。 用法如下：

<i class="icon-search"></i>

用 .icon-white 类显示反白图标：

<i class="icon-search icon-white"></i>

有120种图标可供显示，只须对 <i> 标签使用相应的图标类即可，完整图标列表在 sprites.less 文件中。

强调! 在图标毗邻文本时，比如buttons或导航链接，要保证在 <i> 与文本之间有空格。

使用场景

图标是个好东西，不过用在什么场合却是个值得商榷的问题。下面是一些适用场景：

  • 用于增强侧边导航栏的视觉效果
  • 用于制作纯图标的导航栏
  • 帮助用户理解按钮的作用
  • 帮助用户间通过链接分享内容

一般来说，任何可以使用 <i> 标签的地方，都可以将其变成图标

例子

可用在按钮，按钮组的工具条，导航栏或是输入框的前缀中。

用户
  • 修改
  • 删除
  • 禁止
  • 设为管理员

刷新 签出 删除

评论 设置 更多信息

  • 首页
  • 类库
  • 应用
  • 音乐

回到顶端

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译

开源依照 Apache License v2.0 发布。 文档依照 CC BY 3.0 发布。

Icons取自 Glyphicons Free，授权依照 CC BY 3.0。


组件 · Twitter Bootstrap中文版/中文翻译

  • 基础CSS
  • 组件
  • Javascript插件
  • 使用LESS
  • 定制
  • 译者言

组件

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 内。

按钮下拉菜单 基于按钮组提供下拉菜单

下拉按钮

简介和例子

下拉菜单中的按钮嵌套于 .btn-group 内。

  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接

标记例子

和按钮组类似，下拉按钮仍使用按钮标记，并用到少量其他标记以增强显示效果，同时支持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>

导航，标签页，胶囊链接 定制性强的列表导航

轻巧的默认项 同样的标记，不同的类

强大的基类

所有的导航组件，诸如标签页/胶囊链接/列表，使用同样的标记和样式 - .nav 类。

何时适用

标签页和胶囊链接非常适合内容片段的切换，或是相关内容的页面导航。

组件对齐

使用 .pull-left 或 .pull-right 对齐导航链接，两者都依赖CSS float实现左/右对齐。

基本的标签页

对存放链接的 <ul> 应用 .nav-tabs ：

  • 首页
  • 介绍
  • 消息
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

基本的胶囊链接

HTML不变，使用 .nav-pills ：

  • 首页
  • 介绍
  • 消息
<ul class="nav nav-pills">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

叠放式导航 竖直排放标签和胶囊链接

如何叠放

默认情况下标签和胶囊链接是水平排放的，使用 .nav-stacked 就可以将其变成竖直叠放。

叠放式标签

  • 首页
  • 介绍
  • 消息
<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

叠放式胶囊链接

  • 首页
  • 介绍
  • 消息
<ul class="nav nav-pills nav-stacked">
  ...
</ul>

下拉项 改良的导航组件

易用的富内容菜单

在Bootstrap中，创建标签和胶囊链接中的下拉菜单非常方便，仅需极少的HTML和一个轻巧的jQuery插件。

详见 初始化下拉项 。

带下拉项的标签页

  • 首页
  • 帮助
  • 下拉
    • 动作
    • 其他动作
    • 其他
    • 被间隔的链接
  • 上弹
    • 动作
    • 其他动作
    • 其他
    • 被间隔的链接
<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        下拉
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

带下拉的胶囊链接

  • 首页
  • 帮助
  • 下拉
    • 动作
    • 其他动作
    • 其他
    • 被间隔的链接
  • 上弹
    • 动作
    • 其他动作
    • 其他
    • 被间隔的链接
<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        下拉
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

导航列表 构建简单的叠放式导航，适用于侧边栏

应用风格（application-style）的导航

导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder类似）。

从结构上看，其与标签和胶囊链接无异，都使用同样的导航样式，所以用法和定制都一样简洁。

使用图标

在导航列表中使用图标很容易。只须添加带有图标类的 <i> 标签即可。

水平间隔

应用 .divider 的空列表项会显示为一个水平间隔，如下：

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

导航列表例子

对存放一组链接的列表使用 class="nav nav-list" :

  • 列表头
  • 首页
  • 类库
  • 应用
  • 另一个列表头
  • 介绍
  • 设置
  • 帮助
<ul class="nav nav-list">
  <li class="nav-header">
    列表头
  </li>
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">类库</a>
  </li>
  ...
</ul>

使用图标的例子

同样的例子，使用 <i> 标签显示图标。

  • 列表头
  • 首页
  • 类库
  • 应用
  • 另一个列表头
  • 介绍
  • 设置
  • 帮助
<ul class="nav nav-list">
  ...
  <li>
    <a href="#">
      <i class="icon-book"></i>
      类库
    </a>
  </li>
  ...
</ul>

标签页切换导航 通过javascript让标签生动起来

包含哪些东西

我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左。

应用时只需修改很少的标记。

标签页切换的例子

用带 .tabbable 的div将 .nav-tabs 嵌套起来：

  • 段 1
  • 段 2
  • 段 3

这里是段1

这里是段2

这里是段3

定制jQuery插件

所有标签页都依赖我们提供的轻量级jQuery插件。详见javascript中的关于标签页部分的文档。

获取javascript →

简洁的标读

使用标签切换页，需要一个最外层的div，一组标签，以及一组存放内容的容器

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#1" data-toggle="tab">章节 1</a></li>
    <li><a href="#2" data-toggle="tab">章节 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="1">
      <p>这里是章节 1.</p>
    </div>
    <div class="tab-pane" id="2">
      <p>这里是章节 2.</p>
    </div>
  </div>
</div>

在多个方向上使用标签切换页

标签置底

反转HTML的顺序，用 .tabs-below 将标签居底。

这里是章节A

这里是章节B

这里是章节C

  • 第1节
  • 第2节
  • 第3节
<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

标签居左

使用 .tabs-left 将标签居左。

  • 第1节
  • 第2节
  • 第3节

这里是章节A

这里是章节B

这里是章节C

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

标签居右

使用 .tabs-right 将标签居右。

  • 第1节
  • 第2节
  • 第3节

这里是章节A

这里是章节B

这里是章节C

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

导航条

静态导航条的例子

带有项目名称，导航和搜索表单的静态导航条的例子。

项目名称
  • 首页
  • 链接
  • 链接
  • 链接
  • 下拉
    • 动作
    • 另一个动作
    • 其他动作
    • 导航头
    • 被间隔的链接
    • 另一个链接
  • 链接
  • 下拉
    • 动作
    • 另一个动作
    • 其他动作
    • 导航头
    • 被间隔的链接
    • 另一个链接

导航条基本框架

需要少量的div来构建静态static或是固定fixed的导航条。

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      ...
    </div>
  </div>
</div>

固定导航条

只要在最外层的div上应用 .navbar ，就可以将导航条固定到顶部或是底部。

<div class="navbar navbar-fixed-top">
  ...
</div>

<div class="navbar navbar-fixed-bottom">
  ...
</div>

附着导航条时，一定要留出一块空白区域，在 <body> 的顶端添加40px或是更多的padding。 要保证将这段样式加在Bootstrap核心CSS之后，在响应式CSS（可选的）之前。

品牌名称

用于展示品牌或项目名称的一个简单链接，只需要一个锚标签。

项目名称
<a class="brand" href="#">
  品牌名称
</a>

导航条中的表单

导航条内的表单，用 .navbar-form 进行样式化，由 .pull-left 或 .pull-right 决定居左还是居中。

项目名称
  • 首页
  • 链接
  • 链接
  • 链接
<form class="navbar-form pull-left">
  <input type="text" class="span2">
</form>

对导航栏应用 .navbar-search 的同时对其中的输入框使用 .search-query ，就会得到另一种搜索样式，从而增强搜索表单的可定制性。

项目名称
  • 首页
  • 链接
  • 链接
  • 链接
<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

响应性的补充（可选）

如果我们想根据置顶导航条中的不同内容实现响应性设计，就可以将导航内容嵌套在一个 .nav-collapse.collapse div容器中，并对按钮都应用 .btn-navbar 类。

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>
强调！ 响应式导航条需要 切换插件。

导航链接

导航项与无序列表非常相似。

<ul class="nav">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">链接</a></li>
  <li><a href="#">链接</a></li>
</ul>

将应用 .divider-vertical 的空列表项插入到两个链接项之间，就会得到分隔条：

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

组件对齐

我们使用 .pull-left 或 .pull-right 对齐链接，搜索表单或是文本。这两个类都使用CSS浮动进行对齐。

添加下拉菜单

在导航中很容易添加上下拉菜单，要用到 下拉javascript插件 。

<ul class="nav">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          帐户
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

下载相关javascript →

导航条中的文本

在导航条中用 <p> 标签包装文本以设置行高和颜色。

面包屑导航条

为什么使用面包屑导航条

面包屑导航栏用于展示用户当前在网站/应用中的位置，但并不是首要导航。适宜布局清爽，简洁明了的场合。

例子

一个简单的例子，可以用在多个页面中。

  • 首页
  • 首页 /
  • 类库
  • 首页 /
  • 类库 /
  • 数据

标记

使用无序号的ul列表。

<ul class="breadcrumb">
  <li>
    <a href="#">首页</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="#">类库</a> <span class="divider">/</span>
  </li>
  <li class="active">数据</li>
</ul>

页码 使用两个参数对内容进行分页

多页码分页

何时适用

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

页码链接的状态

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

灵活的对齐方式

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

例子

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

  • «
  • 1
  • 2
  • 3
  • 4
  • »
  • «
  • 10
  • 11
  • 12
  • »
  • ←
  • 10
  • ...
  • 20
  • →
  • 1
  • 2
  • 3
  • 4
  • 5

标记

分页标记是一个嵌套在 <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>

回到顶端

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译

开源依照 Apache License v2.0 发布。 文档依照 CC BY 3.0 发布。


下载 · Twitter Bootstrap中文版/中文翻译

  • 使用LESS
  • 定制
  • 译者言

定制并下载

下载完整库 或通过选择组件，javascript插件以及你所需的附件定制你自己的Bootstrap。

  • 1. 选择组件
  • 2. 选择jQuery插件
  • 3. 自定义变量
  • 4. 下载
全选/全不选

1. 选择组件 获取你想要的CSS

框架

基础CSS

组件

JS组件

杂项

响应式

全选/全不选

2. 选择jQuery插件 快速添加所需的javascript

注意！

所有被选中的插件都会被集中编译成一个单独的bootstrap.js文件，且依赖于最新版本的 jQuery 。

重置为默认值

3. 自定义变量 修改Bootstrap而无须编译

框架

链接

颜色

图片合并

栅格系统

流式栅格系统

段落

表格

导航栏

下拉

表单

表单状态 & 警告

4. 下载

定制并下载

有如下内容:

下载内容包括：编译后的CSS，编译和修改后的CSS，编译后的jQuery插件。出于方便，将其打包成一个zip文件。

Back to top

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat.


例子 · Twitter Bootstrap中文版/中文翻译

  • 例子
  • 译者言

Bootstrap 入门案例

Bootstrap提供了一些基础例子，以便于快速上手。我们鼓励用户对这些例子进行扩展，而不是简单地照搬。

  • 基本的市场类市场

    由一个主角单元(hero unit)强调首要内容，搭配三个辅助区动。

  • 流式布局

    使用流动栅格系统，符合响应式设计的无缝流式布局。

  • 初始模板

    包含所有Bootstrap样式和js的空白HTML文档。

回到顶端

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译


Bootstrap中文版-Bootstrap中国

Bootstrap

基于HTML，CSS，JAVASCRIPT的简洁灵活的
流行前端框架及交互组件集

访问 GitHub 项目 下载 Bootstrap (v2.0.2)

  • 从 1.4 版升级
  • 下载文档
  • 提交问题
  • 路线图和更新日志

适用于任何场景，适用于每一个人

需要理由来爱上Bootstrap么？那就请接着向下看。

由匠人建，为匠人用

和您一样，我们乐于创造出色的web应用，于是想帮助更多象我们一样的匠人更为高效快捷地构建产品。Bootstrap因此而生。

适应各种技术水平

Bootstrap适应不同技术水平的从业者，无论是设计师还是程序员，大牛还是菜鸟。既能用来开发简单的小东西，也能构造更为复杂的应用。

跨设备，跨浏览器

最初设想中的Bootstrap只支持现代浏览器，不过新版本已经能支持所有主流浏览器（甚至包括IE7）。从Bootstrap 2开始，提供对平板和智能手机的支持。

12列栅格布局

栅格系统不是万能的，不过在应用的核心层有一个稳定和灵活的栅格系统确实可以让开发变得更简单。可以选用内置的栅格或是自己手写。

响应式设计

从Bootstrap 2开始，提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放，从而提供一致性的用户体验。

样式化的文档

与其他前端工具箱不同，Bootstrap优先设计了一个样式化的使用指南，不仅用来介绍特性，更用以展示最佳实践，应用以及代码实例。

不断完善的库

尽管只有10kb(gzip压缩后)，Bootstrap却仍是最完备的前端工具箱之一，提供了几十个全功能的随时可用的组件。

定制的jQuery插件

一个出色的组件设计岂能没有易用易扩展的人机界面？Bootstrap为此提供了定制的jQuery内置插件。

用LESS构建

当传统的枯燥CSS写法止步不前时，LESS横空出世了。LESS中使用变量，嵌套，操作，混合编码，花费很小成本却让书写CSS更快更灵活。

HTML5

支持HTML5标签和语法

CSS3

逐步改进组件达到最终效果

开源

全部托管于 GitHub.

Twitter制造

由经验丰富的工程师和设计师奉献

Bootstrap案例

更多案例请查看 非官方bootstrap站

回到顶端

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译


Javascript · Twitter Bootstrap中文档/中文翻译

Bootstrap的Javascript

让Bootstrap的组件变得生动—提供了12种 jQuery 组件。

  • 所有插件
  • 对话框
  • 下拉项
  • 滚动侦测
  • 标签页
  • 工具提示
  • 弹出提示
  • 通知
  • 按钮
  • 折叠
  • 轮播
  • 输入提醒

jQuery插件 12个Bootstrap插件的简短介绍

强调！ 所有的javascript插件都需要最新版本的jQuery支持。

对话框 bootstrap-modal.js

模态对话框介绍

类似传统的javascript模态对话框，但更圆滑更灵活，带有最基本的功能和智能默认项。

Download file

静态的例子

下面就是一个静态渲染的模态对话框。

×

对话框标题

天朝，你好....

关闭 保存更改

动态的例子

点击下的按钮会通过javascript触发一个模态对话框。对话框从页面顶端滑下的同时逐渐呈现。

×

对话框标题

对话框文字

高考临近，湖北孝感惊现史上最刻苦“吊瓶班”。这是昨日孝感市第一高级中学某晚自习教室的一幕，"吊瓶高考班"轰动全校！不知台上的老师面对如此震撼的场面和沁人心脾的药水味，如何站稳脚跟hold住全场呢？该校学生表示，备战高考，补充能量挨几针也是值得的，你hold住了吗？

对话框中的弹出提示

学生真不易 把鼠标放上来试试？

对话框中的工具提示

5月1日，济南一名城管要对一位抱着三四岁孩子的女商贩扣留时候发生争执。争执中女商贩抱着孩子给城管下跪,城管见状也向女商贩跪下。事后城管称，下跪是为了与对方“平等对话”,也怕对孩子心理产生不良影响。

对溢出文本使用可选的滚动条

我们对 .modal-body 样式修正了 max-height 。对于超过高度的内容就会显示滚动条。

南京街头某家麦当劳门口，一个外国人买了两包薯条，分给乞讨的老奶奶一包，两人席地而坐，开心地吃着聊着。

@说书者一枚 ：《帝都日爆》射论：《从麦当劳事件看美国小伙的拙劣表演》：这位美国小伙拙劣的”亲民民主表演“，再次印证了中国的古语“黄鼠狼给鸡拜年没安好心”。这道貌岸然的潜伏”美国政客“，想用糖衣炮弹瓦解坚强的中国无产阶级老奶奶，必定遭到中国人民的唾弃！不要做自取其辱的丑事！（完，完蛋的完）

4日晚，东莞东城海雅百货前，一女子被偷包，巴西籍男子MOZEN阻止，遭小偷团伙报复群殴。其间数十名路人在场，无人施救。MOZEN说，小偷打他，他觉得正常，可没有任何人帮他，让他觉得不正常，“这个社会是需要互相帮助的，我整天出没在君豪商业中心，中心几乎大部分人都认识我，却没有一个人帮我，这让我觉得很失望，很心寒”。

MOZEN说，海雅百货这一带治安很乱，这已经不是他第一次阻止小偷行窃了，早在今年春节前，他就曾扑倒过一个小偷。可有了这一次的经历，如果下回再碰上类似情况，他不会也不敢再帮忙了。

美国总统富兰克林·罗斯福1942年6月14日美国国旗纪念日广播演讲：“我们所有人都是地球的子孙，有些道理不言而喻，如果我们的兄弟在遭受压迫，我们也将遭受压迫，如果他们在忍饥挨饿，我们也将忍饥挨饿，如果他们的自由权利被剥夺，我们的自由也将不复存在......http://t.cn/aDoq5K

关闭 保存更改
点击演示

使用 bootstrap-modal

×

有遮蔽背景

backdrop为true

有遮蔽背景，点击背景即可关闭对话框。

关闭 保存更改
×

无遮蔽背景

backdrop为false

对对话框背景使用 static ，无遮蔽，不支持背景click关闭对话框。

关闭 保存更改
×

按ESC键关闭对话框

keyboard为true

按ESC可以关闭对话框，按ESC试试

关闭 保存更改
×

按ESC键无法关闭对话框

keyboard为false

按ESC不能关闭对话框，按ESC试试

关闭 保存更改
×

手动触发/关闭对话框

手动触发/关闭

再点击一次按钮就会关闭对话框

关闭 保存更改

通过javascript调用模态对话框：

$('#myModal').modal(options)

选项(options)

$('#myModal').modal({
    backdrop:true,
    keyboard:true,
    show:true
});
名称 | 类型 | 默认 | 描述
backdrop | 布尔值 | true | 为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。点击演示 为false时，无背景。点击演示
keyboard | 布尔值 | true | 为true时按下ESC键关闭模态对话框。点击演示 为false时无效。点击演示
show | 布尔值 | true | 是否在初始化时显示对话框。

标记

我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 data-toggle="modal" ，然后将 data-target="#foo" 或 href="#foo" 设为某个对话框元素的id，这样点击激发元素就会弹出对话框。

<a class="btn" data-toggle="modal" href="#myModal" >点击触发对话框</a>

如果需要带选项的对话框，可以在激发元素或是对话框元素的data-属性中设置选项值。 点击"无ESC关闭，无遮蔽背景"演示

<a class="btn" data-toggle="modal" href="#myModal"  data-keyboard="false" data-backdrop="false" >点击"无ESC关闭，无遮蔽背景"演示</a>

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>对话框标题</h3>
  </div>
  <div class="modal-body">
    <p>对话框内容</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">关闭</a>
    <a href="#" class="btn btn-primary">保存更新</a>
  </div>
</div>
强调！ 要实现对话框显示与消隐时的动画效果，必须包含 bootstrap-transition.js.，再对 .modal 元素应用 .fade ，即可实现淡入淡出。

方法

.modal(options)

将某个元素变成对话框激活，接受一个 object 做为可选参数。

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

手动切换对话框打开和关闭。点击演示

$('#myModal').modal('toggle')

.modal('show')

打开对话框

$('#myModal').modal('show')

.modal('hide')

关闭对话框

$('#myModal').modal('hide')

事件

Bootstrap的对话框类扩展了一组事件，可以介入对话框的某些功能实现。

事件 | 描述
show | 该事件在调用 show 方法时立刻触发。
shown | 该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。
hide | 该事件在对话框使用 hide 方法时立刻触发。
hidden | 该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。
$('#myModal').on('hidden', function () {
  // do something…
})

下拉项 bootstrap-dropdown.js

下拉项介绍

这个简单的插件几乎可以给Bootstrap的任何组件添加下拉项。 Bootstrap导为航栏，标签页和胶囊链接提供完整的下拉菜单特性。

下载文件

例子

点击下面的导航栏链接和胶囊链接以测试下拉项。

项目名称
  • 下拉
    • 动作
    • 另一个动作
    • 其他
    • 另一个链接
  • 下拉
    • 动作
    • 另一个动作
    • 其他
    • 另一个链接
  • 下拉
    • 动作
    • 另一个动作
    • 其他
    • 另一个链接
  • 规则的链接
  • 下拉
    • 动作
    • 另一个动作
    • 其他
    • 另一个链接
  • 下拉
    • 动作
    • 另一个动作
    • 其他
    • 另一个链接
  • 下拉
    • 动作
    • 另一个动作
    • 其他
    • 另一个链接

使用bootstrap-dropdown.js

通过javascript调用下拉项：

$('.dropdown-toggle').dropdown()

标记

包含bootstrap-dropdown.js，然后设置 data-toggle="dropdown" 可以为任何元素添加并激活下拉项

强调！ 可以使用 data-target="#id" 或 href="#id" 激活某个下拉项，如下
  • 规则的链接
  • 下拉项
    • 动作
    • 另一个动作
    • 其他
    • 被间隔的链接
  • 点击我看看
<ul class="nav nav-pills">
  <li><a href="#">规则的链接</a></li>
  <li class="dropdown" id="menutest1">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1">
      下拉项
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">动作</a></li>
      <li><a href="#">另一个动作</a></li>
      <li><a href="#">其他</a></li>
      <li class="divider"></li>
      <li><a href="#">被间隔的链接</a></li>
    </ul>
  </li>
  <li class='active'>
    <a data-toggle="dropdown" href="#menutest1">点击我看看</a>
  </li>
</ul>

方法

$().dropdown()

用于激活某个导航条/标签页导航栏下的菜单

滚动侦测 bootstrap-scrollspy.js

滚动侦测会根据当前滚动条位置而自动更新导航栏中的链接状态。

下载文件

使用滚动侦测的导航条例子

滚动下面的内容区域，然后观察导航条状态，导航条中的菜单甚至下拉项都会同步高亮。试一下！

项目名称
  • 红利
  • 哈芬
  • 党国大事
    • 遛狗
    • 失踪
    • 耳光

红利

中方向美方承诺提高国有企业红利上缴比例，增加上缴利润的中央国企和省级国企的数量，将国有资本经营预算纳入国家预算体系。还承诺，鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。

美方认为，提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支，从而有可能降低中国人大量储蓄的必要性，让他们提高消费支出，从而达到刺激中国内需的目的。

哈芬

据估，中国高铁槽道市场约十几亿元，德国哈芬占70%。业内人士称，中铁设计院的铁道图纸，直接指定使用哈芬，而非技术标准。哈芬在德国使用成本高昂的不锈钢，在中国则是碳钢。更有业内人士证实，目前中国高铁用的实为国内生产，原产几乎不足四分之一。（财新）

遛狗

近日，拍摄于四川绵阳街头的一张照片引起热议，一辆在路上行驶的法院警车，车窗里伸出一个宠物狗的脑袋，四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知，这是我国新近引进的一批特殊品种警犬，为麻痹犯罪分子，故意化妆成宠物狗的样子。

失踪

4月25日，19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时，竟然发现这一区域已先后有8名青少年失踪，其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车，被扔进黑砖窑强迫劳动，后逃离黑砖窑重获自由。

耳光

30多岁女人直接吐东西在刚扫过的地上，环卫大姐上去说了两句，结果挨了三巴掌三脚。见到被打的环卫大姐时，她精神不好，坐在凳子上不说话，左脸的伤痕还很显眼，工友在一旁照料她。2012年5月4日，浙江省，杭州市。

尹大姐说：“小孩子都知道不能在街上乱吐。”那女人说：那不就是你们环卫应该做的事情吗？尹大姐说：难道我们环卫工人就低人一等吗？”话音刚落，“啪”“啪”“啪”三个巴掌落在尹大姐脸上。

使用bootstrap-scrollspy.js

通过javascript调用滚动侦测：

$('#navbar').scrollspy()

标记

在想侦测的元素(往往是body)上添加 data-spy="scroll" 就很容易在置顶导航条上实现滚动侦测。

<body data-spy="scroll" >...</body>
强调！ 导航条链接必须指向一个可解析的元素id。举个例子，导航中的 <a href="#home">home</a> 必须对应着dom中一个真实存在的id='home'元素，比如 <div id="home"></div> 。

选项

名称 | 类型 | 默认 | 描述
offset | 数字 | 10 | 计算滚动位置时相对顶端的偏移量

可切换的标签页 bootstrap-tab.js

该插件通过点击标签页和胶囊链接切换显示不同容器中的内容。

下载文件

标签页例子

点击下面的标签(包括下拉菜单项)切换显示不同面板中的内容。

  • 首页
  • 介绍
  • 下拉
    • 智慧
    • 夜壶

5月6日，北京，一对新人启用直升机接亲。该直升机是欧洲直升机公司系列，机型为AS350B3，该公司北京唯一可承接低空飞行业务的航空公司，此次为首次承接婚礼。据悉，首次空中婚礼总费用为5万元。定价包括飞行时间和申报审批等费用，飞行时间按照1小时3万元计算。

法国代表社会党参选的奥朗德今晨在大选中获得胜利，成为法兰西第五共和国第七位总统，法国也在17年之后迎来首位左翼总统。萨科齐在5年任内因政绩不佳引发不满，选前处于民调落后的劣势。萨科齐虽试图打造“危机总统”形象，但终未能实现逆转。奥朗德现年58岁，至今未婚，与社会党前总统选举候选人罗亚尔同居30多年，育有4子女，多年来坚持骑车上下班。对华关系持强硬立场。

平壤某鱼肉样板店经理日云硕（音），在去年金正日和金正恩来店视察时，曾目睹这样一幕：金正恩将父亲让进电梯，然后自己嗖嗖地爬上三层楼梯，电梯再次打开时，他立正向父亲致意。日云硕动情地回忆说：“我被他的忠诚与智慧折服了...”

不是政府人士，永远不要去做政府的吹鼓手，因为吹鼓手在政府眼里永远只值一个夜壶铜钿，尿急了拿出来用一下，用完了将夜壶放到最角落地方；你吹得越起劲，不仅公众看不起你，政府更看不起你，所以吹鼓手都没有好下场。-----杜月笙

使用bootstrap-tab.js

通过javascript启动可切换的标签页：

$('#myTab').tab('show')

标记

在某个元素上设置 data-toggle="tab" 或 data-toggle="pill" 而无须编写javascript，就可以激活标签页或是胶囊链接

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">首页</a></li>
  <li><a href="#profile" data-toggle="tab">介绍</a></li>
  <li><a href="#messages" data-toggle="tab">消息</a></li>
  <li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>

方法

$().tab

激活一个标签页元素和内容容器。标签页应该含有 data-target='#id' 或 href='#id' 属性以指向dom中的某个容器节点。

<ul class="nav nav-tabs">
  <li class="active"><a href="#home">首页</a></li>
  <li><a href="#profile">介绍</a></li>
  <li><a href="#messages">消息</a></li>
  <li><a href="#settings">设置</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>
  $(function () {
    $('.tabs a:last').tab('show')
  })
</script>

事件

事件 | 描述
show | 该事件在标签开始展示时（尚未渲染完之前）触发。 event.target 指向要激活的标签， event.relatedTarget 提向之前已激活的标签（如果有的话）。
shown | 该事件在标签已经呈现后（已渲染完成）触发。 event.target 指向要激活的标签， event.relatedTarget 提向之前已激活的标签（如果有的话）。
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

工具提示 bootstrap-tooltip.js

工具提示介绍

受Jason Frame所写的出色的jQuery.tipsy插件所启发，我们编写了工具提示。做为前者的升级版，工具提示不依赖于图像， 使用css3显示动画效果，利用data-属性对标题做本地化存储。

下载文件

工具提示的用例

鼠标经过下面链接时显示工具提示：

“这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。” ——柴静《看见》专访卡梅隆

使用bootstrap-tooltip.js

通过javascript触发工具提示：

$('#example').tooltip(options)

选项

名称 | 类型 | 默认 | 描述
animation | 布尔值 | true | 为工具提示添加一个淡入的过渡。
placement | 字符串或函数 | 'top' | 工具提示的位置：top | bottom | left | right。
selector | 字符串 | false | 如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
title | 字符串或函数 | '' | 如果'title'属性不存在的话，就使用该值做为默认的标题。
trigger | 字符串 | 'hover' | 工具提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)
delay | 数字或对象 | 0 | 显示和隐藏时的延迟时间(以毫秒计) 如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。 如果是一个对象，其结构就是: delay: { show: 500, hide: 100 }
强调！ 每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能

标记

出于性能的考虑，在使用工具提示和弹出提示时建议利用data-属性，再指定一个selector选项即可。

<a href="#" rel="tooltip" title="first tooltip">鼠标经过时生效</a>

方法

$().tooltip(options)

对某个元素集合添加工具提示的处理。

.tooltip('show')

显示某个元素的工具提示。

$('#element').tooltip('show')

.tooltip('hide')

隐藏某个元素的工具提示。

$('#element').tooltip('hide')

.tooltip('toggle')

切换某个元素的工具提示的隐藏和显示状态。

$('#element').tooltip('toggle')

弹出提示 bootstrap-popover.js

弹出提示介绍

与iPad上的效果类似，把存放输助信息的元素显示为弹出框提示。

* 需要包含 Tooltip 。

下载文件

鼠标经过时的弹出提示例子

鼠标经过按钮时切换弹示提示的显示/隐藏。

鼠标经过弹出提示

使用 bootstrap-popover.js

使用javascript启用弹出提示：

$('#example').popover(options)

选项

名称 | 类型 | 默认 | 描述
animation | 布尔值 | true | 为弹出提示添加一个淡入的过渡。
placement | 字符串或函数 | 'right' | 弹出提示的位置：top | bottom | left | right。
selector | 字符串 | false | 如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
trigger | 字符串 | 'hover' | 弹出提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)
title | 字符串或函数 | '' | 如果元素没有指定'title'属性，就使用该值做为默认的标题。
content | 字符串或函数 | '' | 如果元素没有指定'data-content'属性，就使用该值做为默认的内容。
delay | 数字或对象 | 0 | 显示和隐藏时的延迟时间(以毫秒计) 如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。 如果是一个对象，其结构就是: delay: { show: 500, hide: 100 }
强调！ 每个弹出提示都可以单独通过设置data-属性以实现与javascript调用同样的功能

标记

每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能

方法

$().popover(options)

对某个元素集合添加弹出提示。

.popover('show')

显示某个元素的弹出提示。

$('#element').popover('show')

.popover('hide')

隐藏某个元素的弹出提示。

$('#element').popover('hide')

.popover('toggle')

切换某个元素的弹出提示的隐藏和显示状态。

$('#element').popover('toggle')

通知消息 bootstrap-alert.js

通知消息介绍

通知插件使用轻巧的类以实现关闭通知框的功能。

下载文件

通知的的例子

通知插件用在规则的通知消息或块状消息上。

× 警告！ 在贵国遵守宪法就要违反刑法。
×

微博控们注意了！

出游微博晒幸福时，最好不要泄露出游时间、人数，别泄露住址，谨慎晒出游照片，以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博，“随着微博的发展，贼也很时尚啊！”

接受建议 不当回事

使用 bootstrap-alert.js

通过javascript触发通知：

$(".alert").alert()

标记

只须对关闭按钮添加 data-dismiss="alert" 就会自动实现一个通知的关闭功能。

<a class="close" data-dismiss="alert" href="#">&times;</a>

方法

$().alert()

对所有通知消息赋予关闭功能。在要关闭时使用动画效果，就要在通知上应用 .fade 和 .in 。

.alert('close')

关闭通知

$(".alert").alert('close')

事件

Bootstrap的通知类扩展了一组事件，可以介入通知的某些功能实现。

事件 | 描述
close | 在调用 close 方法时立刻触发。
closed | 在通知已经关闭后（等待css过渡效果完成）触发。
$('#my-alert').bind('closed', function () {
  // do something…
})

按钮 bootstrap-button.js

按钮介绍

控制按钮的状态或者为其他复合控件(比如工具条)创建按钮组。

下载文件

例子

使用按钮插件触发开关和更改状态。

状态
单独开关
复选
单选

使用 bootstrap-button.js

通过javascript触发按钮：

$('.tabs').button()

标记

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

<!-- Add data-toggle="button" to activate toggling on a single button -->
<button class="btn" data-toggle="button">单独开关</button>

<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
</div>

<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
</div>

方法

$().button('toggle')

切换按下状态。改变按钮的外观为已经激活(按下)的样子。

强调！ 可以使用 data-toggle 属性自动设置按钮状态。
<button class="btn" data-toggle="button" >…</button>

$().button('loading')

设置按钮为载入状态 - 按钮无效且将文本变成载入文本 载入文本应该设置在按钮的 data-loading-text 的属性中。

<button class="btn" data-loading-text="正在载入..." >...</button>
强调！ Firefox在页面载入时会保持按钮无效状态。 变通方案是在按钮上应用 autocomplete="off" 。

$().button('reset')

重置按钮状态 - 将按钮文字复原。

$().button(string)

重置按钮状态 - 将按钮文字变成为指定的文字。

<button class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

折叠 bootstrap-collapse.js

折叠介绍

为可折叠的组件(比如手风琴式应用，导航栏)提供基本的样式和灵活的支持。

下载文件

手风琴式应用的例子

使用折叠插件构造手风琴式的边栏：

国土问题
前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，全是敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词。
门票问题
目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
超生罚款
学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。

使用 bootstrap-collapse.js

通过javascript启用：

$(".collapse").collapse()

选项

名称 | 类型 | 默认 | 描述
parent | 选择器(selector) | false | 如果指定了选择器，那么在显示折叠顶时，所有被选取的元素集合中的可折叠项都被关闭（与传统的手风琴应用相似）。
toggle | 布尔值 | true | 切换可折叠元素

标记

只要在元素上添加 data-toggle="collapse" 和 data-target 就能自动变成可折叠的。 data-target 属性接受一个css选择器，以选取元素添加折叠。 一定要在折叠元素上添加 .collapse 。如果要默认某折叠元素是打开的，只要添加 .in 。

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  简单手风琴效果
</button>

<div id="demo" class="collapse in"> … </div>
强调！ 若要对某个折叠控件添加手风琴风格的分组管理，就要添加 data-parent="#selector" 。详见上面的演示。

方法

.collapse(options)

把内容元素转换为一个可折叠组件。接受一个 object 对象做为可选参数。

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

切换一个可折叠元素的状态：显示还是隐藏。

.collapse('show')

显示一个可折叠元素。

.collapse('hide')

隐藏一个可折叠元素。

事件

Bootstrap的折叠类扩展了一组事件，可以介入折叠的某些功能实现。

事件 | 描述
show | 该事件在调用 show 实例方法时立刻触发。
shown | 该事件在可折叠元素已经呈现给用户后触发（等待CSS过渡效果完成）。
hide | 该事件在调用 hide 方法时立刻触发。
hidden | 该事件在可折叠元素已经在用户面前完全隐藏后触发（等待CSS过渡效果完成）。
$('#myCollapsible').on('hidden', function () {
  // 做点hidden之后的事情
})

轮播 bootstrap-carousel.js

滑动介绍

一个创建跑马灯效果，循环展示元素的通用插件。

下载文件

轮播的例子

观察下面的幻灯片

即使杀光所有报晓的公鸡，天，还是会亮的

@shifeike: 昨天是李尚平被枪杀10周年，我发的那条纪念微博，成为我的新浪微博账号最后一条微博。这个2010年1月为反对红中抢笔而注册的微博，两年多时间里发了14538条微博，加上被删除的差不多近200万字，积累了96269条粉丝，自此灰飞烟灭。

如果人民不欢迎我们，就该我们下台了

被敏感词吓尿了!敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词

国家像需要空气一样需要变革

据戈尔巴乔夫基金会新闻处通报，俄总统梅德韦杰夫今天向前苏联总统戈尔巴乔夫颁发圣徒安德烈·佩尔沃兹万内勋章。戈尔巴乔夫在受勋时表示感谢，并称很激动。他坦言，对自己做过的事情问心无愧。他强调，他进行改革不是为了赢得敬重和荣誉，而是因为认识到，“国家像需要空气一样需要变革”。他承认犯过错误，并至今还在为这些错误而烦恼。但他认为：“短短几年所走过的路，使专制的过去永远成为了历史。”

‹ ›
强调！ 实现轮播时，请移除我们提供的图片，替换为你自己的。

使用 bootstrap-carousel.js

通用javascript调用：

$('.carousel').carousel()

选项

名称 | 类型 | 默认 | 描述
interval | 数字 | 5000 | The amount of time to delay between automatically cycling an item.
pause | 字符串 | "hover" | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

标记

可以使用data-属性提供前后翻页控件，如下：

<div id="myCarousel" class="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

方法

.carousel(options)

初始化轮播组件，接受一个 object 做为可选参数并开始循环播环。

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

从左向右循环播放。

.carousel('pause')

中止播放。

.carousel(number)

播放到某个特定的帧(与数组类似，从0开始计数)。

.carousel('prev')

回到上一帧。

.carousel('next')

回到下一帧。

事件

Bootstrap的轮播类提供了两个事件以介入轮播功能。

事件 | 描述
slide | 该事件在调用 slide 实例方法时立刻触发。
slid | 该事件在轮播项切换效果完成之后触发。

输入提醒 bootstrap-typeahead.js

输入提醒介绍

简单，易于拓展，可迅速地为表单中的文本输入框创建优雅的提醒。

下载文件

例子

在下面的输入框键入字符，观察提醒列表。

使用 bootstrap-typeahead.js

通过javascript调用输入提醒：

$('.typeahead').typeahead()

选项

名称 | 类型 | 默认 | 描述
source | 数组 | [ ] | 用于查询的数据源。
items | 数字 | 8 | 下拉列表中的最多显示个数。
matcher | 函数 | 不区分大小写 | 该matcher函数用于决定某个查询是否匹配某个项。 它接受唯一一个参数， item ，用于测试是否符合查询。 通过 this.query 访问当前查询，如果匹配查询，就返回一个布尔值 true 。
sorter | 函数 | 精确匹配， 区分大小写， 不区分大小写 | 该函数用来排序自动完成的结果。 它接受唯一一个参数 items ，还拥有输入提醒的范围。使用 this.query 引用当前查询。
highlighter | 函数 | 高亮所有默认的匹配 | 该函数用来高亮自动完成的结果。 它接受唯一一个参数 items ，还拥有输入提醒的范围。应该返回html。

标记

使用data-属性为一个元素加入输入提醒功能。

<input type="text" data-provide="typeahead">

方法

.typeahead(options)

使用输入提醒初始化一个输入框。

回到顶端

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译


Less · Twitter Bootstrap中文版/中文翻译

在Bootstrap中使用LESS

我们使用 LESS (一种CSS预处理器)定制和扩展Bootstrap。 LESS充分利用变量，混合以及其他有用的工具来构建Bootstrap的CSS。

  • 使用LESS
  • 变量
  • 混合
  • 编译Bootstrap

使用LESS

为什么使用LESS?

Bootstrap使用LESS构造核心，LESS是由我们的好友 Alexis Sellier 创造的一种动态样本表语言。 它让系统底层的CSS开发变得更快捷高效，更有生趣。

包括什么?

做为CSS的扩展，LESS包括变量，可重用代码段的混合，简单的数学操作，内嵌，以及颜色方法等等。

了解更多

详见LESS官网 http://lesscss.org 。
详见LESS中国官网 http://lesscss.net 。

变量

没有使用LESS之前，在CSS中管理颜色和像素值是个痛苦的事情，通常充斥着复制粘贴操作。现在可以借助LESS将颜色和像素值声明为变量，并对其一次性赋值。

混合

需在一个规则的ol的CSS中声明三种边框圆角时怎么办？借助混合，可以将它们写到一行，然后在其他地方重用。

运算

通过数学运算可以即时灵活地调整栅格尺寸和行间距。借助加减乘除，将CSS变更有条理。

Bootstrap变量 LESS变量和变量值，以及用法指南

超链接

@linkColor | #08c | 默认的链接颜色
@linkColorHover | darken(@linkColor, 15%) | 默认悬停时的链接颜色

栅格系统

@gridColumns | 12
@gridColumnWidth | 60px
@gridGutterWidth | 20px
@fluidGridColumnWidth | 6.382978723%
@fluidGridGutterWidth | 2.127659574%

排版

@baseFontSize | 13px
@baseFontFamily | "Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight | 18px

灰度色

@black | #000
@grayDarker | #222
@grayDark | #333
@gray | #555
@grayLight | #999
@grayLighter | #eee
@white | #fff

强调色

@blue | #049cdb
@green | #46a546
@red | #9d261d
@yellow | #ffc40d
@orange | #f89406
@pink | #c3325f
@purple | #7a43b6

组件

按钮

@primaryButtonBackground @linkColor

表单

@placeholderText @grayLight

导航栏

@navbarHeight | 40px
@navbarBackground | @grayDarker
@navbarBackgroundHighlight | @grayDark
@navbarText | @grayLight
@navbarLinkColor | @grayLight
@navbarLinkColorHover | @white

表单状态和通知

@warningText | #c09853
@warningBackground | #f3edd2
@errorText | #b94a48
@errorBackground | #f2dede
@successText | #468847
@successBackground | #dff0d8
@infoText | #3a87ad
@infoBackground | #d9edf7

Bootstrap 混合

关于混合

基本的混合

基本的混合从本质上来说，就是包括整个或是部分代码片段。写法类似一个CSS类，可以随处调用。

.element {
  .clearfix();
}

带参数的混合

带参数的混合和基本混合很像，不同之处是前者可以接收参数(根据名称)，参数可以有默认值。

.element {
  .border-radius(4px);
}

易于定制

基本上Bootstrap所有的混合都保存在mixins.less， 这是一个出色的工具类.less文件，我们可以在任何一个.less文件中使用其中的混合。

因此，直接使用已有的混合或是自定义一个新混合皆可。

包含混合

实用工具

混合 | 参数 | 用法
.clearfix() | 无 | 清除浮动
.tab-focus() | 无 | 添加类似Webkit获得焦点的风格和类似Firefox的的外包线
.center-block() | 无 | 使用margin: auto把块级元素自动居中
.ie7-inline-block() | 无 | 添加规则的 display: inline-block 以支持IE7
.size() | @height: 5px, @width: 5px | 快速设置行高和行宽
.square() | @size: 5px | 基于.size() 设置正方形区域
.opacity() | @opacity: 100 | 设置透明度的百分比 (比如 "50" 或 "75")

表单

混合 | 参数 | 用法
.placeholder() | @color: @placeholderText | 设置输入框中 placeholder 的字体颜色

排版

混合 | 参数 | 用法
#font > #family > .serif() | 无 | 对某个元素应用一系列serif衬线字体
#font > #family > .sans-serif() | 无 | 对某个元素应用一系列sans-serif字体
#font > #family > .monospace() | 无 | 对某个元素应用一系列monospace字体
#font > .shorthand() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | 方便设置字体大小，粗细和行间距
#font > .serif() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | 设置衬线字体族serif，字体大小，粗细和行间距
#font > .sans-serif() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | 设置sans-serif字体族，字体大小，粗细和行间距
#font > .monospace() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | 设置monospace字体族，字体大小，粗细和行间距

栅格系统

混合 | 参数 | 用法
.container-fixed() | 无 | 创建一个水平居中的容器，用以容纳内容
#grid > .core() | @gridColumnWidth, @gridGutterWidth | 使用 n 列和 x 像素间距宽度，生成一个象素栅格系统(容器，行，列)
#grid > .fluid() | @fluidGridColumnWidth, @fluidGridGutterWidth | 使用 n 列和 x % 间距宽度，生成一个百分比栅格系统

CSS3属性

混合 | 参数 | 用法
.border-radius() | @radius: 5px | 元素圆角化，可以是一个单独的值，也可以分别是四个角的值
.box-shadow() | @shadow: 0 1px 3px rgba(0,0,0,.25) | 对元素应用阴影
.transition() | @transition | 添加CSS3过渡效果(比如， all .2s linear)
.rotate() | @degrees | 旋转一个元素 n 度
.scale() | @ratio | 对一个元素缩放原有大小的 n 倍
.translate() | @x: 0, @y: 0 | 在平面上移动x和y个像素
.background-clip() | @clip | 裁剪一个元素的背景 (用于 border-radius)
.background-size() | @size | 通过CSS3更改背景图片的大小
.box-sizing() | @boxmodel | 改变一个元素的盒(box)模型 (比如，用在100%宽度 input 上的 border-box )
.user-select() | @select | 更改页面文本的选择光标
.resizable() | @direction: both | 改变右下角坐标以重置元素大小
.content-columns() | @columnCount, @columnGap: @gridColumnGutter | 让元素中的内容使用CSS3的列

背景和渐变

混合 | 参数 | 用法
#translucent > .background() | @color: @white, @alpha: 1 | 设置一个元素的背景色和透明度
#translucent > .border() | @color: @white, @alpha: 1 | 设置一个元素的边框的颜色和透明度
#gradient > .vertical() | @startColor, @endColor | 创建一个跨浏览器的垂直背景渐变
#gradient > .horizontal() | @startColor, @endColor | 创建一个跨浏览器的水平背景渐变
#gradient > .directional() | @startColor, @endColor, @deg | 创建一个跨浏览器的有斜度的背景渐变
#gradient > .vertical-three-colors() | @startColor, @midColor, @colorStop, @endColor | 创建一个跨浏览器的三色背景渐变
#gradient > .radial() | @innerColor, @outerColor | 创建一个跨浏览器的放射背景渐变
#gradient > .striped() | @color, @angle | 创建一个跨浏览器的条纹背景渐变
#gradientBar() | @primaryColor, @secondaryColor | 用于给按钮指定渐变背景和浅暗的边框

使用LESS编译Bootstrap

注意： 如果您向Github pull修改后的代码，您必须通过下列方式重新编译CSS。

编译的工具

带有makefile的Node.js

运行下列命令，利用npm在全局环境下安装LESS命令行编译器和uglify-js：

$ npm install -g less uglify-js

安装成功后，在您的Bootstrap的根目录下运行 make 即可编译CSS。

此外，如果您已经安装了 watchr ，您可以运行 make watch ， 这样您每次修改Bootstrap后，就会自动重编译Bootstrap。（不是必须运行，这样做仅仅是出于方便。）

命令行

在Node下运行下列命令安装LESS命令行工具：

$ lessc ./lib/bootstrap.less > bootstrap.css

如果想压缩生成的css大小，就一定要在命令行参数中包含 --compress 。

Javascript

下载最新的 Less.js 并在 <head> 中包含Bootstrap中的less路径和less.js文件路径。

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

要重编译.less文件，只要在保存文件后刷新页面。Less.js会重新编译.less文件并进行本地存储。

非官方的Mac应用

非官方Mac应用 监视.less文件所在的目录，每次观察到.less文件发生改动都会自动将.less编译成本地文件。

如果您喜欢，您可以在应用的首选项设置自动最小化代码，以及编译后的文件目录。

更多Mac应用

Crunch

Crunch是一个用Abode Air构造的界面优美的LESS编辑器和编译器。

CodeKit

CodeKit同样是非官方的Mac应用，可以编译LESS,SASS,Stylus和CoffeeScript。

Simpless

跨Mac, Linux, 和PC平台的应用，可以拖拽LESS文件进行编译，而且其代码开源， 代码托管在GitHub上 。

中文LESS资料

LESS官方站中文版

飞长（王玉林）翻译维护。

在线编译

在线编译LESS，非常方便！

工具汇总

回到顶端

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译


框架 · Twitter Bootstrap中文版/中文翻译

框架

Bootstrap创建了响应式的12列栅格系统，并在该系统的基础上设计了固定(fixed)布局和流动宽度(fluid-width)布局。

  • 全局样式
  • 栅格系统
  • 流动栅格系统
  • 自定义
  • 布局
  • 响应式设计

全局样式 重置CSS，排版和链接

要求HTML5 doctype

Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。

<!DOCTYPE html>
<html lang="en">
  ...
</html>

排版和链接

在 scaffolding.less 文件中，设置了基本的全局显示效果，排版和链接样式。具体来说，我们:

  • 移除了body的margin
  • 设置 body 背景色为 background-color: white;
  • 将 @baseFontFamily, @baseFontSize, 和 @baseLineHeight 做为排版的基础变量
  • 使用 @linkColor 设置全局链接的颜色，链接仅在 :hover 状下显示下划线

通过Normalize重置默认样式

从Bootstrap 2开始，使用 Normalize.css 对默认的CSS进行重置(reset)。 Normalize.css 项目由 Nicolas Gallagher 创建 HTML5 Boilerplate 项目也出于他手。

新的reset代码保存在 reset.less ，并移除了一些元素，从而更加简洁明了。

默认栅格系统 响应式的12列系统

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

做为框架默认的一部分，Bootstrap提供了940px宽, 12列的栅格系统。

针对各种不同的设备和分辨率，Bootstrap提供了四种响应式方案：手机，垂直平板，水平平板/小型桌面，宽屏桌面。

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

如左，一个基本的布局由两个“列”组成，栅格系统由一系列横跨12等分的"span*"组成。

列的偏移

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>

列的内嵌

在Bootstrap中使用静态(non-fluid)栅格很容易实现内嵌， 只要在一个已存在的 .span* 列中，嵌套一个新的 .row 列，然后在 .row 列中再添加一组 .span* 列即可。

例子

内嵌的行应该包含多个列，行的 span* 应该是几个内嵌列 span* 之和。 例如，两个内嵌的 .span3 列应该包含在 .span6 列中。

Level 1 of column
Level 2
Level 2
<div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

流式栅格系统 基本于百分比的12列响应式布局

列的流式排布

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

基于百分比，而非像素

流式栅格系统中的列宽使用百分比计算宽度而非像素。与像素栅格布局一样，Bootstrap根据设备和分辨率不同提供了不同的响应性方案。

行的流式布局

把固定布局变成流式布局很简单，把 .row 变成 .row-fluid 即可，列内容不变，因此在流式布局和固定布局之间转换非常简单。

补充

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

流式列的内嵌

流式列的内嵌稍稍有点不同：内嵌列的宽度与父级无关，而要视兄弟列而定，因为所有的内嵌列都是按比例分配父列的100%宽度。

Fluid 12
Fluid 6
Fluid 6
<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

自定义栅格

变量 | 默认值 | 描述
@gridColumns | 12 | 列的数量
@gridColumnWidth | 60px | 每列的宽度
@gridGutterWidth | 20px | 列之间的间隔宽度
@siteWidth | 计算所有列的总宽度（含间隔） | 计算列的总宽度以设置 .container-fixed() 的宽度

LESS中的变量

Bootstrap内置了一组很有用的变量，用以定制上述的默认940px栅格系统。这些变量保存在variables.less中。

如何定制

修改栅格意味着改变三个 @grid* 变量并要重新编译Bootstrap。 改变variables.less中的栅格变量，再使用四种方式中的某一种重编译less。 在添加更多列之前，要先在grid.less在定义这三个变量。

保持响应性

定制的栅格只能工作在默认的940px下，若要保证Bootstrap的全面响应性，还得更改responsive.less中的栅格内容。

布局 用基础模板创建网页

固定布局

用 <div class="container"> 实现的简单的中央布局的页面，默认为940px宽。

<body>
  <div class="container">
    ...
  </div>
</body>

流式布局

<div class="container-fluid"> 提供灵活的页面结构，定义了最小和最大宽度，拥有一个左边栏。很适合做应用和文档。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

响应式设计 Media Query根据设备和分辨率的不同而使用不同样式

响应式设计用来做什么？

Medias Query允许浏览器基于不同的条件而使用不同的CSS：比如宽高比，宽度，显示类型等等。但最常用的条件还是 min-width 和 max-width 。

  • 在栅格中修改列的宽度
  • 堆叠元素，而不是让其浮动
  • 根据不同设备重置标题和文字的大小，以获得更好的阅读体验。

谨慎地使用media query，建议仅仅将其做为你的手机用户的初体验。对于大型项目而言，最好还是选择专业的代码库，而不是进行层层的media查询。

支持的设备

Bootstrap在responsive.less文件中提供了一组media query，令你的项目可以更为便捷地适应多种设备和分辨率。包括：

设备 | 布局宽度 | 列宽度 | 间隔宽度
智能手机 | <=480px | 流式列，非固定宽度
智能手机到垂直平板 | <=767px | 流式列，非固定宽度
水平平板 | >=768px | 42px | 20px
默认 | >=980px | 60px | 20px
大分辨率 | >=1200px | 70px | 30px

要求有meta标签

要确保设备能正常显示响应式页面，就要添加meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用media query

Bootstrap不会自动包含media query，但理解和添加media query却是非常容易。 如下这般，即可在Bootstrap中包含响应式特性:

  1. 使用编译后的bootstrap-responsive.css
  2. 添加 @import "responsive.less" ，然后重新编译Bootstrap
  3. 修改并重编译responsive.less为一个单独的文件

为什么不直接包含它呢? 说实话，并不是什么应用都需要响应性设计，响应性不是必须的。 与其让开发者移除这个特性，不如由我们动手。

  // 水平状态的手机及以下
  @media (max-width: 480px) { ... }

  // 界于水平手机与竖直平板之间
  @media (max-width: 768px) { ... }

  // 界于竖直平板与水平平板/桌面之间
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // 宽桌面
  @media (min-width: 1200px) { .. }

用于响应性的实用类

介绍

为了更高效友好地面向手机开发，可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。

何时适用

你的网站已经有了一点底子，但并不想再为不同设备而重新创建一个完全不同的站点，这种情况就适合使用实用类来完善呈现效果。

例如，你仅仅想在使用手机浏览时显示 <select> 做为导航，而在使用平板和桌面浏览时，就隐藏起来。

支持的类

下面展示了可用的类，及其在media query（由设备标识）下的效果。 这些类保存在 responsive.less 。

类 | 手机 <=480px | 平板 <=767px | 桌面 >=768px
.visible-phone | 显示 | 隐藏 | 隐藏
.visible-tablet | 隐藏 | 显示 | 隐藏
.visible-desktop | 隐藏 | 隐藏 | 显示
.hidden-phone | 隐藏 | 显示 | 显示
.hidden-tablet | 显示 | 隐藏 | 显示
.hidden-desktop | 显示 | 显示 | 隐藏

测试案例

改变你的浏览器尺寸，或是不在同的设备上浏览，以观察上述类的效果。

显示...

  • 手机✔ 手机
  • 平板✔ 平板
  • 桌面✔ 桌面

隐藏...

  • 手机✔ 手机
  • 平板✔ 平板
  • 桌面✔ 桌面

回到顶端

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译


Upgrading · Twitter Bootstrap

  • Overview
  • Scaffolding
  • Base CSS
  • Components
  • Javascript plugins
  • Using LESS
  • Customize
  • Examples

Upgrading to Bootstrap 2

Learn about significant changes and additions since v1.4 with this handy guide.

Project changes

  • Docs: major updates across the board to general structure, examples, and code snippets. Also made responsive with new media queries.
  • Docs: all docs pages are now powered by Mustache templates and strings are wrapped in i18n tags for translation by the Twitter Translation Center. All changes to documentation must be done here and then compiled (similar to our CSS and LESS).
  • Repo directory structure: removed the compiled CSS from the root in favor of a large direct download link on the docs homepage. Compiled CSS is in /docs/assets/css/.
  • Docs and repo: one makefile, just type make in the Terminal and get updated docs and CSS.

Scaffolding

Grid system

  • Updated grid system, now only 12 columns instead of 16
  • Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more
  • Removed unused (by default) grid columns support for 17-24 columns

Responsive (media queries)

  • Media queries added for basic support across mobile and tablet devices
  • Responsive CSS is compiled separately, as bootstrap-responsive.css

Base CSS

Typography

  • h4 elements were dropped from 16px to 14px with a default line-height of 18px
  • h5 elements were dropped from 14px to 12px
  • h6 elements were dropped from 13px to 11px
  • Right-aligned option for blockquotes if float: right;

Code

  • New graphical style for <code>
  • Google Code Prettify styles updated (based on GitHub's gists)

Tables

  • Improved support for colspan and rowspan
  • Styles now restricted to new base class, .table
  • Table classes standardized with .table- required as a prefix
  • Removed unused table color options (too much code for such little impact)
  • Dropped support for TableSorter

Buttons

  • New classes for colors and sizes, all prefixed with .btn-
  • IE9: removed gradients and added rounded corners
  • Updated active state to make styling clearer in button groups (new) and look better with custom transition
  • New mixin, .buttonBackground, to set button gradients
  • The .secondary class was removed from modal examples in our docs as it never had associated styles.

Forms

  • Default form style is now vertical (stacked) to use less CSS and add greater flexibility
  • Form classes standardized with .form- required as a prefix
  • New built-in form defaults for search, inline, and horizontal forms
  • For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.
  • More flexible horizontal form markup with classes for all styling, including new optional class for the label
  • Form states: colors updated and customizable via new LESS variables

Icons, by Glyphicons

  • New Glyphicons Halflings icon set added in sprite form, in black and white
  • Simple markup required for an icon in tons of contexts: <i class="icon-cog"></>
  • Add another class, .icon-white, for white variation of the same icon

Components

Button groups and dropdowns

  • Two brand new components in 2.0: button groups and button dropdowns
  • Dependency: button dropdowns are built on button groups, and therefore require all their styles
  • Button groups, .btn-group, can be grouped one level higher with a button toolbar, .btn-toolbar

Navigation

  • Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.
  • New nav list variation added that uses the same base class, .nav
  • Vertical tabs and pills have been added—just add .nav-stacked to the <ul>
  • Pills were restyled to be less rounded by default
  • Pills now have dropdown menu support (they share the same markup and styles as tabs)

Navbar (formerly topbar)

  • Base class changed from .topbar to .navbar
  • Now supports static position (default behavior, not fixed) and fixed to the top of viewport via .navbar-fixed-top (previously only supported fixed)
  • Added vertical dividers to top-level nav
  • Improved support for inline forms in the navbar, which now require .navbar-form to properly scope styles to only the intended forms.
  • Navbar search form now requires use of the .navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.
  • Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.

Dropdown menus

  • Updated the .dropdown-menu to tighten up spacing
  • Now requires you to add a <span class="caret"></span> to show the dropdown arrow
  • Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior
  • The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.

Labels

  • Label colors updated to match form state colors
  • Not only do they match graphically, but they are powered by the same new variables

Thumbnails

  • Formerly .media-grid, now just .thumbnails, we've thoroughly extended this component for more uses while maintaining overall simplicity out of the box.
  • Individual thumbnails now require .thumbnail class

Alerts

  • New base class: .alert instead of .alert-message
  • Class names standardized for other options, now all starting with .alert-
  • Redesigned base alert styles to combine the default alerts and block-level alerts into one
  • Block level alert class changed: .alert-block instead of .block-message

Progress bars

  • New in 2.0
  • Features multiple styles via classes, including striped and animated variations via CSS3

Miscellaneous components

  • Added documentation for the well component and the close icon (used in modals and alerts)

Javascript plugins

Heads up! We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.

Tooltips

  • The plugin method has been renamed from twipsy() to tooltip(), and the class name changed from twipsy to tooltip.
  • The placement option value that was below is now bottom, and above is now top.
  • The animate option was renamed to animation.
  • The html option was removed, as the tooltips default to allowing HTML now.

Popovers

  • Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.
  • The placement option value that was below is now bottom, and above is now top.

New plugins

  • Collapse
  • Carousel
  • Typeahead

回到顶端

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译


译者言 · Twitter Bootstrap

译者言

主译者wrongway，Tvlike.me/TV来客开发者

1. 初衷 为tvlike.me选择一款能快速开发的前端框架

2. 热心译者 排名无先后

小空
blog.zzjin.net
Wrong太
Wrongway太太，为疑难词句提供专业翻译，现在她正在创作自己的官案悬疑小说 《大明御史传》
孔祥赫KXH
另一版本的译者，为第三次修订提供了有借鉴意义的参照。www.fishno.com

Back to top

我们倾注世间之爱于设计与创作 @twitter by @mdo and @fat.


Fleetio | Smarter Fleet Software

Log In
  • Tour
  • Pricing
  • Why Fleetio?
  • Testimonials
  • FAQ
  • About
  • Blog

Be a master of your fleet

Fleetio makes it easy to manage vehicles and equipment from anywhere

Fleet management software, reimagined

With Fleetio, you finally have a home for all of your vehicle information. Join the thousands around the world already managing their vehicles and equipment with ease.

Watch a short overview video

Get Started for Free

or request a demo →

All vehicle details in one place

Eliminate clutter and keep all fleet information in one safe and secure place — accessible online anytime, anywhere.

Maintenance records, purchase & disposal data, insurance history... Everything in a vehicle's lifecycle can be kept in Fleetio.

Easy maintenance tracking

Log vehicle maintenance online and keep your fleet's preventative maintenance records organized.

Create custom PM schedules for all your equipment to ensure maintenance gets done on time.

Reminders in your inbox

Reminders automatically email you when preventative maintenance tasks or inspections are coming due or overdue.

The next due date or meter value (in miles, kilometers, or hours) automatically recalculates when you log maintenance based on the PM schedule you setup.

Better fleet performance

Minimize unplanned downtime and keep your vehicles on the road longer. Automate preventative maintenance scheduling and be reminded when it's time for service.

Save time and money by being more organized.

Unlimited users

Vehicles are a mission-critical part of daily operations and better visibility leads to better decisions.

Increase visibility into fleet maintenance and equipment costs for all stakeholders and keep everyone in the loop.

Powerful fuel analytics

Measure fuel economy for each vehicle and stay on top of fuel expenses. See your cost per mile for each vehicle, and save money by easily identifying poorly performing vehicles.

Improve your business

Increase your bottom line by reducing rework costs and saving on fuel expenditures. Eliminate fines and late fees because of overdue licenses and permits.

Regulatory compliance

Track inspections and adhere to regulatory laws. Pinpoint problem vehicles and drivers in your fleet, and become proactive instead of reactive to issues.

Connect your vehicles and fuel cards

Vehicle Health Monitor Integration

Fleetio works with Prova Systems' VHM hardware, a plug & play device that reads data from a vehicle's OBD-II port. Driver behavior, diagnostic information and vehicle usage are seamlessly uploaded to Fleetio.

Learn More →

Fuel Card Integration

Fuel transactions are automatically imported each day, including odometer readings. Fleetio calculates MPG, cost/mile and more giving you powerful analytics on your fuel spend.

Learn More →

Loved by over 10,000 people worldwide

"Fleetio helps us keep on top of the complicated logistics and paperwork of running a fleet of vehicles throughout several countries."

Ollie Blackwell Fleet Manager, Safari Drive

"We haven't missed any service or maintenance that comes due regularly for our vehicles since we started using Fleetio."

Patrick Galloway Service Manager, Kid One Transport System

"Fleetio is a simple yet effective online solution that has proven to be a great asset to our department. It is a vital part of my vehicle program.

Kurt Senior IT Manager, Geotech Material Testing Services
‹ ›
  • Read all testimonials →

Join the thousands using Fleetio to manage their vehicles.

Try Fleetio for Free →
No credit card required Get the Fact Sheet
Download a summary of Fleetio

Navigate

  • Home
  • Blog
  • Feature Tour
  • Pricing & Signup
  • Why Fleetio?
  • Frequently Asked Questions
  • Customer Testimonials

More

  • Help Center
  • ROI Calculator
  • Fleet Management Software
  • Vehicle Maintenance Software
  • Cloud-based Software

Integrate

  • Fleet Fuel Cards
  • OBD-II Vehicle Health Monitor (VHM) Devices

Company

  • About
  • Jobs
  • Contact Us

Get in touch

  • Email us
  • 1-800-975-5304
Subscribe to our newsletter

© 2012 RareStep, LLC. All rights reserved. Terms and Privacy Policy.


Fleetio

Log In
  • Tour
  • Pricing
  • Why Fleetio?
  • Testimonials
  • FAQ
  • About
  • Blog

[JSONT: Can't resolve 'collection.title'.]

We couldn't find what you are looking for.

Navigate

  • Home
  • Blog
  • Feature Tour
  • Pricing & Signup
  • Why Fleetio?
  • Frequently Asked Questions
  • Customer Testimonials

More

  • Help Center
  • ROI Calculator
  • Fleet Management Software
  • Vehicle Maintenance Software
  • Cloud-based Software

Integrate

  • Fleet Fuel Cards
  • OBD-II Vehicle Health Monitor (VHM) Devices

Company

  • About
  • Jobs
  • Contact Us

Get in touch

  • Email us
  • 1-800-975-5304
Subscribe to our newsletter

© 2012 RareStep, LLC. All rights reserved. Terms and Privacy Policy.