介绍

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

快速开始

希望快速添加引导到您的项目？使用由StackPath的人员免费提供的BootstrapCDN，包管理器，下载源文件？前往下载页面.

CSS

复制粘贴样式表<link>到你的<head>CSS之前。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS

我们的许多组件都需要使用JavaScript才能运行。具体来说，它们需要jQuery，Popper.js和我们自己的JavaScript插件。将以下<script>们放在你的页面结尾附近，</body>标签之前，以启用它们。首先是jQuery，然后是Popper.js，最后是我们的JavaScript的插件。

我们使用jQuery的slim版本，但也支持完整版本。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

好奇哪些组件明确需要jQuery，我们的JS和Popper.js？单击下面的链接。如果您对一般的页面结构不确定，请继续阅读示例页面模板。

我们bootstrap.bundle.js和bootstrap.bundle.min.js包括Popper，但不包括jQuery。获取更多关于引导的信息，查看请内容页。

显示需要的JavaScript的组件

dismissing的警报
用于切换状态和复选框/无线电功能的按钮
所有幻灯片行为，控件和指示器的轮播
折叠以切换内容的可见性
用于显示和定位的下拉菜单（也需要Popper.js）
用于显示，定位和滚动行为的模态
Navbar用于扩展我们的Collapse插件以实现响应行为
用于显示和定位的工具提示和弹出框（也需要Popper.js）
滚动行为和导航更新的Scrollspy

入门模板

确保您的页面设置了最新的设计和开发标准。这意味着使用HTML5文档类型并包含视口元标记，以获得正确的响应行为。把它们放在一起，你的页面应该是这样的：

<!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" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

这就是整体页面要求所需的全部内容。访问布局文档或我们的官方示例，开始布置您网站的内容和组件。

重要的全局

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

HTML5 doctype

Bootstrap需要使用HTML5 doctype。没有它，你会看到一些的不完整的新型样式，包括它不会造成任何大的错误。

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

响应元标记

Bootstrap是首先针对移动设备的开发，我们首先优化移动设备代码，然后根据CSS媒体查询使用扩展组件。若要确保为所有设备都有正确渲染和触摸缩放，请将响应式视口元标记添加到您的<head>。

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

您可以在入门模板中看到此示例。

Box-sizing

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

在极少数情况下您需要覆盖它，请使用以下内容：

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

使用上面的代码片段，将使嵌套元素，包含的内容，通过::before和::after定义的内容，将继承box-sizing为其对应值.selector-for-some-widget。

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

重启

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

社区

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

在Twitter上关注@getbootstrap。
阅读并订阅The Official Bootstrap Blog。
加入Slack官方会议室。
在IRC中与其他Bootstrappers聊天。在irc.freenode.net服务器上，在##bootstrap通道中。
可以在Stack Overflow（标记bootstrap-4）中找到实现帮助。
开发人员应该bootstrap在通过npm或类似的传递机制进行分发时修改或添加Bootstrap功能的软件包上使用关键字，以获得最大的可发现性。

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