Bootstrap4 中文文档\手册

概览

介绍

开始使用 Bootstrap 吧！ Bootstrap 是一套流行的前端框架，它帮助你轻松构建对移动设备很友好的响应式网站。

开始

希望快速添加 Bootstrap 到你的项目？使用 BootstrapCDN ，由 StackPath 的人免费提供。使用包管理器还是需要下载源文件？点击左边导航的“下载”来获取所需信息

CSS

复制下面这行代码到 <head> 标签，以加载 Bootstrap 的样式表。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

基本上，大多数组件需要依赖Javascript来实现功能。 Bootstrap 需要 jQuery, Popper.js, 以及 Bootstrap 自带的JS来实现功能。请将以下代码添加到 </body> 标签之前。

在这里，我们使用 jQuery 的精简版本（slim build），不过完整版本的Jquery也是可以用的。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>

好奇哪些组件明确需要jQuery，Bootstrap 自带的JS以及Popper.js？单击下面的展示组件的依赖细节。如果你对一般页面结构一直不确定，请继续阅读示例页面模板。

你可以在源代码文件夹中找到bootstrap.bundle.js 和 bootstrap.bundle.min.js ，这两个文件已经包含了 Popper, 但是不包含 jQuery。要了解更多信息？请点击左侧的“内容”。

展示组件的依赖细节

关闭提示界面的按钮
实现按钮的切换状态功能，以及复选框和单选框的某些动态功能
所有幻灯片行为，控件和指示器的轮播
折叠以切换内容的可见性
用于下拉菜单的显示和定位 (此处用到Popper.js)
用于模态（Modal）的显示，定位和滚动行为
在导航条中实现折叠功能以及响应式设计
用于气泡提醒（Tooltips）功能的显示和定位 (此处用到 Popper.js)
滚动条的监控和更新功能

一个简单的 Bootstrap 模板

确保你的页面遵循了最新的设计和开发标准。这意味着使用HTML5 doctype 并包含 viewport 以获得正确的响应行为。把它们放在一起，你的页面应该是这样的:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

这就是整体页面要求所需的全部内容。访问顶部导航的“布局”或我们的“模板”，开始布置你网站的内容和组件。

重要的全局设定

Bootstrap 使用了一些重要的全局样式和设置，使用它们时需要注意，所有这些样式和设置几乎都有专门针对跨浏览器样式的规范。让我们深入了解吧。

HTML5 doctype

Bootstrap 需要使用 HTML5 doctype。没有它，你会看到奇怪的效果，这可不是预期中的表现。

<!doctype html>
<html lang="en">
  ...
</html>

响应式 meta 标签

Bootstrap 是基于 移动设备优先 的原则设计的，因此，我们需要针对移动设备做一些处理，使用 Bootstrap 的媒体查询扩展组件就可以做到这些事情。为确保所有设备的正确渲染和触摸缩放, 请添加 viewport meta 标签到 <head> 里面。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

这段代码包含在上面提到的一个模板简单的 Bootstrap 模板里。

Box-sizing

为了在CSS中更直接地调整大小，我们将全局box-sizing值从content-box切换到border-box。这可以确保填充不会影响元素的最终计算宽度，但它可能会导致某些第三方软件（例如Google Maps和Google Custom Search Engine）出现问题。

在极少数情况下，你需要覆盖它，使用类似下面的代码:

.selector-for-some-widget {
  box-sizing: content-box;
}

使用上面的代码片段，子元素（包括通过:: before和:: after-生成的内容）将继承该.selector-for-some-widget的指定box-sizing。

在 CSS Tricks 中了解有关盒子模型和大小调整的更多信息。

重置(reboot)

为了改进跨浏览器呈现，我们使用重置(reboot)来纠正浏览器和设备之间的不一致，同时为常见的HTML元素提供稍微更有意义的重置。

社区

及时了解 Bootstrap 的开发情况，并通过这些有用的资源与社区联系。

关注推特 @getbootstrap。
在我们的官方博客阅读或订阅内容 The Official Bootstrap Blog。
加入 Bootstrap 在 slack讨论组。
在IRC中与其他 Bootstrap 用户聊天。地址： irc.freenode.net ，## bootstrap channel。
在 Stack Overflow 获取帮助 (记得将问题标记为 bootstrap-4)。
及时回来看看文档有没有更新。

下载

下载 Bootstrap 以获取已编译的 CSS 和 JavaScript ，源代码，或将其包含在你最喜欢的包管理器中，如 npm ， RubyGems 等。

已编译的 CSS 和 JS

下载已编译的 Bootstrap v4.3.1 , 包含:

已编译并且压缩好的 CSS
已编译并且压缩好的 JavaScript 组件

这不包括文档，源文件或任何可选的JavaScript依赖项（jQuery和Popper.js）。

下载

源代码

通过下载我们的源文件，你可以自己编译Bootstrap。需要一些额外的工具:

Sass 编译器
Autoprefixer

下载源代码

BootstrapCDN

直接使用 BootstrapCDN 提供的在线 JS 和 CSS 快速构建你的项目，不需要下载和部署。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

如果你正在使用我们编译的 JavaScript ，请不要忘记在它之前包含 jQuery 和 Popper.js 的CDN版本。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>

包管理器

将 Bootstrap 的源文件引入几乎所有最受欢迎的包管理器的项目中。无论使用何种包管理器，Bootstrap 都需要一个Sass编译器和 Autoprefixer 来进行与我们官方编译版本相匹配的设置。

npm

使用 npg 来安装 Bootstrap:

npm install bootstrap

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

Bootstrap 的 package.json 包含了一些额外的信息:

sass – Bootstrap 的 Sass 源代码路径
style – Bootstrap 的 CSS（已编译版本，未压缩）

yarn

使用 yarn（中文）来快速安装 bootstrap :

yarn add bootstrap

RubyGems

使用 Bundler（推荐）和 RubyGems 在你的Ruby应用程序中安装 Bootstrap ，方法是在 Gemfile 中添加以下行:

gem 'bootstrap', '~> 4.3.1'

或者，如果你不使用Bundler，则可以通过运行此命令来安装gem:

gem install bootstrap -v 4.3.1

查看 gem 的 README 了解更多细节.

Composer

你还可以使用 Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript :

composer require twbs/bootstrap:4.3.1

NuGet

如果你使用 .NET 开发，你还可以使用NuGet安装和管理 Bootstrap 的 CSS 或 Sass 和 JavaScript:

Install-Package bootstrap

Install-Package bootstrap.sass

内容

了解 Bootstrap 中包含的内容，包括我们的预编译和源代码风格。请记住， Bootstrap 的 JavaScript 插件需要 jQuery。

预编译的 Bootstrap

下载后，解压缩，你会看到这些文件:

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

这是 Bootstrap 最基本的形式：预编译文件，几乎可以在任何 Web 项目中快速使用。我们提供编译的 CSS 和 JS（bootstrap.*），以及编译和缩小的 CSS 和 JS（bootstrap.min.*）。源映射（bootstrap.* .map）可用于某些浏览器的开发人员工具。捆绑的 JS 文件（ bootstrap.bundle.js 和 minified bootstrap.bundle.min.js）包括 Popper，但不包括 jQuery。

CSS

Bootstrap 包含一些选项，用于包含部分或全部编译的 CSS。

CSS 文件	布局	内容	组件	工具
`bootstrap.css` `bootstrap.min.css`	包含	包含	包含	包含
`bootstrap-grid.css` `bootstrap-grid.min.css`	只在栅格系统	不包含	不包含	只在工具
`bootstrap-reboot.css` `bootstrap-reboot.min.css`	不包含	只在重置(reboot)	不包含	不包含

JS

同样，我们可以选择包含部分或全部编译的 JavaScript。

JS	Popper	jQuery
`bootstrap.bundle.js` `bootstrap.bundle.min.js`	包含	不包含
`bootstrap.js` `bootstrap.min.js`	不包含	不包含

Bootstrap 源代码

Bootstrap 源代码包括预编译的 CSS 和 JavaScript ，以及 Sass源代码，JavaScript源代码和文档。更具体地说，它包括以下内容:

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── docs/
│   └── examples/
├── js/
└── scss/

scss/ 和 js/ 是我们的CSS和JavaScript的源代码。 dist/ 文件夹包含上面预编译下载部分中列出的所有内容。 docs/ 文件夹包含我们文档的源代码和 Bootstrap 用法示例。除此之外，任何其他包含的文件都提供对包，许可证信息和开发的支持。

构建工具

了解如何使用 Bootstrap 包含的 npm 脚本来构建我们的文档，编译源代码，运行测试等。

工具配置

Bootstrap 使用NPM脚本为其构建系统。 package.json 包含了使用框架的便捷方法，包括编译代码，运行测试等。

按照下面的步骤搭建编译环境:

下载并安装 Node.js, 我们需要用它来处理依赖关系。
进入 /bootstrap 目录，运行 npm install 安装依赖文件，这些依赖关系会在 package.json 列出。
安装 Ruby, 安装 Bundler ，运行这个命令 gem install bundler, 最后运行这个命令 bundle install. 这将安装所有 Ruby 依赖项，例如 Jekyll 和 plugins。
- Windows 玩家: 阅读这个文档来让 Jekyll 无障碍地在windows系统下运行。

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

使用 NPM scripts

我们的 package.json 提供以下功能:

操作	简单说明
`npm run dist`	`npm run dist` 会在 `/dist` 目录创建已编译的文件。使用 Sass, Autoprefixer, and UglifyJS.
`npm test`	与 `npm run dist` 一样，不过产出的文件会放在测试目录（另外配置的目录）。
`npm run docs`	创建css和js的文档. 你可以创建本地文档，通过这个命令 `npm run docs-serve`。

运行 npm run 查看所有的 npm scripts.

Autoprefixer

Bootstrap 使用 Autoprefixer（包含在我们的构建过程中）在构建时自动将 vendor 前缀添加到某些CSS属性。这样做可以节省我们的时间和代码，允许我们一次编写CSS的关键部分，同时不需要像v3中那样的混合vendor。

我们通过GitHub存储库中的单独文件维护通过 Autoprefixer 支持的浏览器列表。有关详细信息，请参阅 /package.json 。

本地文档

提示：本地文档肯定是没有汉化的了。英文原版。

在本地运行我们的文档需要使用 Jekyll ，这是一个非常灵活的静态站点生成器，它为我们提供：基本包含，基于Markdown的文件，模板等。下面是教程:

运行上面的工具设置，通过 bundle install 安装 Jekyll（站点构建器）和其他 Ruby 依赖项。
进入 /bootstrap 目录，运行 npm run docs-serve 。
在浏览器打开 http://localhost:9001 。

通过阅读它来了解有关使用Jekyll的更多信息 ( Jekyll文档 )

故障排除

如果你在安装依赖项时遇到问题，请卸载所有以前的依赖项版本（全局和本地）。然后执行 npm install。

兼容性

浏览器与设备

了解 Bootstrap4 在各个浏览器和设备上的表现，这包含一些已知的奇怪问题。

浏览器

Bootstrap 支持所有主流浏览器和平台的最新，稳定版本。在 Windows 上，支持 Internet Explorer 10-11 / Microsoft Edge 。

由于浏览器日新月异，大部分最新版本浏览器的内核可能无法确定提供一致的表现。不过 Boostrap 应该不会让你失望。

你可以在 package.json 找到我们支持的浏览器及其版本

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

我们使用 Autoprefixer 通过 CSS 前缀处理预期的浏览器支持，CSS 前缀使用浏览器列表来管理这些浏览器版本。有关如何将这些工具集成到项目中的信息，请参阅其文档。

移动设备

一般来说，Bootstrap 支持每个主要平台的默认浏览器的最新版本。请注意，不支持代理浏览器（如 Opera Mini，Opera Mobile 的 Turbo 模式，UC Browser Mini，Amazon Silk）。

	Chrome	Firefox	Safari	Android Browser & WebView	Microsoft Edge
Android	支持	支持	不存在	Android v5.0+ 支持	支持
iOS	支持	支持	支持	不存在	支持
Windows 10 Mobile	不存在	不存在	不存在	不存在	支持

桌面浏览器

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

	Chrome	Firefox	Internet Explorer	Microsoft Edge	Opera	Safari
Mac	支持	支持	不存在	不存在	支持	支持
Windows	支持	支持	支持, IE10+	支持	支持	不支持

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

非正式地，Bootstrap 应该在 Chromium 和 Chrome for Linux，Firefox for Linux 和Internet Explorer 9中看起来和表现得足够好，尽管它们不受官方支持。

Internet Explorer

支持Internet Explorer 10+; IE9及更老版本不受支持（这意味如果你强行使用可能不会有很好的效果）。请注意，IE10中不完全支持某些CSS3属性和HTML5元素，或者需要前缀属性才能获得完整功能。访问这个网站，了解有关CSS3和HTML5功能的浏览器支持的详细信息。

如果你需要IE8-9支持，请使用 Bootstrap 3. 这是我们代码中最稳定的版本，Bootstrap 的团队仍然支持关键错误修正和文档更改。但是，不会添加任何新功能。

移动设备上的模态（Modal）和下拉菜单

内容溢出(overflow)和滚动(scrolling)

在 iOS 和 Android 中，对< body> 元素的 overflow：hidden; 的支持非常有限。为此，当你在这些设备的浏览器中滚动浏览模式的顶部或底部时，< body> 内容将开始滚动。请参阅 Chrome错误＃175502 （已在Chrome v40中修复）和 WebKit bug＃153852 。

iOS 文本字段和滚动

从iOS 9.2开始，当模态(Modal)打开时，如果滚动手势的初始触摸位于文本< input> 或< textarea> ，模式下面的< body> 内容将被滚动而不是模态本身。请参阅 WebKit错误＃153856 。

导航条下来菜单

由于z-indexing的复杂性，导航中的iOS上未使用 .dropdown-backdrop 元素。因此，要关闭导航栏中的下拉列表，你必须直接单击下拉元素（或任何其他元素这将触发iOS中的点击事件）。

浏览器缩放

页面缩放不可避免地在 Bootstrap 和 Web 的其他部分中呈现某些组件中的渲染工件。根据问题，我们可以修复它（首先搜索，然后在需要时打开问题）。但是，我们倾向于忽略这些，因为除了变通方法之外，它们通常没有直接的解决方案。

iOS 上的 Sticky :hover/:focus

虽然在大多数触摸设备上都无法使用 :hover ，但iOS会模仿此行为，导致“粘性”悬停样式在点击一个元素后仍然存在。只有当用户点击其他元素时，才会删除这些悬停样式。这种行为在很大程度上被认为是不受欢迎的，在Android或Windows设备上似乎不是问题。

在我们的v4 alpha和beta版本中，我们包含了用于选择媒体查询填充程序的不完整和注释掉的代码，该代码将禁用模拟悬停的触摸设备浏览器中的悬停样式。这项工作从未完全完成或启用，但为了避免完全以外情况，我们选择弃用这部分和将mixins保留为伪类的快捷方式。

打印

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

从Safari v8.0开始，使用固定宽度的 .container 类会导致Safari在打印时使用非常小的字体大小。请参阅bug＃14868 和 WebKit bug＃138192 了解更多详情。一个可能的解决方法是以下CSS：

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

Android 内置浏览器

Android 4.1（显然是一些较新的版本）内置了浏览器，作为默认的Web浏览器（与Chrome相反）。不幸的是，这些内置的浏览器通常有很多错误和CSS的不一致表现。

选择菜单

在 select 元素上，如果应用了 border-radius 或 border，Android 内置浏览器将不会显示侧边控件。使用下面的代码片段删除有问题的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>

想看看例子? 点击这里.

验证器

为了向旧的和错误的浏览器提供最佳体验，Bootstrap 在几个地方使用 CSS browser hacks 将特定CSS定位到某些浏览器版本中解决浏览器本身的错误。在一些地方，我们还使用尚未完全标准化的前沿 CSS 功能，但这些功能仅用于渐进增强。

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

由于我们包含针对某个Firefox错误的变通方法，因此我们的HTML文档同样具有一些微不足道且无关紧要的HTML验证警告。

JavaScript

Bootstrap 使用基于jQuery构建的可选JavaScript插件，用以实现某些功能。

定制或已编译版本

插件可以单独包含 js/dist/*.js), 也可以使用完整的已编译版本 bootstrap.js 或压缩版本 bootstrap.min.js (不要两个同时使用).

如果你使用包管理器 (Webpack, Rollup…), 到这里来查找所需的文件 /js/dist/*.js。

依赖关系

一些插件和 CSS 组件依赖于其他插件。如果单独包含插件，请确保在文档中检查这些依赖项。另请注意，所有插件都依赖于jQuery（这意味着必须在插件文件之前包含 jQuery）。请参阅我们的package.json以了解支持哪些版本的jQuery。

下拉菜单，气泡提示，弹窗依赖 Popper.js.

Data 属性

几乎所有的 Bootstrap 插件都可以通过 HTML 单独使用 Data 属性（我们使用JavaScript功能的首选方式）来启用和配置。确保只在一个元素上使用一组 Data 属性（例如，你不能从同一个按钮触发工具提示和模态。）

但是，在某些情况下，可能需要禁用此功能。要禁用 Data 属性API，请使用data-api取消绑定DOM的所有事件，如下所示:

$(document).off('.data-api')

或者，要定位特定的插件，只需将插件的名称作为命名空间以及 data-api 命名空间包含在内:

$(document).off('.alert.data-api')

转义选择器

如果你使用特殊选择器，例如collapse:Example，请务必将它们转义，因为它们将通过jQuery传递。

事件(Events)

Bootstrap 为大多数插件的独特操作提供自定义事件。

所有不定式事件都提供preventDefault()功能。这提供了在动作开始之前停止执行的能力。从事件处理程序返回false也会自动调用 preventDefault()。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

可编程API

你能够纯粹通过JavaScript API 使用所有 Bootstrap插件。所有公共API都是单一的，可链接的方法，并返回收集的集合。

$('.btn.danger').button('toggle').addClass('fat')

所有方法都应该接受一个可选的选项对象，一个以特定方法为目标的字符串，或者什么都不接受（它启动一个默认行为的插件）:

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

每个插件还在 Constructor 属性上公开其原始构造函数: $.fn.popover.Constructor. 如果你想获得特定的插件实例，请直接从元素中检索它: $('[rel="popover"]').data('popover').

异步函数和调用

所有可编程API方法都是异步的，并在调用开始后返回给调用者，但在结束之前返回。

为了在调用完成后执行操作，你可以监听相应的事件。

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

此外，对组件的方法调用将被忽略。

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

默认设置

你可以通过修改插件的 Constructor.Default 对象来更改插件的默认设置:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

解决冲突

有时需要将 Bootstrap 插件与其他 UI 框架一起使用。在这些情况下，偶尔会发生命名空间冲突。如果发生这种情况，你可以在插件上调用 .noConflict 以恢复其值。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

版本号

可以通过插件构造函数的 VERSION 属性访问每个Bootstrap的jQuery插件的版本。例如，对于工具提示插件:

$.fn.tooltip.Constructor.VERSION // => "4.3.1"

浏览器禁用 JS 时的用户体验

没有用户体验可言。禁用 JavaScript 时，Bootstrap 的插件不会特别优雅。如果你关心这种情况下的用户体验，请使用 <noscript> 向用户解释情况（以及如何重新启用JavaScript），或添加自己的自定义后备方案。

第三方库

Bootstrap不正式支持Prototype或jQuery UI等第三方JavaScript库。你可能需要自行修复兼容性问题。

Util.js

所有 Bootstrap 的 JavaScript 文件都依赖于util.js，它必须与其他 JavaScript 文件一起包含在内。如果你正在使用编译的（或缩小的）bootstrap.js，则不需要包含它 – 它已经存在。

util.js 包含工具函数和 transitionEnd 事件的基本辅助程序以及CSS转换模拟器。其他插件使用它来检查CSS调用支持并捕获挂起调用。

自定义主题

制作主题

使用我们新的内置 Sass 变量自定义 Bootstrap 4，以获得全局样式设置，以便于主题和组件更改。

导览

在Bootstrap 3中，主题主要由LESS中的变量覆盖，自定义CSS和 dist 文件中包含的单独主题样式表驱动。通过一些努力，可以在不触及核心文件的情况下完全重新设计 Bootstrap 3 的外观。 Bootstrap 4 提供了一种熟悉但略有不同的方法。

现在，主题是由 Sass 变量，Sass 映射和自定义 CSS 完成的。没有专门的主题样式表; 相反，你可以启用内置主题来添加渐变，阴影等。

Sass

使用我们的源Sass文件来利用变量，映射，混合等。

文件结构

尽可能避免修改 Bootstrap 的核心文件。对于 Sass，这意味着创建自己的样式表，导入 Bootstrap ，以便你可以修改和扩展它。假设你正在使用像 npm 这样的包管理器，那么你将拥有如下所示的文件结构：

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

如果你已经下载了我们的源文件并且没有使用包管理器，那么你将需要手动设置类似于该结构的内容，从而使 Bootstrap 的源文件与你自己的源文件分开。

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importing

在 custom.scss 中, 你将导入Bootstrap的源Sass文件。你有两种选择：包括所有Bootstrap，或选择你需要的部件。我们鼓励后者，但要注意我们的组件有一些要求和依赖。你还需要为我们的插件添加一些JavaScript。

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

有了这个设置，你就可以开始修改 custom.scss 中的任何 Sass 变量和映射。你也可以根据需要在 //Optional 部分下添加部分 Bootstrap 。我们建议使用 bootstrap.scss 文件中的完整导入堆栈作为起点。

变量默认值

Bootstrap 4中的每个 Sass 变量都包含 !default 志，允许你在不修改 Bootstrap 源代码的情况下覆盖自己Sass中变量的默认值。根据需要复制和粘贴变量，修改它们的值，并删除 !default 标志。如果已经分配了变量，则不会通过 Bootstrap 中的默认值重新分配该变量。

你将在 scss/_variables.scss 中找到Bootstrap变量的完整列表。

同一Sass文件中的变量覆盖可以在默认变量之前或之后。但是，当覆盖Sass文件时，必须在导入Bootstrap的Sass文件之前进行覆盖。

这是一个更改 background-color 和 color 的示例通过npm导入和编译Bootstrap时 <body> :

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

根据需要对 Bootstrap 中的任何变量重设，包括下面的全局选项。

映射和循环

Bootstrap 4 包含一些 Sass 映射，键值对可以更容易地生成相关 CSS 系列。我们使用Sass贴图作为颜色，网格断点等。就像 Sass 变量一样，所有 Sass 映射都包含 !default 标志，可以覆盖和扩展。

默认情况下，我们的一些 Sass 映射合并为空映射。这样做是为了允许轻松扩展给定的 Sass 映射，但是以使从映射中移除项目稍微困难为代价。

改变映射

修改我们的现有颜色 $theme-colors 映射, 将以下内容添加到自定义Sass文件中:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

添加映射

添加新的颜色到 $theme-colors, 添加以下内容:

$theme-colors: (
  "custom-color": #900
);

移除映射

要从 $theme-colors 移除映射,或者其他的地方,使用 map-remove. 请注意，你必须在我们的包含内容和选项之间插入它:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

必须的键(key)

Bootstrap 假设 Sass 映射中存在一些特定的键，因为我们自己使用并扩展了这些键(key)。在自定义包含的映射时，你可能会遇到使用特定 Sass映射键(key) 的错误。

例如，我们使用来自 $theme-colors 的 primary, success, 和 danger 用于链接，按钮和表单状态。替换这些键的值应该没有问题，但删除它们可能会导致 Sass 编译问题。在这些情况下，你需要修改使用这些值的 Sass 代码。

功能

Bootstrap 使用几个Sass功能，但只有一个子集适用于一般主题。我们已经包含了三个从颜色映射中获取值的功能:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

这些功能允许你从Sass映射中选择一种颜色，就像你使用v3中的颜色变量一样。

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

我们还有另一个功能，用于从 $theme-colors 地图中获取特定级别颜色。负值会减轻颜色，而较高值会变暗。

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

在实践中，你将调用该功能并传入两个参数：来自 $theme-colors (primary 或 danger) 和数字级别的颜色名。.

.custom-element {
  color: theme-color-level(primary, -10);
}

可以在将来添加其他功能或你自己的自定义 Sass 为其他 Sass 映射创建级别功能，如果你想要更详细，甚至可以添加通用功能。

颜色对比

我们在Bootstrap中包含的另一个功能是颜色对比功能， color-yiq. 它利用 YIQ 颜色空间自动返回亮 (#fff) 或暗 (#111) 基于指定的基色对比色。此函数对于生成多个类的mixins或循环特别有用。

例如，要从我们的 $theme-colors 映射生成颜色样本

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

它还可用于一次性对比度需求:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

你还可以使用我们的颜色映射功能指定基色：

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Sass options

使用我们的内置自定义变量文件自定义 Bootstrap 4，并使用新的 $enable-* Sass 变量轻松切换全局 CSS 首选项。覆盖变量的值，并根据需要使用 npm run test 重新编译。

你可以在 Bootstrap 的scss/_variables.scss 文件中找到并自定义关键全局选项的这些变量。

变量	值	说明
`$spacer`	`1rem` (default), or any value > 0	指定默认的spacer值，以编程方式生成spacer工具。
`$enable-rounded`	`true` (default) or `false`	在各种组件上启用预定义的border-radius样式。
`$enable-shadows`	`true` or `false` (default)	在各种组件上启用预定义的 `box-shadow` 样式.
`$enable-gradients`	`true` or `false` (default)	通过各种组件上的 `background-image` 样式启用预定义渐变。
`$enable-transitions`	`true` (default) or `false`	在各种组件上启用预定义的 `transition` 。
`$enable-hover-media-query`	`true` or `false` (default)	已弃用
`$enable-grid-classes`	`true` (default) or `false`	允许为网格系统生成CSS类（例如， `.container`, `.row`, `.col-md-1`, 等等)。
`$enable-caret`	`true` (default) or `false`	在 `.dropdown-toggle` 上启用伪元素插入符号。
`$enable-print-styles`	`true` (default) or `false`	启用优化打印表现的样式。

颜色

Bootstrap 的许多组件和工具都是通过 Sass 映射中定义的一系列颜色构建的。此映射可以在 Sass 中循环以快速生成一系列规则集。

全部颜色

Bootstrap 4中的所有颜色都可用作Sass变量和scss/_variables.scss 文件中的Sass映射。这将在后续的次要版本中进行扩展，以添加其他阴影，就像我们已经包含的灰度调色板一样。

Blue

Indigo

Purple

Pink

Red

Orange

Yellow

Green

Teal

Cyan

以下是你在 Sass 中使用这些内容的方法:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

颜色工具类也可用于设置颜色和背景颜色。

将来，我们的目标是为每种颜色的阴影提供 Sass 映射和变量，就像我们使用下面的灰度颜色一样。

主题颜色

我们使用所有颜色的子集来创建较小的调色板以生成颜色方案，也可以在Bootstrap的 scss/_variables.scss 文件中作为Sass变量和Sass映射使用。

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

灰度

一组广泛的灰色变量和 scss/_variables.scss 中的 Sass 映射，用于整个项目中一致的灰色阴影。

100

200

300

400

500

600

700

800

900

在 scss/_variables.scss中，你将找到 Bootstrap 的颜色变量和 Sass 映射。以下是 $colors Sass 映射的示例：

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

添加，删除或修改映射中的值，以更新它们在许多其他组件中的使用方式。不幸的是，此时并非每个组件都使用此 Sass 映射。未来的更新将努力改进这一点。在此之前，计划使用${color} 变量和此 Sass 映射。

组件

Bootstrap 的许多组件和工具都是使用 @each 循环构建的，这些循环遍历 Sass 映射。这对于通过我们的 $theme-colors 生成组件的变体以及为每个断点创建响应变体特别有用。当你自定义这些 Sass 映射并重新编译时，你将自动看到这些循环中反映的更改。

修饰符

Bootstrap 的许多组件都是使用 base-modifier 类方法构建的。这意味着大部分样式包含在基类中（例如，.btn) ，而样式变体仅限于修饰符类（例如， .btn-danger)。这些修饰符类是从 $theme-colors 映射构建的，用于自定义修饰符类的数量和名称。

以下是我们如何遍历 $theme-colors 映射以生成 .alert 的修饰符的两个示例。组件和我们的所有 .bg-* 背景工具。

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

响应式设计

这些 Sass 循环也不仅限于颜色映射。你还可以生成组件或工具的响应式变体。以我们的响应式文本对齐工具为例，我们为 @each Sass 混合 $grid-breakpoints 循环包含媒体查询的映射。

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

如果你需要修改 $grid-breakpoints，你的更改将适用于迭代该映射的所有循环。

CSS 变量

Bootstrap 4在其编译的CSS中包含大约24个 CSS自定义属性（变量）在浏览器的Inspector，代码沙箱或一般原型设计中工作时，这些可以轻松访问常用值，如主题颜色，断点和主要字体堆栈。

可用变量

以下是我们包含的变量（请注意 :root 是必需的）。它们位于我们的 _root.scss 文件中。

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

例子

CSS 变量为 Sass 的变量提供了类似的灵活性，但在提供给浏览器之前无需编译。例如，这里我们用 CSS 变量来重置页面的字体和链接样式。

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

断点变量

虽然我们最初在CSS变量中包含了断点（例如 --breakpoint-md), 不过媒体查询中不支持这些, 但它们是仍然可以在媒体查询中的规则集中使用。这些断点变量保留在已编译的CSS中，以便向后兼容，因为它们可以被JavaScript使用。在规范中了解详情。

这里有一个不受支持的例子：

@media (min-width: var(--breakpoint-sm)) {
  ...
}

这里是可以使用的例子：

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}

Webpack

了解如何使用 Webpack 3在项目中加入 Bootstrap。

安装 Bootstrap

请转至下载章节查阅如何使用 np m安装 bootstrap

导入 JavaScript

通过将此行添加到应用程序的入口点（通常是index.js或app.js）来导入Bootstrap的JavaScript：

import 'bootstrap';

或者，你可以根据需要单独导入插件：

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap 依赖于 jQuery 和 Popper，它们被定义为 peerDependencies，这意味着你必须确保使用 npm install –save jquery popper.js 将它们添加到 package.json中。

导入样式

导入预编译的Sass

要充分发挥Bootstrap的潜力并根据需要进行自定义，请将源文件用作项目捆绑过程的一部分。

首先，创建自己的 _custom.scss 并使用它来覆盖内置的自定义变量。然后，使用主 Sass 文件导入自定义变量，然后使用 Bootstrap：

@import "custom";
@import "~bootstrap/scss/bootstrap";

要编译 Bootstrap，请确保安装并使用所需的加载器：sass-loader，带有 Autoprefixer 的 postcss-loader。使用最少的设置，你的 webpack 配置应包括此规则或类似规则：

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

导入已编译的CSS

或者，你可以通过简单地将此行添加到项目的入口点来使用 Bootstrap 的 CSS：

import 'bootstrap/dist/css/bootstrap.min.css';

在这种情况下，你可以使用现有的 css 规则，而无需对 webpack 配置进行任何特殊修改，除非你不需要 sass-loader 只是 style-loader 和 css-loader。

  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  ...

无障碍访问

简要介绍 Bootstrap 创建可访问内容的功能和限制。

Bootstrap提供了一个易于使用的现成样式，布局工具和交互式组件框架，允许开发人员创建具有视觉吸引力，功能丰富且开箱即用的网站和应用程序。

概述和限制

使用 Bootstrap 构建的任何项目的整体可访问性在很大程度上取决于作者的标记，其他样式以及它们包含的脚本。但是，如果这些已经正确实现，那么使用 Bootstrap 创建满足 WCAG 2.0 （A / AA / AAA）的网站和应用程序应该是完全可能的。第508条及类似的辅助功能标准和要求。

结构标记

Bootstrap 的样式和布局可以应用于各种标记结构。本文档旨在为开发人员提供最佳实践示例，以演示 Bootstrap 本身的使用，并说明适当的语义标记，包括可以解决潜在可访问性问题的方法。

交互组件

Bootstrap 的交互式组件 – 例如模态对话框，下拉菜单和自定义工具提示 – 旨在用于触摸，鼠标和键盘用户。通过使用相关的 WAI – ARIA 角色和属性，这些组件也应该是可理解的，并且可以使用辅助技术（例如屏幕阅读器）进行操作。

由于 Bootstrap 的组件是专门设计为相当通用的，因此作者可能需要包含更多ARIA角色和属性以及 JavaScript 行为，以更准确地传达其组件的精确性质和功能。这通常在文档中注明。

颜色对比度

目前构成 Bootstrap 默认调色板的大多数颜色 – 在整个框架中用于按钮变化，警报变化，表单验证指示符 – 导致颜色对比度不足（低于推荐的 WCAG 2.0颜色对比度为4.5：1 ）用于浅色背景时。作者需要手动修改/扩展这些默认颜色以确保足够的颜色对比度。

视觉隐藏的内容

应该在视觉上隐藏但仍可供屏幕阅读器等辅助技术访问的内容可以使用 .sr-only 类进行样式设置。这在其他视觉信息或提示（例如通过使用颜色表示的含义）也需要传达给非视觉用户的情况下非常有用。

<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>

对于视觉上隐藏的交互式控件，例如传统的“skip”链接， .sr-only 可以与 .sr-only-focusable 类。这将确保控制在聚焦后变得可见（对于有视力的键盘用户）。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

减少过场效果

Bootstrap 包含对减少过场效果的支持。在允许用户指定减少过场效果的浏览器/环境中，Bootstrap 中的大多数CSS过渡效果（例如，打开或关闭模式对话框时）将被禁用（感觉可以让设备更省电）。目前，支持仅限于macOS和iOS上的Safari。

额外的资源，有兴趣可以看看：

❯

个人中心

购物车

优惠劵

今日签到

有新私信私信列表

搜索

幸运之星正在降临...

点击领取今天的签到奖励！

恭喜！您今天获得了{{mission.data.mission.credit}}积分

今日签到

连续签到

{{item.credit}}

连续{{item.count}}天

查看所有

我的优惠劵

_￥_优惠劵

使用时效：无法使用

使用时效：
之前

使用时效：永久有效

优惠劵ID：
×

限制以下商品使用：限制以下商品分类使用：不限制使用：

[{{ct.name}}]

所有商品和商品类型均可使用

没有优惠劵可用!

购物车

×

删除

购物车空空如也!

清空购物车前往结算

您有新的私信

没有新私信

写新私信查看全部

{{userData.name}}已认证