Bootstrap4支持多种浏览器和设备,不管是最新的还是一些较早的浏览器,都支持。具体支持哪一些,请看下面内容。
Bootstrap4 支持所有的主流浏览器和平台的最新的、稳定的版本。
移动设备
总的来说,Bootstrap支持所有主流平台的最新版本的默认浏览器。
Chrome | Firefox | Opera | Safari | Android Browser & WebView | |
---|---|---|---|---|---|
Android | 支持 | 支持 | 不支持 | N/A | Android v5.0+ 支持 |
iOS | 支持 | N/A | 不支持 | 支持 | N/A |
桌面浏览器
差不多的,大多数最新版本的桌面浏览器也是支持的。
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|---|
Mac | 支持 | 支持 | N/A | N/A | 支持 | 支持 |
Windows | 支持 | 支持 | 支持 | 支持 | 支持 | 不支持 |
对于 Firefox, 除了最新的普通稳定版本, 我们也支持Firefox浏览器最新的扩展支持版本 (ESR)。
非正式地,Bootstrap应当在Chromium系统以及Linux系统的Chrome、Linux系统的Firefox以及Internet Explorer 8或更早版本的IE中也表现良好。虽然它们不是正式支持的。
Internet Explorer 9
Internet Explorer 9也是支持的。然而,有一些CSS3属性和HTML5元素在Bootstrap中不被完全支持,如下表:
功能 | 状态 |
---|---|
border-radius 圆角边框 | 支持 |
box-shadow 盒阴影 | 支持 |
transform 变形 | 支持, 带-ms 前缀 |
transition 过渡 | 不支持 |
placeholder 占位符 | 不支持 |
访问Can I use…获取更多关于 CSS3 和 HTML5 支持的信息。
Internet Explorer 8
需要注意,从Bootstrap4开始,就不在支持IE8了,如果你需要IE8支持,我们建议你使用Bootstrap 3。
当然,作为替代,你可以添加一些第三方的JavaScript来恢复Bootstrap 4对Internet Explorer 8的支持。你需要下面这些东西:
Respond.js
Rem unit polyfill
IE兼容模式
Bootstrap 在老版本的Internet Explorer兼容模式中不受支持。为了确保你正在使用IE的最新的渲染模式,请在你的网页的合适位置放置下面这个<meta>标签:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
要想打开调试工具以确认文档模式,请按F12并检查“文档模式”。
所有的Bootstrap的文档和示例都包含了这个标签,以确保在每个版本的IE浏览器(Bootstrap支持的IE版本)中,都能得到最好的渲染可能性。
模态窗口,导航条,以及虚拟键盘
溢出和滚动
iOS和安卓对<body>元素中使用overflow: hidden的支持很有限。因此,在这两种设备的浏览器中,当你滚动超过一个模态窗口的顶部或底部,<body>内容就会开始滚动。
虚拟键盘
同时,注意如果你正在使用一个固定导航栏或者在模态窗口中使用输入法,iOS有一个渲染bug,即当触发弹出虚拟键盘时,它不会更新固定元素的位置。对这个问题的一点变通包括把你的元素转换到position: absolute;,包括激发一个焦点计时器来手工修正位置。这个不归Bootstrap处理的,所以你的应用程序如有这个问题采取何种解决方法取决于你自己。
导航栏下拉菜单
在iOS中,导航栏上不能使用.dropdown-backdrop元素,因为z-indexing的复杂性。因此,关闭导航栏的下拉菜单,你必须直接点击下拉菜单元素(或者 iOS 中任何其他可以启动单击事件的元素)。
浏览器缩放
页面缩放不可避免地影响一些组件的渲染效果, 无论是在Bootstrap网页还是在其它网页中。对于这个问题,我们可能能够修复它(发起话题前,如果可以的话请先搜索一下)。然而,我们倾向于忽视它们,因为它们大多数没有直接的解决办法,或者不太容易解决。
移动设备上的:hover/:focus粘性
即使在大多数触摸屏上,真正的悬停不可能实现,大多数移动浏览器模仿停县并使得:hover“有粘性”。换句话说,在触击一个元素之后,:hover样式样式开始应用,在用户触击另一个元素之后停止应用。在移动优先的网站上,这种表现通常是不可取的。
Bootstrap包含了针对它的一个变通,虽然它默认是不可用的。从Sass编译时只要把$use-hover-media-query设置为true,为了浏览器中禁用用以模拟悬停的:hover样式,Bootstrap将使用mq4-hover-shim,它能防止粘性的:hover样式。
安卓内置浏览器
除了盒子,Android 4.1(以及更新的版本)使用Browser应用作为默认浏览器(而不是用Chrome)。很不幸的是,该Browser应用有很多的bug以及CSS不一致。
选项菜单
在<select>元素中,如果不应用border-radius以及border,安卓内置浏览器不会显示边缘控件。(请阅读 this StackOverflow question 以了解更多详情。)使用下面的代码片段可以在安卓内置浏览器中移除这个CSS冲突,并把该<select>渲染成未样式化的元素。该用户代理嗅觉探避免了与干扰Chrome、Safari 和 Mozilla 浏览器。
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
为了能够向漏洞百出的老版本的浏览器提供尽可能好的体验,Bootstrap在多个不同的地方使用了 CSS 浏览器hacks 使用针对对于特定的浏览器版本的特殊的CSS,以克服浏览器自身存在的bug。这些hacks自然是引起了CSS验证器申明它们是不可用的。在一些地方,我们也使用尚未完全标准化的前沿CSS特征,但是使用它们纯粹是为了渐进增强。
这些验证器的警告在实践中没生产妨碍,因为我们的CSS的非hacky部分已经充分验证,而且用到的hacky部分不会妨碍非hacky部分的正常功能。因此这就是我们故意忽视特定的警告的原因。