简介

Bootstrap 是世界上最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。快速了解 Bootstrap 、使用 BootCDN 以及熟悉初学者模板页面。

快速开始

想要快速地将 Bootstrap 应用到你的项目中吗？推荐使用 Bootstrap中文网维护的 BootCDN 免费加速服务。是否还需要使用包管理工具或下载源码？请进入下载页面。

CSS

将引入 Bootstrap 样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说，他们依赖的是 jQuery、Popper.js 以及我们自己开发的 JavaScript 插件。具体操作就是将下列 <script> 标签放到页面底部的 </body> 标签之前。注意顺序，jQuery 必须放在最前面，然后是 Popper.js，最后是我们自己的 JavaScript 插件。

我们使用的是 jQuery’s slim build（即，瘦身版）版本，也同时支持完整版本。

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

好奇哪些组件明确要求 jQuery、我们自己的 JS 和 Popper.js？请点击下面的链接查看。如果你不清楚一般结构如何组织的，请继续阅读下面的模板实例。

展示组件对 JavaScript 的依赖情况

Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper.js)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Scrollspy for scroll behavior and navigation updates

初学者模板

务必用最新的设计和开发标准武装你的页面。这意味着使用 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://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

以上这些就是所有页面必须的。请访问布局或官方实例以作参考，然后就可以开始布局你的网站内容和组件了。

重要的全局样式和设置

Bootstrap 所使用的一些重要的全局样式和设置需要你在使用前务必了解，所有这些样式和设置都是以跨浏览器样式的标准化为目标的。下面让我们深入讲解。

HTML5 doctype

Bootstrap 要求设置 HTML5 doctype。如果没有这个设置，你会看到一些奇怪的、不完整的样式，但是只要添加了这个设置就不会出现任何错误了。

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

响应式 meta 标签

Bootstrap 本着 移动设备优先 的策略开发的，按照这一策略，我们优先为移动设备优化代码，然后根据每个组件的情况并利用 CSS 媒体查询（CSS media queries）技术为组件设置合适的样式。为了确保在所有设备上能够正确渲染并支持触控缩放，务必将设置 viewport 属性的 meta 标签添加到 <head> 中。如下所示。

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

你可以在初学者模板中看到实例。

盒模型

为了在 CSS 中更直观的设置尺寸，我们将全局的 box-sizing 值从 content-box 修改为 border-box。这就确保了 padding 不会影响元素最终的宽度计算，但是这可能会导致第三方组件出现问题，例如 Google 地图和 Google 定制搜索。

在极少的情况下你需要重置 box-sizing 的值，请参考如下代码：

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

通过以上代码片段，嵌套元素（包括通过 ::before and ::after 生成的内容）都将继承 .selector-for-some-widget 指定的 box-sizing 值。

在 CSS Tricks 网站可以了解到更多关于盒模型及尺寸设置相关的知识。

Reboot

为了改善跨浏览器的渲染，我们使用 Reboot 修正跨浏览器和设备之间的不一致性，同时对常用的 HTML 元素设置统一的效果。

社区

通过如下渠道你可以跟进 Bootstrap 的开发进度并与参与到社区中来。

Follow @getbootstrap on Twitter.
Read and subscribe to The Official Bootstrap Blog.
Join the official Slack room.
Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-4).
Developers should use the keyword bootstrap on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.