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

2023-07-20 08:13:52

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">

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

>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.

扩展阅读

许可证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也都包含压缩和未压缩两个版本的文件，根据你自己的需要使用吧。

码农公寓