介绍

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

开始

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

CSS

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

基本上,大多数组件需要依赖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" 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-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

展示组件的依赖细节

一个简单的 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" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></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 的开发情况,并通过这些有用的资源与社区联系。