入门
Bootstrap 概述、如何下载和使用、基本模板和示例等。
Bootstrap 概述、如何下载和使用、基本模板和示例等。
Bootstrap(当前为 v3.3.7)有几种简单的快速入门方法,每种方法都适用于不同的技能水平和用例。通读以了解适合您特定需求的内容。
jsDelivr的人们慷慨地为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。只需使用这些Bootstrap CDN链接。
您还可以使用Bower安装和管理 Bootstrap 的 Less、CSS、JavaScript 和字体:
您还可以使用npm安装 Bootstrap :
require('bootstrap')
将所有 Bootstrap 的 jQuery 插件加载到 jQuery 对象上。bootstrap
模块本身不导出任何东西。/js/*.js
您可以通过加载包顶级目录下的文件来单独手动加载 Bootstrap 的 jQuery 插件。
Bootstrappackage.json
在以下键下包含一些额外的元数据:
less
- Bootstrap 的主要Less源文件的路径style
- 使用默认设置预编译的 Bootstrap 的非缩小 CSS 的路径(无自定义)您还可以使用Composer安装和管理 Bootstrap 的 Less、CSS、JavaScript 和字体:
Bootstrap 使用Autoprefixer来处理CSS 供应商前缀。如果你从它的 Less/Sass 源代码编译 Bootstrap,而不是使用我们的 Gruntfile,你需要自己将 Autoprefixer 集成到你的构建过程中。如果您使用预编译的 Bootstrap 或使用我们的 Gruntfile,则无需担心这一点,因为 Autoprefixer 已经集成到我们的 Gruntfile 中。
Bootstrap 可以两种形式下载,您可以在其中找到以下目录和文件,这些目录和文件在逻辑上对公共资源进行了分组,并提供了已编译和缩小的变体。
请注意,所有 JavaScript 插件都需要包含 jQuery,如starter 模板所示。请咨询我们bower.json
以了解支持的 jQuery 版本。
下载后,解压缩压缩文件夹以查看(已编译)Bootstrap 的结构。你会看到这样的东西:
这是 Bootstrap 最基本的形式:预编译文件,几乎可以在任何 Web 项目中快速插入使用。我们提供编译后的 CSS 和 JS ( bootstrap.*
),以及编译和缩小的 CSS 和 JS ( bootstrap.min.*
)。CSS源映射( bootstrap.*.map
) 可用于某些浏览器的开发人员工具。包括来自 Glyphicons 的字体,以及可选的 Bootstrap 主题。
Bootstrap 源代码下载包括预编译的 CSS、JavaScript 和字体资源,以及源代码 Less、JavaScript 和文档。更具体地说,它包括以下内容和更多内容:
、和是我们的 CSS less/
、JS 和图标字体(分别)的源代码。该文件夹包括上面预编译下载部分中列出的所有内容。该文件夹包含我们文档的源代码,以及Bootstrap 的使用。除此之外,任何其他包含的文件都提供对包、许可证信息和开发的支持。js/
fonts/
dist/
docs/
examples/
Bootstrap 使用Grunt作为其构建系统,并提供了使用框架的便捷方法。这就是我们编译代码、运行测试等的方式。
要安装 Grunt,您必须首先下载并安装 node.js(包括 npm)。npm 代表node packaged modules,是一种通过 node.js 管理开发依赖的方法。
然后,从命令行:grunt-cli
_npm install -g grunt-cli
/bootstrap/
目录,然后运行npm install
. npm 将查看该package.json
文件并自动安装其中列出的必要本地依赖项。完成后,您将能够运行从命令行提供的各种 Grunt 命令。
grunt dist
(只需编译 CSS 和 JavaScript)/dist/
使用已编译和缩小的 CSS 和 JavaScript 文件重新生成目录。作为 Bootstrap 用户,这通常是您想要的命令。
grunt watch
(手表)监视 Less 源文件,并在您保存更改时自动将它们重新编译为 CSS。
grunt test
(运行测试)运行JSHint并在PhantomJS中无头运行QUnit测试。
grunt docs
(构建和测试文档资产)构建和测试在本地运行文档时使用的 CSS、JavaScript 和其他资产bundle exec jekyll serve
。
grunt
(绝对构建一切并运行测试)编译和压缩 CSS 和 JavaScript,构建文档网站,针对文档运行 HTML5 验证器,重新生成定制器资产等等。需要Jekyll。通常只有在您对 Bootstrap 本身进行黑客攻击时才需要。
如果您在安装依赖项或运行 Grunt 命令时遇到问题,请先删除/node_modules/
npm 生成的目录。然后,重新运行npm install
。
使用 Bootstrap 的许多组件在上面的基本模板上构建。我们鼓励您自定义和调整 Bootstrap 以满足您个人项目的需求。
通过下载 Bootstrap 存储库,获取以下每个示例的源代码。示例可以在docs/examples/
目录中找到。
Bootlint是官方的 Bootstrap HTML linter工具。它会自动检查以相当“普通”方式使用 Bootstrap 的网页中的几个常见 HTML 错误。Vanilla Bootstrap 的组件/小部件要求它们的 DOM 部分符合某些结构。Bootlint 检查 Bootstrap 组件的实例是否具有结构正确的 HTML。考虑将 Bootlint 添加到您的 Bootstrap Web 开发工具链中,这样所有常见错误都不会减慢您的项目开发速度。
随时了解 Bootstrap 的最新发展,并通过这些有用的资源与社区联系。
irc.freenode.net
中使用服务器中的IRC 与其他 Bootstrappers 聊天。twitter-bootstrap-3
。bootstrap
分发时,开发人员应在修改或添加到 Bootstrap 功能的包上使用关键字,以获得最大的可发现性。您还可以在 Twitter 上关注 @getbootstrap 以获取最新的八卦和精彩的音乐视频。
Bootstrap 会自动调整您的页面以适应各种屏幕尺寸。以下是禁用此功能的方法,以便您的页面像这个非响应示例一样工作。
<meta>
中提到的视口width
on确保它位于默认 Bootstrap CSS 之后。您可以选择避免使用媒体查询或某些选择器。.container
width: 970px !important;
!important
.col-xs-*
类来补充或代替中型/大型。别担心,超小的设备网格可以扩展到所有分辨率。对于 IE8,您仍然需要 Respond.js(因为我们的媒体查询仍然存在并且需要处理)。这会禁用 Bootstrap 的“移动站点”方面。
我们已将这些步骤应用于示例。阅读其源代码以查看实现的具体更改。
想要从旧版本的 Bootstrap 迁移到 v3.x?查看我们的迁移指南。
Bootstrap 旨在在最新的桌面和移动浏览器中发挥最佳效果,这意味着旧版浏览器可能会显示不同样式但功能齐全的某些组件的渲染。
具体来说,我们支持以下浏览器和平台的最新版本。
不明确支持使用最新版本的 WebKit、Blink 或 Gecko 的替代浏览器,无论是直接还是通过平台的 Web 视图 API。但是,Bootstrap 应该(在大多数情况下)在这些浏览器中也能正确显示和运行。下面提供了更具体的支持信息。
一般来说,Bootstrap 支持各大平台默认浏览器的最新版本。请注意,不支持代理浏览器(例如 Opera Mini、Opera Mobile 的 Turbo 模式、UC Browser Mini、Amazon Silk)。
铬合金 | 火狐 | 苹果浏览器 | |
---|---|---|---|
安卓 | 支持的 | 支持的 | 不适用 |
iOS | 支持的 | 支持的 | 支持的 |
同样,支持大多数桌面浏览器的最新版本。
铬合金 | 火狐 | IE浏览器 | 歌剧 | 苹果浏览器 | |
---|---|---|---|---|---|
苹果电脑 | 支持的 | 支持的 | 不适用 | 支持的 | 支持的 |
视窗 | 支持的 | 支持的 | 支持的 | 支持的 | 不支持 |
在 Windows 上,我们支持 Internet Explorer 8-11。
对于 Firefox,除了最新的正常稳定版本外,我们还支持最新的扩展支持版本 (ESR)版本的 Firefox。
非官方的,Bootstrap 在 Chromium 和 Chrome for Linux、Firefox for Linux 和 Internet Explorer 7 以及 Microsoft Edge 中的外观和行为应该足够好,尽管它们不受官方支持。
有关 Bootstrap 必须解决的一些浏览器错误的列表,请参阅我们的浏览器错误墙。
Internet Explorer 8 和 9 也受支持,但是请注意,这些浏览器不完全支持某些 CSS3 属性和 HTML5 元素。此外,Internet Explorer 8 需要使用Respond.js来启用媒体查询支持。
特征 | 互联网浏览器 8 | 互联网浏览器 9 |
---|---|---|
border-radius |
不支持 | 支持的 |
box-shadow |
不支持 | 支持的 |
transform |
不支持 | 支持,带-ms 前缀 |
transition |
不支持 | |
placeholder |
不支持 |
访问Can I use...了解有关浏览器对 CSS3 和 HTML5 功能的支持的详细信息。
在 Internet Explorer 8 的开发和生产环境中使用 Respond.js 时,请注意以下注意事项。
将 Respond.js 与托管在不同(子)域(例如 CDN)上的 CSS 一起使用需要一些额外的设置。有关详细信息,请参阅 Respond.js 文档。
file://
由于浏览器安全规则,Respond.js 不适用于通过file://
协议查看的页面(例如打开本地 HTML 文件时)。要测试 IE8 中的响应功能,请通过 HTTP(S) 查看您的页面。有关详细信息,请参阅 Respond.js 文档。
@import
Respond.js 不适用于通过@import
. 特别是,已知某些 Drupal 配置使用@import
. 有关详细信息,请参阅 Respond.js 文档。
与、、或box-sizing: border-box;
结合使用时, IE8 不完全支持。因此,从 v3.0.1 开始,我们不再使用on s。min-width
max-width
min-height
max-height
max-width
.container
IE8@font-face
与:before
. Bootstrap 将这种组合与它的 Glyphicons 一起使用。如果页面被缓存,并且在没有鼠标悬停在窗口上的情况下加载(即点击刷新按钮或在 iframe 中加载某些内容),则页面在字体加载之前被渲染。将鼠标悬停在页面(正文)上会显示一些图标,悬停在其余图标上也会显示这些图标。有关详细信息,请参阅问题 #13863。
旧的 Internet Explorer 兼容模式不支持 Bootstrap。为确保您使用的是最新的 IE 呈现模式,请考虑<meta>
在您的页面中包含适当的标签:
打开调试工具确认文档模式:按下F12并勾选“文档模式”。
此标记包含在 Bootstrap 的所有文档和示例中,以确保在每个受支持的 Internet Explorer 版本中实现最佳呈现。
有关更多信息,请参阅此 StackOverflow 问题。
Internet Explorer 10 不会区分device width和viewport width,因此无法在 Bootstrap 的 CSS 中正确应用媒体查询。通常,您只需添加一个快速的 CSS 片段来解决此问题:
但是,这不适用于运行早于Update 3 (aka GDR3)的 Windows Phone 8 版本的设备,因为它会导致此类设备显示主要是桌面视图,而不是狭窄的“电话”视图。为了解决这个问题,您需要包含以下 CSS 和 JavaScript 来解决该错误。
有关更多信息和使用指南,请阅读Windows Phone 8 和 Device-Width。
作为提示,我们将其包含在 Bootstrap 的所有文档和示例中作为演示。
.col-*-1
在 v7.1 for OS X 和 Safari for iOS v8.0 之前版本的 Safari 渲染引擎在我们的网格类中使用的小数位数方面存在一些问题。因此,如果您有 12 个单独的网格列,您会注意到与其他列行相比,它们显得不足。除了升级 Safari/iOS,您还有一些变通方法:
.pull-right
到最后一个网格列以获得右对齐overflow: hidden
在 iOS 和 Android 中,对元素的支持<body>
非常有限。为此,当您在任一设备的浏览器中滚动超过模式的顶部或底部时,<body>
内容将开始滚动。请参阅Chrome 错误 #175502(在 Chrome v40 中修复)和WebKit 错误 #153852。
从 iOS 9.3 开始,当 modal 打开时,如果滚动手势的初始触摸在 textual<input>
或 a的边界内<textarea>
,则将滚动 modal 下面的<body>
内容而不是 modal 本身。请参阅WebKit 错误 #153856。
另外,请注意,如果您使用固定导航栏或在模式中使用输入,iOS 有一个渲染错误,即在触发虚拟键盘时不会更新固定元素的位置。一些解决方法包括将您的元素转换为position: absolute
或调用焦点计时器以尝试手动更正定位。这不是由 Bootstrap 处理的,因此由您决定哪种解决方案最适合您的应用程序。
由于 z-indexing 的复杂性,该.dropdown-backdrop
元素未在 iOS 上的导航中使用。因此,要关闭导航栏中的下拉菜单,您必须直接单击下拉元素(或任何其他会在 iOS 中触发单击事件的元素)。
页面缩放不可避免地会在某些组件中呈现渲染伪影,无论是在 Bootstrap 中还是在 Web 的其余部分中。根据问题,我们可能能够修复它(先搜索,然后在需要时打开问题)。然而,我们倾向于忽略这些,因为除了 hacky 变通方法之外,它们通常没有直接的解决方案。
:hover
/:focus
在移动设备上尽管在大多数触摸屏上无法实现真正的悬停,但大多数移动浏览器都模拟悬停支持并使其:hover
“粘滞”。换句话说,:hover
样式在点击一个元素后开始应用,只有在用户点击其他元素后才停止应用。这可能会导致 Bootstrap 的:hover
状态在此类浏览器上变得不受欢迎。一些移动浏览器也:focus
具有类似的粘性。除了完全删除此类样式外,目前没有针对这些问题的简单解决方法。
即使在一些现代浏览器中,打印也可能很古怪。
特别是,从 Chrome v32 开始,无论边距设置如何,Chrome 在打印网页时解析媒体查询时使用的视口宽度明显小于物理纸张尺寸。这可能会导致 Bootstrap 的超小网格在打印时被意外激活。有关详细信息,请参阅问题 #12078和Chrome 错误 #273306。建议的解决方法:
@screen-*
以便您的打印纸被认为大于特小。此外,从 Safari v8.0 开始,fixed-width.container
可能会导致 Safari 在打印时使用异常小的字体大小。有关更多详细信息,请参阅#14868和WebKit 错误 #138192。一种可能的解决方法是添加以下 CSS:
开箱即用,Android 4.1(甚至显然是一些较新的版本)附带了浏览器应用程序作为默认的网络浏览器选择(而不是 Chrome)。不幸的是,浏览器应用程序通常有很多错误和与 CSS 不一致的地方。
在<select>
元素上,如果应用了border-radius
和/或,Android 股票浏览器将不会显示侧面控件border
。(有关详细信息,请参阅此 StackOverflow 问题。)使用下面的代码片段删除有问题的 CSS 并将其呈现<select>
为 Android 股票浏览器上的无样式元素。用户代理嗅探可避免干扰 Chrome、Safari 和 Mozilla 浏览器。
想看一个例子吗?看看这个 JS Bin 演示。
为了给旧的和有问题的浏览器提供尽可能好的体验,Bootstrap 在几个地方使用CSS 浏览器黑客来将特殊的 CSS 定位到某些浏览器版本,以解决浏览器本身的错误。这些 hack 可以理解地导致 CSS 验证器抱怨它们是无效的。在一些地方,我们还使用了尚未完全标准化的前沿 CSS 特性,但这些特性纯粹用于渐进增强。
这些验证警告在实践中并不重要,因为我们的 CSS 的非 hacky 部分确实完全验证并且 hacky 部分不会干扰非 hacky 部分的正常运行,因此我们故意忽略这些特定警告。
由于我们包含了针对某个 Firefox 错误的解决方法,我们的 HTML 文档同样有一些琐碎和无关紧要的 HTML 验证警告。
虽然我们不正式支持任何第三方插件或附加组件,但我们确实提供了一些有用的建议来帮助您避免项目中的潜在问题。
一些第三方软件,包括谷歌地图和���歌自定义搜索引擎,与 Bootstrap 冲突,* { box-sizing: border-box; }
这是因为它padding
不会影响元素的最终计算宽度。在 CSS Tricks了解更多关于盒子模型和大小的信息。
根据上下文,您可以根据需要覆盖(选项 1)或重置整个区域的框大小(选项 2)。
Bootstrap 遵循常见的 Web 标准,并且可以用最少的额外工作来创建那些使用AT的人可以访问的站点。
如果您的导航包含许多链接并且位于 DOM 中的主要内容Skip to main content
之前,请在导航之前添加一个链接(有关简单说明,请参阅此A11Y 项目关于跳过导航链接的文章)。使用.sr-only
该类将在视觉上隐藏跳过链接,并且.sr-only-focusable
该类将确保该链接在获得焦点后变为可见(对于有视力的键盘用户)。
由于 Chrome(请参阅Chromium 错误跟踪器中的问题 262171)和 Internet Explorer(请参阅有关页内链接和焦点顺序的这篇文章)中长期存在的缺点/错误,您需要确保跳过链接的目标至少可以通过添加tabindex="-1"
.
此外,您可能希望tabindex="-1"
使用#content:focus { outline: none; }
.
请注意,此错误还会影响您的网站可能使用的任何其他页内链接,使它们对键盘用户无用。您可以考虑为所有其他作为链接目标的命名锚点/片段标识符添加类似的权宜之计。
嵌套标题 ( <h1>
- <h6>
) 时,您的主文档标题应为<h1>
. 后续标题应合理使用<h2>
-<h6>
以便屏幕阅读器可以为您的页面构建目录。
在HTML CodeSniffer和宾夕法尼亚州立大学的 AccessAbility中了解更多信息。
目前,Bootstrap 中提供了一些默认颜色组合(例如各种样式的按钮类、一些用于基本代码块的代码突出显示颜色、.bg-primary
上下文背景助手类以及在白色背景上使用时的默认链接颜色)对比度低(低于推荐的 4.5:1 比例)。这可能会给视力低下或色盲的用户带来问题。可能需要修改这些默认颜色以增加它们的对比度和易读性。
Bootstrap 在 MIT 许可下发布,版权所有 2016 Twitter。归结为更小的块,可以用以下条件来描述。
完整的 Bootstrap 许可证位于项目存储库中以获取更多信息。
社区成员已将 Bootstrap 的文档翻译成各种语言。没有一个是官方支持的,它们可能并不总是最新的。
我们不帮助组织或托管翻译,我们只是链接到它们。
完成了新的或更好的翻译?打开拉取请求以将其添加到我们的列表中。