Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。

http://v3.bootcss.com/

从2.x升级到3.0版本

Bootstrap 3并不向后兼容Bootstrap v2.x。下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南。如果需要更多信息，可以查看更新记录这篇官方博文。

class的主要变化

表格中列出了v2.x 和 v3.0之间样式表的变更。

Bootstrap 2.x	Bootstrap 3.0
.container-fluid	.container
.row-fluid	.row
.span*	.col-md-*
.offset*	.col-md-offset-*
.brand	.navbar-brand
.nav-collapse	.navbar-collapse
.nav-toggle	.navbar-toggle
.btn-navbar	.navbar-btn
.hero-unit	.jumbotron
.icon-*	.glyphicon .glyphicon-*
.btn	.btn .btn-default
.btn-mini	.btn-xs
.btn-small	.btn-sm
.btn-large	.btn-lg
.alert-error	.alert-danger
.visible-phone	.visible-xs
.visible-tablet	.visible-sm
.visible-desktop	.visible-md
.hidden-phone	.hidden-xs
.hidden-tablet	.hidden-sm
.hidden-desktop	.hidden-md
.input-small	.input-sm
.input-large	.input-lg
.control-group	.form-group
.checkbox.inline .radio.inline	.checkbox-inline .radio-inline
.input-prepend .input-append	.input-group
.add-on	.input-group-addon
.thumbnail	.img-thumbnail
ul.unstyled	.list-unstyled
ul.inline	.list-inline
.muted	.text-muted
.text-error	.text-danger
.table .error	.table .danger
.bar	.progress-bar
.bar-*	.progress-bar-*
.accordion	.panel-group
.accordion-group	.panel .panel-default
.accordion-heading	.panel-heading
.accordion-body	.panel-collapse
.accordion-inner	.panel-body
.alert-error	.alert-danger

新增class

我们新增了一些页面元素，同时也对一些原有的元素进行了修改。下面列出了新增或更新之后的样式表。

页面元素	描述
Panels	.panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups	.list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons	.glyphicon
Jumbotron	.jumbotron
Extra small grid (<768px)	.col-xs-*
Small grid (≥768px)	.col-sm-*
Medium grid (≥992px)	.col-md-*
Large grid (≥1200px)	.col-lg-*
Responsive utility classes (≥1200px)	.visible-lg .hidden-lg
Offsets	.col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push	.col-sm-push-* .col-md-push-* .col-lg-push-*
Pull	.col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input groups	.input-group .input-group-addon .input-group-btn
Form controls	.form-control .form-group
Button group sizes	.btn-group-xs .btn-group-sm .btn-group-lg
Navbar text	.navbar-text
Navbar header	.navbar-header
Justified tabs / pills	.nav-justified
Responsive images	.img-responsive
Contextual table rows	.success .danger .warning .active
Contextual panels	.panel-success .panel-danger .panel-warning .panel-info
Modal	.modal-dialog .modal-content
Thumbnail image	.img-thumbnail
Well sizes	.well-sm .well-lg
Alert links	.alert-link

被移除的class

以下列出的页面元素已经在v3.0版本中被去除或修改。

页面元素	从2.x版本中去除	3.0版本中对应的元素
Form actions	.form-actions	N/A
Search form	.form-search	N/A
Fluid container	.container-fluid	.container (no more fixed grid)
Fluid row	.row-fluid	.row (no more fixed grid)
Controls wrapper	.controls	N/A
Controls row	.controls-row	.row or .form-group
Navbar inner	.navbar-inner	N/A
Navbar vertical dividers	.navbar .divider-vertical	N/A
Dropdown submenu	.dropdown-submenu	N/A
Tab alignments	.tabs-left .tabs-right .tabs-below	N/A
Nav lists	.nav-list .nav-header	No direct equivalent, but List groups and .panel-group s are similar.

额外注意

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and ourmobile first approach. Here's a partial list:

有些v3.0中的多修改并不能从表面直接看到。我们对基本class、关键样式和行为都进行了调整，使其更灵活并且适应移动设备优先这一目标。下面是一个部分列表：

文本表单控件全部预设为100%宽度。用

<div class="col-*"></div>

包裹输入框即可控制器宽度。

.badge

不再保留状态相关的class（-success、-primary等）。

.btn

必须和

.btn-default

一起使用才能获得“默认”样式的按钮。

.container

和

.row

目前是基于百分比定义的宽度。

默认情况下，图片不具有由响应式特性，需要使用

.img-responsive

才能让

<img>

实现响应式可变大小。

图标，

.glyphicon

，演变为字体图标。每个图标都需要一个基本class和一个代表特定图标的class（例如，

.glyphicon .glyphicon-asterisk

）

与输入组件被移除，建议使用Twitter Typeahead组件。

模态框组件的HTML结构发生了很大的改变。

.modal-header

、

.modal-body

和

.modal-footer

部分目前包含在了

.modal-content

和

.modal-dialog

中，为的是增强移动设备上的样式和行为特性。

The HTML loaded by the

remote

modal option is now injected into the

.modal

instead of into the

.modal-body

. This allows you to also easily vary the header and footer of the modal, not just the modal body.

JavaScript事件目前全部都应用了命名空间。例如，模态框的"show"事件的名称为

'show.bs.modal'

。标签页组件的"shown"事件名称为

'shown.bs.tab'

，还有很多其它事件名称也是类似。

可以在Bootply社区网站获取更多升级至v3.0的信息和代码示例。

浏览器支持

Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。

被支持的浏览器

特别注意，我们坚决支持这些浏览器的最新版本：

Chrome (Mac、Windows、iOS和Android)

Safari (只支持Mac和iOS版，Windows版已经基本死掉了)

Firefox (Mac、Windows)

Internet Explorer

Opera (Mac、Windows)

Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，虽然我们不对其进行官方支持。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多CSS3属性和HTML5元素 -- 例如，圆角矩形和投影 -- 是肯定不被支持的。另外，Internet Explorer 8 需要respond.js配合才能实现对媒体查询（media query）的支持。

Feature	Internet Explorer 8	Internet Explorer 9
border-radius	Not supported	Supported
box-shadow	Not supported	Supported
transform	Not supported	Supported, with -ms prefix
transition	Not supported
placeholder	Not supported

请参考Can I use...以获取详细的CSS3和HTML5特性在各个浏览器上的支持情况。

Internet Explorer 8 与 box-sizing

IE8不能完全支持

box-sizing: border-box;

与

min-width

、

max-width

、

min-height

或

max-height

一同使用。由于此原因，从Bootstrap v3.0.1版本开始，我们不再为

.container

使用

max-width

。

IE兼容模式

Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此

<meta>

标签加入到你的页面中：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

参见StackOverflow上对此问题的解答。

>Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

Internet Explorer 10并没有将屏幕的宽度和视口（viewport）的宽度区别开，这就导致Bootstrap中的媒体查询并不能很好的发挥作用。为了解决这个问题，你可以引入下面列出的这段CSS暂时修复此问题：

@-ms-viewport       { width: device-width; }

然而，这样做会导致Windows Phone 8 设备按照桌面浏览器的方式呈现页面，而不是较窄的“手机”呈现方式。为了解决这个问题，还需要加入以下CSS和JavaScript代码，直到微软修复此问题。

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style")
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
)
document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

请查看Windows Phone 8 and Device-Width以了解更多信息。

作为提醒，我们将其加入到Bootstrap文档中作为一个案例。

Safari对百分比数字凑整的问题

最新的Mac版Safari浏览器所包含的绘制引擎对于处理

.col-*-1

所对应的很长的百分比小数存在bug，这就意味着，如果你在一行（row）之中定义了12个单独的列（.col-*-1），你就会看到这一行比其他行要短一些。我们目前解决不了这个问题(see #9282)，但是你可以避免：

为最后一列添加

.pull-right

，将其暴力向右对齐

手动调整百分比数字，让其针对Safari表现更好（这比第一种方式更困难）

我们将会继续跟踪此问题，如果有更简易的解决方案，我们会更新代码。

模态框和移动设备

超出范围和滚动

<body>

元素在iOS和Android上对

overflow: hidden

的支持很有限。结果就是，在这两种设备上的浏览器中，当你滚动屏幕超过模态框的顶部或底部时，

<body>

中的内容将开始随着滚动。

虚拟键盘

还有，如果你正在模态框上面输入内容 -- iOS还有一个绘制上的bug，当触发虚拟键盘之后，其不会更新fixed元素的位置。这里有几种解决方案，包括将fixed元素转变为

position: absolute

或启动一个定时器手工修正其位置。这些没有加入Bootstrap中，因此，需要由你自己选择最好的解决方案并加入到你的应用中。

浏览器缩放

页面缩放功能不可避免的会将某些组件搞得乱七八糟，不光是Bootstrap，整个互联网上的所有网站都是这样。针对具体问题，我们或许可以修复它（如果有必要的话，请先搜索一下你的问题，看看是否已有解决方案，然后在向我们提交issue）。然而，我们更倾向于忽略这些问题，由于这些问题除了一些hack手段，一般没有直接的解决方案。

对第三方组件的支持

虽然我们并不官方支持任何第三方插件，我们还是提供一些建议，帮你避免可能在你的项目中会出现的问题。

Box-sizing

某些第三方软件，包括Google地图和Google定制搜索引擎都会由于

* { box-sizing: border-box; }

设置而产生冲突，这一设置使

padding

不影响页面元素最终宽度的计算。更多信息请参考盒模型与尺寸计算 - CSS Tricks。

根据不同情况，你可能需要根据情况覆盖（第一种选择）或为所有区域设置（第二种选择）。

/* Box-sizing resets
*
* 为了避免Bootstrap设置的全局盒模型所带来的影响，可以重置单个页面元素或覆盖整个区域的盒模型。
* 两种选择 - 覆盖单个页面元素和重置整个区域 -  都可以纯CSS或LESS代码实现。
*/

/* Option 1A: 通过CSS覆盖单个页面元素的盒模型 */
.element {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

/* Option 1B: 通过使用Bootstrap LESS mixin覆盖单个页面元素的盒模型 */
.element {
.box-sizing(content-box);
}

/* Option 2A: 通过CSS重置整个区域 */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

/* Option 2B: 通过使用自定义的LESS mixin重置整个区域 */
.reset-box-sizing {
&,
*,
*:before,
*:after {
.box-sizing(content-box);
}
}
.element {
.reset-box-sizing();
}

可访问性

Bootstrap遵循统一的web标准，另外，通过做一些少量的修改，还可以让使用AT的人群访问你的站点。

跳过导航

如果你的导航部分包含很多链接，并且在DOM结构上也是排列在主内容之前，那么建议在紧跟

<body>

标签之后添加一个

跳转到主内容

的链接。(这里解释了这样做的原因)

<body>
<a href="#content" class="sr-only">Skip to content</a>
<div class="container" id="content">
The main page content.
</div>
</body>

标题嵌套

当标题嵌套时(

<h1>

-

<h6>

)，你的文档的主标题应该是

<h1>

。随后的标题逻辑上就应该使用

<h2>

-

<h6>

，这样，屏幕阅读器就可以构造出页面的内容列表。

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

扩展阅读

"HTML Codesniffer" bookmarklet for identifying accessibility issues

The A11Y Project

MDN accessibility documentation

许可证FAQ

Bootstrap遵守Apache 2许可证进行分发，版权归 Twitter2013所有。归结为以下几点：

允许你：

自由的下载并使用部分或完整的Bootstrap框架，允许用于私人、公司内部或商业目的

将Bootstrap放入你自己创建的安装包或分发中

禁止你：

在没有合适的权力声明的情况下重新分发Bootstrap的任意部分

以任何方式（声明或暗示Twitter已经为你的分发背书）使用Twitter拥有的任何商标

以任何方式（声明或暗示你创建了此软件）使用任何Twitter拥有的商标

需要你：

在你的包含了Bootstrap的分发中包含一份许可证文件

对你所包含的Bootstrap进行准确的声明，其权利归属于Twitter

不需要你：

在你的分发中包含Bootstrap源码或你对其进行的任何修改

向Bootstrap项目提交你对Bootstrap的修改(虽然我们鼓励你提交并回馈)

Bootstrap完整的许可包含在项目仓库中。

定制Bootstrap

如果你将Bootstrap作为你所依赖的工具库中的一个组成部分，那么，对Bootstrap进行定制将是非常好的方式。这样做能够确保将来的升级更容易。

一旦你将下载下来的Bootstrap样式和脚本文件引入到页面内，你就可以定制这些组件。这需要再创建一份新的样式表（可以是LESS，或者是CSS）用于覆盖Bootstrap中已经存在的样式。

压缩版还是非压缩版？

除非你需要阅读CSS代码，否则请使用压缩版。其中包含的代码是一样的，只是更精简了。压缩过的样式文件可以降低带宽的占用，尤其对线上环境有益。

到此，包含所需的Bootstrap组件和HTML内容即可创建生成页面所需的模版。

定制组件

有几种不同程度的定制方式，但是，基本可以归为两类：轻量级定制和深度定制。这两种方式都有很多第三方案例可供参考。

我们将轻量级定制定义为外观层面的改变，比如修改现有Bootstrap组件的颜色和字体之类。Twitter翻译中心 (由@mdo开发)就是一个很好地案例。下面就让我们看看这个网站是如何定制按钮

.btn-ttc

的。

使用Bootstrap自带的按钮，只需一个简单的class即可，即

.btn

。我们现在需要增加自己的class来为其做些修改，class名称为

.btn-ttc

。现在就可以花费比较少的时间做外观定制。

我们定制的按钮如下：

<button type="button" class="btn btn-ttc">Save changes</button>

注意

.btn-ttc

是如何添加到标准的

.btn

class中的。

在定制的样式表中，增加如下CSS代码：

/* 定制按钮
-------------------------------------------------- */

/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #007da7;
}

/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
background-repeat: repeat-x;
background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
...
}

/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
background-position: 0 -15px;
}

简单来说，就是从样式表代码中复制出需要修改的部分。

以下就是基本工作流程：

对于每个需要定制的元素，在Bootstrap CSS文件（未压缩版）中找到其出现的位置。

将需要定制的样式代码拷贝并粘贴到你自己的文件中。例如，定制导航条（navbar）的背景（background），只需要拷贝

.navbar

样式。

在你自己的样式表文件中修改拷贝过来的CSS代码。不需要增加新的class或使用

!important

属性。尽量简单就好。

重复上述过程，直到自己满意为止。

一旦你熟悉了轻量定制，再进行深度定制将会手到擒来。例如Karma网站，他们就是将Bootstrap作为一个CSS reset文件，并进行了大量的修改，其中涉及到当量的工作。他们在定制过程中遵循了同样的原理：将Bootstrap的默认样式表引入页面中，然后使用自己定制的样式。

可选的定制方式

虽然不推荐初级Bootstrap开发者使用，我们还是列出两种可选方式。第一种是修改

.less

源码文件（将来升级时将会超级困难）；第二种是通过mixin将LESS源码映射到你自己定义的class上。由于时间关系，不在此一一详细说明。

去除没用的代码

并不是所有的网站和应用需要使用Bootstrap提供的所有功能，尤其是在生产环境，带宽的增加意味着花费更多金钱。我们鼓励你通过定制功能去除任何没用的代码。

利用定制功能，可以简单的将不需要的组件、特性或资源去除掉。点击下载按钮，将下载下来的文件替换掉默认的Bootstrap文件即可。这样你就获得了完全满足自己需求的Bootstrap，没有丝毫你不需要的代码。所有定制的Bootstrap也都包含压缩和未压缩两个版本的文件，根据你自己的需要使用吧。