Bootstrap 3并不向后兼容Bootstrap v2.x。下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南。如果需要更多信息,可以查看更新记录这篇官方博文。
表格中列出了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 |
我们新增了一些页面元素,同时也对一些原有的元素进行了修改。下面列出了新增或更新之后的样式表。
页面元素 | 描述 |
---|---|
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 |
以下列出的页面元素已经在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、关键样式和行为都进行了调整,使其更灵活并且适应移动设备优先这一目标。下面是一个部分列表:
<div class="col-*"></div>
包裹输入框即可控制器宽度。.badge
不再保留状态相关的class(-success、-primary等)。.btn
必须和 .btn-default
一起使用才能获得“默认”样式的按钮。.container
和.row
目前是基于百分比定义的宽度。.img-responsive
才能让<img>
实现响应式可变大小。.glyphicon
,演变为字体图标。每个图标都需要一个基本class和一个代表特定图标的class(例如,.glyphicon .glyphicon-asterisk
).modal-header
、.modal-body
和.modal-footer
部分目前包含在了.modal-content
和.modal-dialog
中,为的是增强移动设备上的样式和行为特性。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.'show.bs.modal'
。标签页组件的"shown"事件名称为'shown.bs.tab'
,还有很多其它事件名称也是类似。可以在Bootply社区网站获取更多升级至v3.0的信息和代码示例。
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现,也就是说,在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同,但是功能是完整的。
特别注意,我们坚决支持这些浏览器的最新版本:
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的,虽然我们不对其进行官方支持。
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特性在各个浏览器上的支持情况。
IE8不能完全支持box-sizing: border-box;
与min-width
、max-width
、min-height
或max-height
一同使用。由于此原因,从Bootstrap v3.0.1版本开始,我们不再为.container
使用max-width
。
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式,建议将此 <meta>
标签加入到你的页面中:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
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文档中作为一个案例。
最新的Mac版Safari浏览器所包含的绘制引擎对于处理.col-*-1
所对应的很长的百分比小数存在bug,这就意味着,如果你在一行(row)之中定义了12个单独的列(.col-*-1),你就会看到这一行比其他行要短一些。我们目前解决不了这个问题(see #9282),但是你可以避免:
.pull-right
,将其暴力向右对齐我们将会继续跟踪此问题,如果有更简易的解决方案,我们会更新代码。
<body>
元素在iOS和Android上对overflow: hidden
的支持很有限。结果就是,在这两种设备上的浏览器中,当你滚动屏幕超过模态框的顶部或底部时, <body>
中的内容将开始随着滚动。
还有,如果你正在模态框上面输入内容 -- iOS还有一个绘制上的bug,当触发虚拟键盘之后,其不会更新fixed元素的位置。这里有几种解决方案,包括将fixed元素转变为position: absolute
或启动一个定时器手工修正其位置。这些没有加入Bootstrap中,因此,需要由你自己选择最好的解决方案并加入到你的应用中。
页面缩放功能不可避免的会将某些组件搞得乱七八糟,不光是Bootstrap,整个互联网上的所有网站都是这样。针对具体问题,我们或许可以修复它(如果有必要的话,请先搜索一下你的问题,看看是否已有解决方案,然后在向我们提交issue)。然而,我们更倾向于忽略这些问题,由于这些问题除了一些hack手段,一般没有直接的解决方案。
虽然我们并不官方支持任何第三方插件,我们还是提供一些建议,帮你避免可能在你的项目中会出现的问题。
某些第三方软件,包括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.
Bootstrap遵守Apache 2许可证进行分发,版权归 Twitter2013所有。归结为以下几点:
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;
}
简单来说,就是从样式表代码中复制出需要修改的部分。
以下就是基本工作流程:
.navbar
样式。!important
属性。尽量简单就好。一旦你熟悉了轻量定制,再进行深度定制将会手到擒来。例如Karma网站,他们就是将Bootstrap作为一个CSS reset文件,并进行了大量的修改,其中涉及到当量的工作。他们在定制过程中遵循了同样的原理:将Bootstrap的默认样式表引入页面中,然后使用自己定制的样式。
虽然不推荐初级Bootstrap开发者使用,我们还是列出两种可选方式。第一种是修改 .less
源码文件(将来升级时将会超级困难);第二种是通过mixin将LESS源码映射到你自己定义的class上。由于时间关系,不在此一一详细说明。
并不是所有的网站和应用需要使用Bootstrap提供的所有功能,尤其是在生产环境,带宽的增加意味着花费更多金钱。我们鼓励你通过定制功能去除任何没用的代码。
利用定制功能,可以简单的将不需要的组件、特性或资源去除掉。点击下载按钮,将下载下来的文件替换掉默认的Bootstrap文件即可。这样你就获得了完全满足自己需求的Bootstrap,没有丝毫你不需要的代码。所有定制的Bootstrap也都包含压缩和未压缩两个版本的文件,根据你自己的需要使用吧。