关于Boostrap

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-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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::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.

你可以关注官方 @getbootstrap on Twitter