入门 · 引导简体中文

Bootstrap（当前为 v3.4.1）有几种简单的快速入门方法，每种方法都适用于不同的技能水平和用例。通读以了解适合您特定需求的内容。

引导程序

编译和缩小 CSS、JavaScript 和字体。不包含任何文档或原始源文件。

下载引导程序

源代码

Source Less、JavaScript 和字体文件，以及我们的文档。需要一个 Less 编译器和一些设置。

下载源

萨斯

Bootstrap 从 Less 移植到 Sass，以便轻松包含在 Rails、Compass 或纯 Sass 项目中。

下载萨斯

jsDelivr

jsDelivr的人们慷慨地为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。只需使用这些jsDelivr链接。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

使用 Bower 安装

您还可以使用Bower安装和管理 Bootstrap 的 Less、CSS、JavaScript 和字体：

bower install bootstrap

使用 npm 安装

您还可以使用npm安装 Bootstrap ：

npm install bootstrap@3

require('bootstrap')会将所有 Bootstrap 的 jQuery 插件加载到 jQuery 对象上。bootstrap模块本身不导出任何东西。/js/*.js您可以通过加载包顶级目录下的文件来单独手动加载 Bootstrap 的 jQuery 插件。

Bootstrappackage.json在以下键下包含一些额外的元数据：

less- Bootstrap 的主要Less源文件的路径
style- 使用默认设置预编译的 Bootstrap 的非缩小 CSS 的路径（无自定义）

使用 Composer 安装

您还可以使用Composer安装和管理 Bootstrap 的 Less、CSS、JavaScript 和字体：

composer require twbs/bootstrap

Less/Sass 需要自动前缀

Bootstrap 使用Autoprefixer来处理CSS 供应商前缀。如果你从它的 Less/Sass 源代码编译 Bootstrap，而不是使用我们的 Gruntfile，你需要自己将 Autoprefixer 集成到你的构建过程中。如果您使用预编译的 Bootstrap 或使用我们的 Gruntfile，则无需担心这一点，因为 Autoprefixer 已经集成到我们的 Gruntfile 中。

Bootstrap 可以两种形式下载，您可以在其中找到以下目录和文件，这些目录和文件在逻辑上对公共资源进行了分组，并提供了已编译和缩小的变体。

需要 jQuery

请注意，所有 JavaScript 插件都需要包含 jQuery，如starter 模板所示。请咨询我们bower.json以了解支持的 jQuery 版本。

预编译引导

下载后，解压缩压缩文件夹以查看（已编译）Bootstrap 的结构。你会看到这样的东西：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

这是 Bootstrap 最基本的形式：预编译文件，几乎可以在任何 Web 项目中快速插入使用。我们提供编译后的 CSS 和 JS ( bootstrap.*)，以及编译和缩小的 CSS 和 JS ( bootstrap.min.*)。CSS源映射( bootstrap.*.map) 可用于某些浏览器的开发人员工具。包括来自 Glyphicons 的字体，以及可选的 Bootstrap 主题。

引导源代码

Bootstrap 源代码下载包括预编译的 CSS、JavaScript 和字体资产，以及源 Less、JavaScript 和文档。更具体地说，它包括以下内容和更多内容：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

、和是我们的 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 命令

`grunt dist`（只需编译 CSS 和 JavaScript）

/dist/使用已编译和缩小的 CSS 和 JavaScript 文件重新生成目录。作为 Bootstrap 用户，这通常是您想要的命令。

`grunt watch`（手表）

监视 Less 源文件，并在您保存更改时自动将它们重新编译为 CSS。

`grunt test`（运行测试）

借助Karma ，运行JSHint并在真实浏览器中运行QUnit测试。

`grunt docs`（构建和测试文档资产）

构建和测试在本地运行文档时使用的 CSS、JavaScript 和其他资产bundle exec jekyll serve。

`grunt`（绝对构建一切并运行测试）

编译和压缩 CSS 和 JavaScript，构建文档网站，针对文档运行 HTML5 验证器，重新生成定制器资产等等。需要Jekyll。通常只有在您对 Bootstrap 本身进行黑客攻击时才需要。

故障排除

如果您在安装依赖项或运行 Grunt 命令时遇到问题，请先删除/node_modules/npm 生成的目录。然后，重新运行npm install。

从这个基本的 HTML 模板开始，或者修改这些示例。我们希望您能够自定义我们的模板和示例，使其适应您的需求。

复制下面的 HTML 以开始使用最小的 Bootstrap 文档。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

使用 Bootstrap 的许多组件在上面的基本模板上构建。我们鼓励您自定义和调整 Bootstrap 以满足您个人项目的需求。

通过下载 Bootstrap 存储库，获取以下每个示例的源代码。示例可以在docs/examples/目录中找到。

使用框架

入门模板

除了基础知识：编译的 CSS 和 JavaScript 以及容器。

引导主题

加载可选的 Bootstrap 主题以获得视觉增强的体验。

网格

具有所有四层、嵌套等的网格布局的多个示例。

超大屏幕

使用导航栏和一些基本的网格列围绕 jumbotron 构建。

窄大屏幕

通过缩小默认容器和 jumbotron 来构建更自定义的页面。

导航栏在行动

导航栏

包含导航栏和一些附加内容的超级基本模板。

静态顶部导航栏

带有静态顶部导航栏以及一些附加内容的超级基本模板。

固定导航栏

带有固定顶部导航栏的超级基本模板以及一些附加内容。

自定义组件

覆盖

用于构建简单而漂亮的主页的单页模板。

旋转木马

自定义导航栏和轮播，然后添加一些新组件。

博客

简单的两列博客布局，带有自定义导航、标题和类型。

仪表板

带有固定侧边栏和导航栏的管理仪表板的基本结构。

登录页面

用于简单登录表单的自定义表单布局和设计。

合理的导航

创建带有对齐链接的自定义导航栏。小心！对 Safari 不太友好。

粘性页脚

当内容比它短时，将页脚附加到视口的底部。

带有导航栏的粘性页脚

将页脚附加到视口的底部，顶部有一个固定的导航栏。

实验

无响应的引导程序

根据我们的文档轻松禁用 Bootstrap 的响应能力。

画布外

构建一个可切换的画布外导航菜单以与 Bootstrap 一起使用。

引导线

Bootlint是官方的 Bootstrap HTML linter工具。它会自动检查以相当“普通”方式使用 Bootstrap 的网页中的几个常见 HTML 错误。Vanilla Bootstrap 的组件/小部件要求它们的 DOM 部分符合某些结构。Bootlint 检查 Bootstrap 组件的实例是否具有结构正确的 HTML。考虑将 Bootlint 添加到您的 Bootstrap Web 开发工具链中，这样所有常见错误都不会减慢您的项目开发速度。

随时了解 Bootstrap 的最新发展，并通过这些有用的资源与社区联系。

阅读并订阅官方 Bootstrap 博客。
在##bootstrap 频道irc.freenode.net中使用服务器中的IRC 与其他 Bootstrappers 聊天。
如需使用 Bootstrap 的帮助，请使用标签询问 StackOverflowtwitter-bootstrap-3。
当通过npm或类似的交付机制bootstrap分发时，开发人员应在修改或添加到 Bootstrap 功能的包上使用关键字，以获得最大的可发现性。
在Bootstrap Expo上查找人们使用 Bootstrap 进行构建的鼓舞人心的示例。

您还可以在 Twitter 上关注 @getbootstrap 以获取最新的八卦和精彩的音乐视频。

Bootstrap 会自动调整您的页面以适应各种屏幕尺寸。以下是禁用此功能的方法，以便您的页面像这个非响应示例一样工作。

禁用页面响应的步骤

省略CSS 文档<meta>中提到的视口
例如，使用单个宽度覆盖每个网格层的widthon确保它位于默认 Bootstrap CSS 之后。您可以选择避免使用媒体查询或某些选择器。.containerwidth: 970px !important;!important
如果使用导航栏，请删除所有导航栏折叠和展开行为。
对于网格布局，使用.col-xs-*类来补充或代替中型/大型。别担心，超小的设备网格可以扩展到所有分辨率。

对于 IE8，您仍然需要 Respond.js（因为我们的媒体查询仍然存在并且需要处理）。这会禁用 Bootstrap 的“移动站点”方面。

禁用响应的引导模板

我们已将这些步骤应用于示例。阅读其源代码以查看实现的具体更改。

查看无响应示例

从 v2.x 迁移到 v3.x

想要从旧版本的 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

还支持 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

在 Internet Explorer 8 的开发和生产环境中使用 Respond.js 时，请注意以下注意事项。

Respond.js 和跨域 CSS

将 Respond.js 与托管在不同（子）域（例如，CDN）上的 CSS 一起使用需要一些额外的设置。有关详细信息，请参阅 Respond.js 文档。

Respond.js 和`file://`

由于浏览器安全规则，Respond.js 不适用于通过file://协议查看的页面（例如打开本地 HTML 文件时）。要测试 IE8 中的响应功能，请通过 HTTP(S) 查看您的页面。有关详细信息，请参阅 Respond.js 文档。

Respond.js 和`@import`

Respond.js 不适用于通过@import. 特别是，已知某些 Drupal 配置使用@import. 有关详细信息，请参阅 Respond.js 文档。

Internet Explorer 8 和 box-sizing

与、、或box-sizing: border-box;结合使用时， IE8 不完全支持。出于这个原因，从 v3.0.1 开始，我们不再使用on s。min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 和@font-face

IE8@font-face与:before. Bootstrap 将这种组合与它的 Glyphicons 一起使用。如果页面被缓存，并且在没有鼠标悬停在窗口上的情况下加载（即点击刷新按钮或在 iframe 中加载某些内容），则页面在字体加载之前被渲染。将鼠标悬停在页面（正文）上将显示一些图标，将鼠标悬停在其余图标上也会显示这些图标。有关详细信息，请参阅问题 #13863。

IE 兼容模式

旧的 Internet Explorer 兼容模式不支持 Bootstrap。为确保您使用的是最新的 IE 呈现模式，请考虑<meta>在您的页面中包含适当的标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

打开调试工具确认文档模式：按下F12并勾选“文档模式”。

此标记包含在 Bootstrap 的所有文档和示例中，以确保在每个受支持的 Internet Explorer 版本中实现最佳呈现。

有关更多信息，请参阅此 StackOverflow 问题。

Windows 8 和 Windows Phone 8 中的 Internet Explorer 10

Internet Explorer 10 不会区分device width和viewport width，因此无法在 Bootstrap 的 CSS 中正确应用媒体查询。通常，您只需添加一个快速的 CSS 片段来解决此问题：

@-ms-viewport       { width: device-width; }

但是，这不适用于运行早于Update 3 (aka GDR3)的 Windows Phone 8 版本的设备，因为它会导致此类设备显示主要是桌面视图，而不是狭窄的“电话”视图。要解决此问题，您需要包含以下 CSS 和 JavaScript 来解决该错误。

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

有关更多信息和使用指南，请阅读Windows Phone 8 和 Device-Width。

作为提醒，我们将其包含在 Bootstrap 的所有文档和示例中作为演示。

Safari 百分比舍入

.col-*-1在 v7.1 for OS X 和 Safari for iOS v8.0 之前版本的 Safari 渲染引擎在我们的网格类中使用的小数位数方面存在一些问题。因此，如果您有 12 个单独的网格列，您会注意到与其他列行相比，它们显得不足。除了升级 Safari/iOS，您还有一些变通方法：

添加.pull-right到最后一个网格列以获得右对齐
手动调整百分比以获得 Safari 的完美舍入（比第一个选项更难）

模态、导航栏和虚拟键盘

溢出和滚动

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

iOS 文本字段和滚动

从 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。建议的解决方法：

拥抱超小网格，并确保您的页面在其下看起来可以接受。
自定义 Less 变量的值，@screen-*以便您的打印纸被认为大于特小。
添加自定义媒体查询以仅更改打印媒体的网格大小断点。

此外，从 Safari v8.0 开始，fixed-width.container可能会导致 Safari 在打印时使用异常小的字体大小。有关更多详细信息，请参阅#14868和WebKit 错误 #138192。一种可能的解决方法是添加以下 CSS：

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

安卓股票浏览器

开箱即用，Android 4.1（甚至显然是一些较新的版本）附带浏览器应用程序作为选择的默认网络浏览器（而不是 Chrome）。不幸的是，浏览器应用程序通常有很多错误和与 CSS 不一致的地方。

选择菜单

在<select>元素上，如果应用了border-radius和/或，Android 股票浏览器将不会显示侧面控件border。（有关详细信息，请参阅此 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>

想看一个例子吗？看看这个 JS Bin 演示。

验证器

为了给旧的和有问题的浏览器提供尽可能好的体验，Bootstrap 在几个地方使用CSS 浏览器 hack将特殊的 CSS 定位到某些浏览器版本，以解决浏览器本身的错误。这些 hack 可以理解地导致 CSS 验证器抱怨它们是无效的。在一些地方，我们还使用了尚未完全标准化的前沿 CSS 功能，但这些功能纯粹用于渐进增强。

这些验证警告在实践中并不重要，因为我们的 CSS 的非 hacky 部分确实完全验证并且 hacky 部分不会干扰非 hacky 部分的正常运行，因此我们故意忽略这些特定警告。

由于我们包含了针对某个 Firefox 错误的解决方法，我们的 HTML 文档同样有一些琐碎和无关紧要的 HTML 验证警告。

虽然我们不正式支持任何第三方插件或附加组件，但我们确实提供了一些有用的建议来帮助您避免项目中的潜在问题。

盒子尺寸

一些第三方软件，包括谷歌地图和谷歌自定义搜索引擎，与 Bootstrap 冲突，* { box-sizing: border-box; }这是因为它padding不会影响元素的最终计算宽度。在 CSS Tricks了解更多关于盒子模型和大小的信息。

根据上下文，您可以根据需要覆盖（选项 1）或重置整个区域的框大小（选项 2）。

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

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; }.

请注意，此错误还会影响您的网站可能使用的任何其他页内链接，使它们对键盘用户无用。您可以考虑为所有其他作为链接目标的命名锚点/片段标识符添加类似的权宜之计。

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

嵌套标题

嵌套标题 ( <h1>- <h6>) 时，您的主文档标题应为<h1>. 后续标题应合理使用<h2>-<h6>以便屏幕阅读器可以为您的页面构建目录。

在HTML CodeSniffer和宾夕法尼亚州立大学的 AccessAbility了解更多信息。

颜色对比

目前，Bootstrap 中提供了一些默认颜色组合（例如各种样式的按钮类、一些用于基本代码块的代码突出显示颜色、.bg-primary 上下文背景助手类以及在白色背景上使用时的默认链接颜色）对比度低（低于推荐的 4.5:1 比例）。这可能会给视力低下或色盲的用户带来问题。可能需要修改这些默认颜色以增加其对比度和易读性。

其他资源

它要求您：

在您的作品中使用 Bootstrap 的 CSS 和 JavaScript 文件时，请保留许可和版权声明

它允许您：

全部或部分免费下载和使用 Bootstrap，用于个人、私人、公司内部或商业目的
在您创建的包或发行版中使用 Bootstrap
修改源代码
授予子许可以修改和分发 Bootstrap 给未包含在许可中的第三方

它禁止您：

由于 Bootstrap 不提供任何保证，因此请作者和许可证所有者承担损害赔偿责任
在没有适当归属的情况下重新分发任何 Bootstrap
以任何可能声明或暗示 Twitter 认可您的分发的方式使用 Twitter 拥有的任何标记
以任何可能声明或暗示您创建了相关 Twitter 软件的方式使用 Twitter 拥有的任何标记

它不要求您：

包括 Bootstrap 本身的源代码，或您可能对其进行的任何修改的源代码，在您可能组装的任何包含它的重新分发中
将您对 Bootstrap 所做的更改提交回 Bootstrap 项目（尽管鼓励此类反馈）

完整的 Bootstrap 许可证位于项目存储库中以获取更多信息。

社区成员已将 Bootstrap 的文档翻译成各种语言。没有一个是官方支持的，它们可能并不总是最新的。

我们不帮助组织或托管翻译，我们只是链接到它们。

完成了新的或更好的翻译？打开拉取请求以将其添加到我们的列表中。

入门

下载