Bootstrap3 全局样式

Bootstrap 3 的目标是简洁、直观、强悍的前端开发框架，让 Web 开发变得更好、更快、更强壮，我们有必要先了解一下 Bootstrap 底层结构的关键部分。

HTML5文档类型

Bootstrap使用了HTML5特定的元素和CSS属性，在使用Bootstrap的时候，所有HTML文档的第一行代码必须是 <!DOCTYPE html>。如：

<!DOCTYPE html>

...

</html>

移动设备优先

Bootstrap 3最显著的变化，就是移动设备优先（Mobile First）。Bootstrap 2 中，为了让整个项目友好的支持移动设备，框架中的某些关键部分增加了专门针对移动设备的样式，还要手动引用另一个 CSS，这仅仅是权宜之计，而不是理想的解决方案。

Bootstrap 3 重写了整个框架，使它全面支持移动设备，并始终贯彻移动设备优先的宗旨，将针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件或简单的针对移动设备增加一些可选的样式。

为了确保在移动设备浏览器上适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签：

上述代码的意思是，默认情况下，UI布局的宽度和移动设备的宽度一致。initial-scale=1确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，这样的设置并没有禁用缩放功能，用户依然可以通过缩放功能来缩放页面。如果你想禁用缩放功能，可以为视口（viewport）设置 meta 属性为 user-scalable=no 来禁用其缩放功能：

这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

排版和链接

Bootstrap 为排版、链接专门设置了以下全局样式：

为 body 元素设置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数
为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

这些样式都能可以在 scaffolding.less 文件中找到对应的源码。如果要修改这些默认样式，可以修改你自己的样式表，也可以直接修改 scaffolding.less 文件中的全局变量值。

重置样式

为了增强跨浏览器表现的一致性，从 Bootstrap 2 开始，使用Normalize.css 作为重置样式表。Normalize.css 是由 Nicolas Gallagher 和 Jonathan Neal 共同维护的一个CSS 重置样式库，它专门用于将不同浏览器的默认CSS特性设置为统一效果，以便开发人员使用更标准的方式去访问或设置页面元素。

布局容器

Bootstrap 需要一个布局容器来包裹页面内容和栅格系统，系统提供了两个布局容器类，一个是 .container 类，另一个是 .container-fluid 类。由于 padding 等原因，这两种容器不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器：

...

</div>

.container-fluid 类用于 100% 宽度的布局，占据全部视口（viewport）的容器：

...

</div>

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。