目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

了解从现代到旧的浏览器和设备,这些浏览器和设备都是由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中包含了一个解决方法。


上一篇:下一篇: