Bootstrap Web设计与开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.1 Bootstrap全局样式

本节介绍Bootstrap全局样式，主要包括全局样式的基本概念、使用特点方面的内容，是学习Bootstrap框架的起步要点。

3.1.1 什么是全局样式

所谓Bootstrap全局样式，其实就是通过Bootstrap框架为页面设置的全局CSS样式表。该全局样式表包括基本的HTML元素样式、以及栅格系统，可以增强页面及其元素的CSS效果。另外，开发人员深入学习Bootstrap全局样式，有助于理解Bootstrap框架的底层结构，有助于Web开发获得更好、更快、更强的实践效果。

3.1.2 基于HTML5文档类型

Bootstrap框架使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在具体Web项目中，每个HTML页面都要参照下面的格式进行设置。

        <! DOCTYPE html>
        <html lang="zh-CN">
        ......
        </html>

注：为了Bootstrap框架获得更好的应用效果，我们可以将上面的页面格式理解为是强制执行的。

3.1.3 屏幕、排版与链接

Bootstrap框架为屏幕、排版和链接设置了基本的全局样式，具体定义在Bootstrap源码包中的scaffolding.less文件中，读者可以打开该源文件进行参阅。下面列举一些scaffolding.less文件中的源码，分析一下Bootstrap是如何定义全局样式的。

【代码3-1】（详见Bootstrap源码包中scaffolding.less文件）

        body {
          font-family: @font-family-base;
          font-size: @font-size-base;
          line-height: @line-height-base;
          color: @text-color;
          background-color: @body-bg;
        }

【代码3-1】设置了页面body的全局样式，具体如下：

● 文字样式为变量@font-family-base

● 文字大小为变量@font-size-base

● 行高度为变量@line-height-base

● 颜色为变量@text-color

● 背景颜色为变量@body-bg

【代码3-2】（详见Bootstrap源码包中scaffolding.less文件）

        a {
          color: @link-color;
          text-decoration: none;
          &:hover,
          &:focus {
            color: @link-hover-color;
            text-decoration: @link-hover-decoration;
          }
        }

【代码3-2】设置了超链接a的全局样式，具体如下：

● 颜色为变量@link-color；

● 当超链接处于“:hover”状态时颜色为变量@link-hover-color，并增加了下划线样式。

3.1.4 用Normalize重置样式

从Bootstrap 2开始，使用normalize.css样式表进行重置，虽然设计开发时仍可以使用在reset.less文件中的许多重置代码，但Bootstrap 2还是去掉了一些不适合Bootstrap框架的元素。

上一章目录下一章