下载

Bootstrap（当前版本 v3.4.1）有几种快速入门的方式，每种方式都针对不同的技能水平和使用场景。请阅读以下内容，选择最适合您需求的方式。

Bootstrap

编译并压缩后的 CSS、JavaScript 和字体。不包含文档或原始源文件。

下载 Bootstrap

源代码

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

下载源代码

Sass

从 Less 移植到 Sass 的 Bootstrap，便于在 Rails、Compass 或纯 Sass 项目中使用。

下载 Sass

BootstrapCDN

StackPath 团队慷慨地为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。只需使用这些 BootstrapCDN 链接即可。

<!-- 最新编译和压缩的 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选主题 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新编译和压缩的 JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/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 插件。

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

  • less - Bootstrap 主 Less 源文件的路径
  • style - Bootstrap 未压缩 CSS 的路径，该 CSS 已使用默认设置预编译（无自定义）

使用 Composer 安装

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

composer require twbs/bootstrap

Less/Sass 需要 Autoprefixer

Bootstrap 使用 Autoprefixer 来处理 CSS 浏览器前缀。如果你从其 Less/Sass 源代码编译 Bootstrap 并且不使用我们的 Gruntfile，你需要自己将 Autoprefixer 集成到你的构建过程中。如果你使用预编译的 Bootstrap 或使用我们的 Gruntfile，则不必担心这一点，因为 Autoprefixer 已经集成到我们的 Gruntfile 中。

包含内容

Bootstrap 可通过两种形式下载，其中包含以下目录和文件，逻辑上对公共资源进行分组，并提供编译和压缩的变体。

需要 jQuery

请注意，所有 JavaScript 插件都需要包含 jQuery，如 入门模板 中所示。查看我们的 bower.json 以了解支持哪些版本的 jQuery。

预编译的 Bootstrap

下载后，解压缩文件夹以查看（已编译的）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 源代码

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

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

less/、js/ 和 fonts/ 分别是我们的 CSS、JS 和图标字体的源代码。dist/ 文件夹包含上面预编译下载部分中列出的所有内容。docs/ 文件夹包含我们文档的源代码，以及 Bootstrap 使用 examples/。除此之外，任何其他包含的文件都提供对包、许可证信息和开发的支持。

编译 CSS 和 JavaScript

Bootstrap 使用 Grunt 作为其构建系统，提供了方便的方法来使用框架。我们通过它来编译代码、运行测试等。

安装 Grunt

要安装 Grunt，您必须 首先 下载并安装 node.js（其中包含 npm）。npm 代表 node packaged modules，是一种通过 node.js 管理开发依赖的方式。

然后，从命令行：
  1. 使用 npm install -g grunt-cli 全局安装 grunt-cli。
  2. 导航到根目录 /bootstrap/，然后运行 npm install。npm 将查看 package.json 文件并自动安装其中列出的必要本地依赖。

完成后，您将能够从命令行运行各种提供的 Grunt 命令。

可用的 Grunt 命令

grunt dist（仅编译 CSS 和 JavaScript）

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

grunt watch（监视）

监视 Less 源文件，当您保存更改时自动将其重新编译为 CSS。

grunt test（运行测试）

运行 JSHint 并通过 Karma 在真实浏览器中运行 QUnit 测试。

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

构建和测试 CSS、JavaScript 和其他资产，这些资产用于通过 bundle exec jekyll serve 在本地运行文档时使用。

grunt（构建所有内容并运行测试）

编译和压缩 CSS 和 JavaScript，构建文档网站，对文档运行 HTML5 验证器，重新生成 Customizer 资产等。需要 Jekyll。通常只在您自己修改 Bootstrap 时才需要。

故障排除

如果您在安装依赖或运行 Grunt 命令时遇到问题，请首先删除 npm 生成的 /node_modules/ 目录。然后，重新运行 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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/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://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

示例

使用 Bootstrap 的众多组件构建在上面的基本模板之上。我们鼓励您根据个人项目的需要自定义和调整 Bootstrap。

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

使用框架

Starter template example

入门模板

只有最基本的内容：编译后的 CSS 和 JavaScript 以及一个容器。

Bootstrap theme example

Bootstrap 主题

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

Multiple grids example

网格系统

多个网格布局示例，包括所有四个层级、嵌套等。

Jumbotron example

巨幕

围绕巨幕构建，包含导航栏和一些基本的网格列。

Narrow jumbotron example

窄版巨幕

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

导航栏实践

Navbar example

导航栏

超级基本的模板，包含导航栏和一些额外内容。

Static top navbar example

静态顶部导航栏

超级基本的模板，包含静态顶部导航栏和一些额外内容。

Fixed navbar example

固定顶部导航栏

超级基本的模板，包含固定顶部导航栏和一些额外内容。

自定义组件

A one-page template example

封面

用于构建简单美观的首页的单页模板。

Carousel example

轮播

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

Blog layout example

博客

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

Dashboard example

仪表盘

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

Sign-in page example

登录页面

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

Justified nav example

两端对齐导航

创建带有两端对齐链接的自定义导航栏。注意！对 Safari 不太友好。

Sticky footer example

粘性页脚

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

Sticky footer with navbar example

带导航栏的粘性页脚

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

实验性示例

Non-responsive example

非响应式 Bootstrap

按照我们的文档 轻松禁用 Bootstrap 的响应式特性。

Off-canvas navigation example

画布外导航

构建可切换的画布外导航菜单，用于 Bootstrap。

工具

Bootlint

Bootlint 是官方的 Bootstrap HTML lint 工具。它会自动检查以相当"原始"方式使用 Bootstrap 的网页中的几种常见 HTML 错误。原始 Bootstrap 的组件/小部件要求它们在 DOM 中的部分符合特定结构。Bootlint 检查 Bootstrap 组件实例是否具有正确结构的 HTML。考虑将 Bootlint 添加到您的 Bootstrap 网页开发工具链中，这样就不会有任何常见错误减慢您项目的开发速度。

社区

通过这些有用的资源了解 Bootstrap 的开发动态并与社区保持联系。

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

禁用响应式特性

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

禁用页面响应式的步骤

  1. 省略 CSS 文档 中提到的 viewport <meta> 标签
  2. 为每个网格层级的 .container 覆盖 width，使用单个宽度，例如 width: 970px !important; 确保这在默认的 Bootstrap CSS 之后。您可以选择使用媒体查询或一些选择器技巧来避免使用 !important。
  3. 如果使用导航栏，请移除所有导航栏折叠和展开行为。
  4. 对于网格布局，除了使用 medium/large 类外，还可以使用 .col-xs-* 类，或替代它们。不用担心，超小设备网格会缩放到所有分辨率。

您仍然需要 Respond.js 来支持 IE8（因为我们的媒体查询仍然存在，需要处理）。 这会禁用 Bootstrap 的 "移动站点" 方面的特性。

禁用响应式特性的 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）不受支持。

Chrome Firefox Safari
Android 支持 支持 不适用
iOS 支持 支持 支持

桌面浏览器

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

Chrome Firefox Internet Explorer Opera Safari
Mac 支持 支持 不适用 支持 支持
Windows 支持 支持 支持 支持 不支持

在 Windows 上，我们支持 Internet Explorer 8-11。

对于 Firefox，除了最新的正常稳定版本外，我们还支持最新的 Extended Support Release (ESR)（扩展支持版本）。

非官方地，Bootstrap 在 Linux 版的 Chromium 和 Chrome、Linux 版的 Firefox、Internet Explorer 7 以及 Microsoft Edge 中应该看起来和运行得足够好，尽管它们未被官方支持。

有关 Bootstrap 必须应对的一些浏览器错误的列表，请参阅我们的 浏览器错误墙。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 也受支持，但是请注意，这些浏览器不完全支持某些 CSS3 属性和 HTML5 元素。此外，Internet Explorer 8 需要使用 Respond.js 来启用媒体查询支持。

特性 Internet Explorer 8 Internet Explorer 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 与托管在不同（子）域上的 CSS（例如，在 CDN 上）一起使用需要一些额外的设置。请参阅 Respond.js 文档 了解详情。

Respond.js 和 file://

由于浏览器安全规则，Respond.js 不适用于通过 file:// 协议查看的页面（例如，当打开本地 HTML 文件时）。要在 IE8 中测试响应式特性，请通过 HTTP(S) 查看您的页面。请参阅 Respond.js 文档 了解详情。

Respond.js 和 @import

Respond.js 不适用于通过 @import 引用的 CSS。特别是，一些 Drupal 配置已知使用 @import。请参阅 Respond.js 文档 了解详情。

Internet Explorer 8 和 box-sizing

当与 min-width、max-width、min-height 或 max-height 结合使用时，IE8 不完全支持 box-sizing: border-box;。因此，从 v3.0.1 开始，我们不再在 .container 上使用 max-width。

Internet Explorer 8 和 @font-face

当与 :before 结合使用时，IE8 在 @font-face 方面存在一些问题。Bootstrap 在其 Glyphicons 中使用了这种组合。如果页面被缓存，并且在鼠标不在窗口上方的情况下加载（例如，按刷新按钮或在 iframe 中加载内容），则页面会在字体加载之前渲染。将鼠标悬停在页面（body）上将显示一些图标，将鼠标悬停在剩余图标上将显示那些图标。请参阅问题 #13863 了解详情。

IE 兼容模式

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

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

通过打开调试工具来确认文档模式：按 F12 并检查 "Document Mode"（文档模式）。

此标签包含在 Bootstrap 的所有文档和示例中，以确保在每个支持的 Internet Explorer 版本中获得最佳渲染效果。

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

Windows 8 和 Windows Phone 8 中的 Internet Explorer 10

Internet Explorer 10 不区分 设备宽度 和 视口宽度，因此不能正确应用 Bootstrap CSS 中的媒体查询。通常，您只需添加一小段 CSS 来修复此问题：

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

然而，这不适用于运行早于 Update 3（也称为 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/master/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 百分比四舍五入

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

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

模态框、导航栏和虚拟键盘

溢出和滚动

iOS 和 Android 对 <body> 元素上的 overflow: hidden 支持相当有限。因此，当您在这些设备的浏览器中滚动到模态框的顶部或底部之外时，<body> 内容将开始滚动。请参阅 Chrome bug #175502（在 Chrome v40 中修复）和 WebKit bug #153852。

iOS 文本字段和滚动

从 iOS 9.3 开始，当模态框打开时，如果滚动手势的初始触摸在文本 <input> 或 <textarea> 的边界内，则模态框下方的 <body> 内容将被滚动，而不是模态框本身。请参阅 WebKit bug #153856。

虚拟键盘

另外，请注意，如果您使用固定导航栏或在模态框中使用输入框，iOS 存在一个渲染错误，当触发虚拟键盘时不会更新固定元素的位置。一些解决方法包括将您的元素转换为 position: absolute 或在焦点上调用计时器以尝试手动纠正定位。Bootstrap 不处理此问题，因此由您决定哪种解决方案最适合您的应用程序。

导航栏下拉菜单

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

浏览器缩放

页面缩放不可避免地会在某些组件中呈现渲染伪影，无论是在 Bootstrap 中还是在网络的其他部分。根据问题，我们可能能够修复它（先搜索，然后在需要时打开问题）。然而，我们倾向于忽略这些问题，因为它们通常没有直接解决方案，只能通过 hacky 的解决方法。

移动设备上的粘性 :hover/:focus

尽管在大多数触摸屏上不可能真正悬停，但大多数移动浏览器模拟悬停支持并使 :hover "粘性"。换句话说，:hover 样式在点击元素后开始应用，并且仅在用户点击其他元素后停止应用。这可能导致 Bootstrap 的 :hover 状态在这些浏览器上变得不理想地 "卡住"。一些移动浏览器也使 :focus 类似地粘性。目前，除了完全删除这些样式外，没有简单的解决方法。

打印

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

特别是，从 Chrome v32 开始，无论边距设置如何，Chrome 在打印网页时解析媒体查询时使用的视口宽度明显窄于物理纸张尺寸。这可能导致 Bootstrap 的超小网格在打印时意外激活。请参阅问题 #12078 和 Chrome bug #273306 了解一些详情。建议的解决方法：

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

此外，从 Safari v8.0 开始，固定宽度的 .container 可能导致 Safari 在打印时使用异常小的字体大小。有关更多详情，请参阅 #14868 和 WebKit bug #138192。一个潜在的解决方法是添加以下 CSS：

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

Android 原生浏览器

开箱即用，Android 4.1（甚至一些较新的版本显然）附带 Browser 应用作为默认的 Web 浏览器（而不是 Chrome）。不幸的是，Browser 应用在 CSS 方面存在许多错误和不一致之处。

选择菜单

在 <select> 元素上，如果应用了 border-radius 和/或 border，Android 原生浏览器将不显示侧边控件。（有关详情，请参阅 这个 StackOverflow 问题。）使用下面的代码片段来删除有问题的 CSS 并在 Android 原生浏览器上将 <select> 渲染为未样式化元素。用户代理嗅探避免干扰 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 的非 hack 部分完全有效，并且 hack 部分不会干扰非 hack 部分的正常功能，因此我们故意忽略这些特定警告。

由于我们包含了对 某个 Firefox 错误 的解决方法，我们的 HTML 文档同样有一些微不足道的 HTML 验证警告。

第三方支持

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

盒模型

一些第三方软件，包括 Google Maps 和 Google Custom Search Engine，由于 * { box-sizing: border-box; } 规则与 Bootstrap 冲突，该规则使 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 中位于主要内容之前，请在导航之前添加一个 跳转到主要内容 链接（有关简单说明，请参阅 A11Y 项目关于跳过导航链接的文章）。使用 .sr-only 类将在视觉上隐藏跳过链接，而 .sr-only-focusable 类将确保链接在获得焦点时变得可见（对于使用键盘的视力正常用户）。

<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 以 MIT 许可证发布，版权归 2026 Twitter 所有。简化为更小的部分，它可以用以下条件来描述。

它要求您：

  • 当您在作品中使用 Bootstrap 的 CSS 和 JavaScript 文件时，保留其中包含的许可证和版权声明

它允许您：

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

它禁止您：

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

它不要求您：

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

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

翻译

社区成员已经将 Bootstrap 的文档翻译成各种语言。这些翻译均未获得官方支持，并且可能并不总是最新的。

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

完成了新的或更好的翻译？打开一个 pull request 将其添加到我们的列表中。