Skip to main content

起步

简要介绍 Bootstrap,以及如何下载、使用,还有基本模版和案例,等等。

--本章内容翻译由:樊潇洁友情提供

介绍

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 来获得最新的消息和一些很棒的音乐视频。