介绍

优质

小牛编辑

156浏览

2023-12-01

Bootstrap是当前世界最受欢迎的用于建立响应式、移动设备优先的站点和应用的框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使你的工程项目变得无比简单。

下面教你如何快速上手Bootstrap CDN，并建立一个模板化的起始页面。

开门见山

想要快速地把BootStrap添加到你的工程项目中？那就使用Bootstrap CDN吧，它则MaxCDN提供。想使用一个程序包管理器或者想下载源文件？

复制下面的<link>样式表粘贴到你的网页的<head>里面，放在在其他样式表文件之前。

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">

把这个JavaScript插件以及JQuery放在你的网页的末尾附近，就在</body>标签前面。记住需要先添加jQuery，因为我们的代码依赖于它。

<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

这就行了——你已经迈步走上了创建完全使用Bootstrap站点的道路。如果你对一般的页面结构还不是很熟悉的话，请继续参看一些网页模板案例的代码。

起始模板

确保你的网页是建立在最新的设计和开发标准之上的。这意味着：

使用HTML5文档类型
强制Internet Explorer使用最新的渲染模式（[详情] (http://stackoverflow.com/q/6771258)）
然后，使用视口meta标签

把它们放在一起，你的网页将如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  </body>
</html>

这是就你需要完成的页面配置。请参阅布局文档或者官方案例来布置你的站点内容和元件。

重要目标

Bootstrap使用了少数重要的全局样式和设置。在使用过程中，你需要留意：一旦用了它，所有这些几乎都是导致跨浏览器的风格标准化。让我们深入了解它们：

HTML5文档类型

Bootstrap要求使用HTML5文档类型。没有它，你就会看到一些并不完整的样式。只有把它包含进去才不会造成显著的问题。

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

响应式meta标签

基于移动设备优先的原则开发了Bootstrap，基于这个原则我们先为移动设备优化代码，然后使用CSS媒体查询来扩大组件。为了确保所有的设备的渲染和触摸效果，必须给网页的<head>添加响应式的视图标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

你可以在起始模板中看到这样的一个例子：

盒尺寸

为了更直观地用CSS设置尺寸，我们把将全局box-sizing的值改成了border-box（原本值是content-box）。这就保证了padding不会影响一个元素的最后计算宽度。但是它将导致一些问题，比如说第三方软件谷歌地图以及谷歌自定义搜索引擎出问题。

在极少数情况下你需要推翻它，你可以这么写：

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

用了上面的代码片段，所有嵌套在内的元素——包括通过:before以及:after生产的内容，都会继承.selector-for-some-widget所指定的box-sizing。

点此可以解更多关于盒模型和用CSS制定尺寸的技巧的知识。

Normalize.css

为了改进跨浏览器渲染效果，我们使用了Normalize.css来校正不同设备和浏览器之间的细小的不一致。之后我们会基于它创建Reboot来创造出我们自己的、稍微有点固执己见的样式风格。

社区

要想始终关注Bootstrap的最新开发进展，欢迎加入社区以获取有用的资源。

在推特上关注@getbootstrap on Twitter。
阅读并向The Official Bootstrap Blog投稿。
加入the official Slack room。
在 IRC 与 Bootstrap 人交谈。在 irc.freenode.net 服务器上，或者 ##bootstrap 频道里。
可在 Stack Overflow 中找到实施帮助（标记 twitter-bootstrap-3）。
为了获取最大的功能，请使用通过 npm 或者类似的传递机制来分发内容。开发者需要使用封装上的关键字 bootstrap，它能够改进或者增加 Bootstrap 的功能。

你也可以在推特上关注@getbootstrap 来获得最新的消息和一些很棒的音乐视频。