简介

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

快速开始

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

CSS

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

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

JS

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

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

<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.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

我们的 bootstrap.bundle.jsbootstrap.bundle.min.js 包含了 Popper, 但不包含 jQuery. 有关Bootstrap中包含的内容的更多信息, 请查看 contents 部分.

展示组件对 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文档类型并包含一个viewport meta标签以获得正确的响应行为。 把它们放在一起,你的页面应该是这样的:

<!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.1.3/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.1.3/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 本着移动设置优先的策略开发的,按照这一策略,我们优先为移动设备优化代码,然后根据每个组件的情况并利用 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 定制搜索。

在极少数情况下,您需要覆盖它,使用类似下面的内容:

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

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

你可以在CSS Tricks网站学到更多的盒模型和尺寸设置的相关知识.

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.