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源码包scss目录中的_variables.scss文件中，读者可以打开该源文件进行参阅。下面列举一些_variables.scss文件中的源码，分析一下Bootstrap是如何定义全局样式的。
注意
要想查看这些文件，必须从官网下载Bootstrap框架的源文件。
【代码3-1】（详见Bootstrap源码包中_variables.scss文件）
// Body
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
【代码3-1】设置了页面Body的全局样式，具体如下：
● 背景为变量$white。
● 颜色为变量$gray-900。
其中，!default表示默认值。
【代码3-2】（详见Bootstrap源码包中_variables.scss文件）
// Links
//
// Style anchor elements.
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !
【代码3-2】设置了超链接的全局样式，具体如下：
● 颜色为theme-color("primary")。
● 当超链接处于“:hover”状态时颜色为darken($link-color, 15%)。