Bootstrap 源码

Bootstrap 源码

浏览器和设备的支持情况

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

被支持的浏览器

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

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.

Mobile devices

Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

Chrome

Firefox

Safari

Android

Supported

Supported

N/A

iOS

Supported

Supported

Supported

Desktop browsers

Similarly, the latest versions of most desktop browsers are supported.

Chrome

Firefox

Internet Explorer

Opera

Safari

Mac

Supported

Supported

N/A

Supported

Supported

Windows

Supported

Supported

Supported

Supported

Not supported

On Windows, we support Internet Explorer 8-11.

For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.

浏览器 bug 列表中列出了影响 Bootstrap 正常功能的浏览器 bug。

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

不支持

支持

box-shadow

不支持

支持

transform

不支持

支持, with -ms prefix

transition

不支持

placeholder

不支持

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

Internet Explorer 8 与 Respond.js

在开发环境和生产(线上)环境需要支持 Internet Explorer 8 时,请务必注意下面给出的警告。

Respond.js 与 跨域(cross-domain) CSS 的问题

如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面(例如,使用CDN)时需要一些额外的设置。请参考 Respond.js 文档 获取详细信息。

Respond.js 与 file:// 协议

由于浏览器的安全机制,Respond.js 不能在通过 file:// 协议(打开本地HTML文件所用的协议)访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性,务必通过 http 协议访问页面(例如搭建 apache、nginx 等)。请参考 Respond.js 文档获取更多信息。

Respond.js 与 @import 指令

Respond.js 不支持通过 @import 指令所引入的 CSS 文件。例如,Drupal 一般被配置为通过 @import 指令引入CSS文件,Respond.js 对其将无法起到作用。请参考 Respond.js 文档获取更多信息。

Internet Explorer 8 与 box-sizing 属性

当 box-sizing: border-box; 与 min-width、max-width、min-height 或 max-height 一同使用时,IE8 不能完全支持 box-sizing 属性。由于此原因,从 Bootstrap v3.0.1 版本开始,我们不再为 .container 赋予 max-width 属性。

Internet Explorer 8 与 @font-face

当 @font-face 与 :before 在 IE8 下共同使用时会出现问题。由于 Bootstrap 对 Glyphicons 的样式设置使用了这一组合方式,如果某个页面被浏览器缓存了,并且此页面不是通过点击“刷新”按钮或通过 iframe 加载的,那么就会导致字体文件尚未加载的情况下就开始绘制此页面。当鼠标滑过页面(body)时,页面上的某些图标就会显现,鼠标滑过其他没有显现的图标时,这些图标就能显示出来了。请参考 issue #13863 了解详细信息。

IE 兼容模式

Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将此 标签加入到你的页面中:

按 F12 键打开 IE 的调试工具,就可以看到 IE 当前的渲染模式是什么。

此 meta 标签被包含在了所有 Bootstrap 文档和实例页面中,为的就是在每个被支持的 IE 版本中拥有最好的绘制效果。

请参考 这个发表在 StackOverflow 上的问题。

国产浏览器高速模式

国内浏览器厂商一般都支持兼容模式(即 IE 内核)和高速模式(即 webkit 内核),不幸的是,所有国产浏览器都是默认使用兼容模式,这就造成由于低版本 IE (IE8 及以下)内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是,国内浏览器厂商逐渐意识到了这一点,某些厂商已经开始有所作为了!

将下面的 标签加入到页面中,可以让部分国产浏览器默认采用高速模式渲染页面:

目前只有360浏览器支持此 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代!

Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 并没有对 屏幕的宽度 和 视口(viewport)的宽度 进行区分,这就导致 Bootstrap 中的媒体查询并不能很好的发挥作用。为了解决这个问题,你可以引入下面列出的这段 CSS 代码暂时修复此问题:

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

然而,这样做并不能对 Windows Phone 8 Update 3 (a.k.a. GDR3) 版本之前的设备起作用,由于这样做将导致 Windows Phone 8 设备按照桌面浏览器的方式呈现页面,而不是较窄的“手机”呈现方式,为了解决这个问题,还需要加入以下 CSS 和 JavaScript 代码来化解此问题。

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

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

@viewport { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.

// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

var msViewportStyle = document.createElement('style')

msViewportStyle.appendChild(

document.createTextNode(

'@-ms-viewport{width:auto!important}'

)

)

document.querySelector('head').appendChild(msViewportStyle)

}

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

作为提醒,我们将上面的代码加入到了所有 Bootstrap 文档和实例页面中。

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

OS X 上搭载的 v7.1 以前 Safari 和 iOS v8.0 上搭载的 Safari 浏览器的绘制引擎对于处理 .col-*-1 类所对应的很长的百分比小数存在 bug。也就是说,如果你在一行(row)之中定义了12个单独的列(.col-*-1),你就会看到这一行比其他行要短一些。除了升级 Safari/iOS 外,有以下几种方式来应对此问题:

为最后一列添加 .pull-right 类,将其暴力向右对齐

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

模态框、导航条和虚拟键盘

超出范围和滚动

元素在 iOS 和 Android 上对 overflow: hidden 的支持很有限。结果就是,在这两种设备上的浏览器中,当你滚动屏幕超过模态框的顶部或底部时, 中的内容将开始随着滚动。See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.

iOS text fields and scrolling

As of iOS 9.3, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual or a