3.1　概述

Bootstrap 3.x的目标是：简洁、直观、强悍的前端开发框架，让Web开发更迅速、简单。在使用之前，我们需要先了解一下Bootstrap的基础内容。

1.HTML5文档类型

由于Bootstrap使用了HTML5特定的HTML元素和CSS属性，所以使用Bootstrap的时候，所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性，如下所示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   ...
  4. </html>

2.移动先行

Bootstrap2.x系列版本中，在框架里为移动特性添加了一些可选支持。而在Bootstrap3.x版本中，作者重写了与移动特性相关的内容，与可选特性相比，新版本将移动特性加入了核心框架。实际上，新版Bootstrap是一个移动先行的框架集，移动先行的影子在整个框架集都可以发现，如下所示：

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

在移动设备浏览器上，通过为viewport meta标签添加的user-scalable=no可以禁用其缩放（zooming）功能。禁用缩放功能后，用户只能滚动屏幕，这样能让你的网站看上去更像原生应用。注意，我们并不推荐所有网站都使用这种方式，是否使用这种方式要视情况而定。

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3.响应式图片

为了能对图片的大小进行自适应缩放，Bootstrap在3.x版里添加了一个.img-responsive样式，其实质是为图片设置了max-width: 100%；和height: auto；属性，以便可以让图片按比例缩放，并且不超过其父元素的尺寸，所以说该样式对响应式布局的支持更加友好了。使用的时候，只需要在相应图片元素上加一个.img-responsive样式即可（而默认情况下，如果不加该样式，则显示还是按照默认设置来进行的）。.img-responsive样式实现代码如下所示：

  1. // 源码310行
  2. .img-responsive {
  3.   display: block;
  4.   max-width: 100%;
  5.   height: auto;
  6. }

4.排版与链接

Bootstrap为网页设置了一些基本的全局样式、排版和链接风格，尤其是其具有如下特性：

❑在body元素上取消了margin设置，改为默认为0，margin: 0。

❑在body元素上设置了背景色为白色，background-color: #ffffff。

❑在布局排版方面，字体、字体大小、行间距使用的标准值分别如下：

  1. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  2.             font-size: 14px;
  3. line-height: 1.428571429;               // 20除14

所有的默认基本样式都可以在normalize.less和scaffolding.less文件里找到。

5.Normalize.css

为了改进跨浏览器呈现，Bootstrap使用了第三方CSS库Normalize。Normalize.css是一个专门用于将不同浏览器的默认CSS特性设置为统一效果的CSS库，以便开发人员使用更标准的方式去访问或设置页面元素。该项目只专注于样式，比如button按钮在不同浏览器上效果都是一致的。详细内容可以查看源码里的Normalize.less文件。

项目地址如下：http: //necolas.github.io/normalize.css/。

6.居中容器

一个页面（或元素）要居中显示，可以在外部容器上简单应用.container样式即可。由于栅格系统依赖于外部容器的大小设置，所以默认情况下container样式有一个max-width属性用于限制栅格系统的最大宽度。示例代码如下所示：

  1. <div class="container">
  2.   ...
  3. </div>

container样式的源码如下：

  1. // 源码734行
  2. .container {
  3.   padding-right: 15px;
  4.   padding-left: 15px;
  5.   margin-right: auto;                   /*左右居中的设置*/
  6.   margin-left: auto;
  7. }

注意

container的max-width大小和设备的最大分辨率有关，平板电脑一般为728像素，普通桌面浏览器一般为940像素，大型浏览器为1170像素。也可以通过重载覆盖的方式修改max-width。