非常教程

Bootstrap 4参考手册

快速开始 | Getting started

浏览器和设备 | Browsers and devices

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

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

主页 https://getbootstrap.com/
源码 https://github.com/twbs/bootstrap
版本 4
发布版本 4.0.0-beta.2

Bootstrap 4目录

1.快速开始 | Getting started
2.组件·信息提示框 | Alerts
3.组件·徽章 | Badges
4.组件·面包屑导航 | Breadcrumb
5.组件·按钮组 | Button group
6.组件·按钮 | Buttons
7.组件·卡片 | Cards
8.组件·轮播 | Carousel
9.组件·折叠 | Collapse
10.组件·下拉菜单 | Dropdowns
11.组件·表单 | Forms
12.组件·输入框组 | Input group
13.组件·大屏幕 | Jumbotron
14.组件·列表组 | List group
15.组件·模态框 | Modal
16.组件·导航栏 | Navbar
17.组件·导航 | Navs
18.组件·分页 | Pagination
19.组件·弹出框 | Popovers
20.组件·进度条 | Progress
21.组件·滚动监听 | Scrollspy
22.组件·提示工具 | Tooltips
23.内容 | Content
24.布局 | Layout
25.迁移 | Migration
26.实用工具 | Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex(弹性)布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航(Breadcrumb)