directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

了解从现代到旧的浏览器和设备,这些浏览器和设备都是由Bootstrap支持的,包括每个浏览器和设备的已知怪癖和bug。

受支持的浏览器

引导程序支持最新稳定版本所有主要的浏览器和平台。在Windows上,我们支持InternetExplorer 10-11/MicrosoftEdge...

使用WebKit、Blink或Gecko的最新版本的替代浏览器,无论是直接使用还是通过平台的Web视图API,都不被明确支持。但是,在大多数情况下,引导应该在%29中显示并在这些浏览器中正确工作。下文提供了更具体的支助信息。

移动设备

一般来说,Bootstrap支持每个主要平台默认浏览器的最新版本。请注意,不支持代理浏览器(如Opera Mini,Opera Mobile的Turbo模式,UC Browser Mini,Amazon Silk)。



Chrome

Firefox

Safari

Android Browser & WebView

Microsoft Edge

Android

Supported

Supported

N/A

Android v5.0+ supported

N/A

iOS

Supported

Supported

Supported

N/A

N/A

Windows 10 Mobile

N/A

N/A

N/A

N/A

Supported


桌面浏览器

同样,支持大多数桌面浏览器的最新版本。


Chrome

Firefox

Internet Explorer

Microsoft Edge

Opera

Safari

Mac

Supported

Supported

N/A

N/A

Supported

Supported

Windows

Supported

Supported

Supported, IE10+

Supported

Supported

Not supported

对于Firefox,除了最新的正常稳定版本之外,我们还支持最新版本扩展支持版本%28 ESR%29火狐的版本。

非正式地说,Bootstrap应该在Chromium和Chrome(Linux)、Firefox(Linux)和InternetExplorer 9(InternetExplorer 9)中看起来和表现得足够好,尽管它们没有得到官方的支持。

有关引导程序必须解决的一些浏览器错误的列表,请参阅我们的浏览器缺陷墙...

Internet资源管理器

支持InternetExplorer 10+;IE9和down则不支持。请注意,某些CSS 3属性和HTML 5元素在IE10中不完全支持,或者需要前缀属性才能实现全部功能。参观我能用…有关CSS 3和HTML 5功能的浏览器支持的详细信息。

如果您需要IE8-9支持,请使用Bootstrap 3。它是我们代码最稳定的版本,我们的团队仍然支持它进行重要的错误修复和文档更改。然而,没有新的功能将被添加到它。

移动平台上的MODERS和DULT

溢出和滚动

在iOS和Android overflow: hidden;上对<body>元素的支持相当有限。为此,当您在任一设备的浏览器<body>中滚动浏览模式的顶部或底部时,内容将开始滚动。请参阅Chrome bug#175502(在Chrome v40中修复)和WebKit错误#153852。

IOS文本字段和滚动

在IOS 9.2中,如果滚动手势的初始触摸在文本的边界内,则模式是打开的。<input>或者是<textarea>,<body>模式下的内容将被滚动,而不是模式本身。见WebKit bug#153856...

Navbar下降

.dropdown-backdrop由于z索引的复杂性,该元素不会在导航中的iOS上使用。因此,要关闭导航栏中的下拉菜单,您必须直接点击下拉元素(或任何其他会在iOS中触发点击事件的元素)。

浏览器缩放

页面缩放不可避免地会在Bootstrap和其他网页中的某些组件中呈现呈现工件。根据问题,我们可能会解决它(首先搜索,然后根据需要打开问题)。但是,我们往往忽略这些,因为除了哈克式的解决方法之外,他们通常没有直接的解决方案。

粘:hover/:focus移动

即使在大多数触摸屏上都不可能真正的悬停,但大多数移动浏览器都会模仿悬停支持并使:hover“粘”。换句话说,:hover样式在点击元素之后开始应用,只有在用户点击其他元素之后才停止应用。在移动第一站点上,这种行为通常是不可取的。

虽然在默认情况下禁用了引导程序,但它包含了解决此问题的方法。通过设置$enable-hover-media-query到true从Sass编译时,Bootstrap将使用mq4-悬停禁用:hover在模拟悬停的浏览器中的样式,从而防止粘性。:hover风格。对于这个解决方法有一些警告;有关详细信息,请参阅Shim的文档。

印刷

即使在一些现代浏览器中,打印也可能很奇怪。

从Safari v8.0开始,使用固定宽度.container类会导致Safari在打印时使用异常小的字体大小。见第14868期和WebKit bug#138192更多细节。一个潜在的解决办法是以下CSS:

@media print {
 .container {
   width: auto;
 }}

Android股票浏览器

开箱即用,Android 4.1(甚至一些更新的版本显然)随浏览器应用程序一起发布,作为首选的默认浏览器(与Chrome相对)。不幸的是,浏览器应用程序通常存在很多错误和不一致的CSS。

选择菜单

在<select>元素上,如果存在border-radius和/或border应用,Android股票浏览器将不显示侧面控件。(有关详细信息,请参阅此StackOverflow问题。)使用下面的代码片段删除违规的CSS,并<select>在Android股票浏览器中将其呈现为无风格元素。用户代理嗅探避免了对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>

想看个例子吗?看看这个JSBin演示。

验证器

为了向旧的和错误的浏览器提供最好的体验,Bootstrap使用CSS浏览器黑客在几个地方,针对特定浏览器版本的特定CSS,以解决浏览器本身的bug。可以理解,这些黑客会导致CSS验证程序抱怨它们无效。在一些地方,我们还使用了一些还没有完全标准化的尖端css特性,但这些特性纯粹用于渐进增强。

这些验证警告在实践中并不重要,因为css中的非恶意部分确实完全有效,而hacky部分不会干扰非恶意部分的正常运行,因此我们为什么故意忽略这些特定的警告。

我们的HTML文档同样具有一些微不足道的和无关紧要的HTML验证警告,因为我们在Firefox中包含了一个解决方法。


Previous article: Next article: