Bootstrap - CSS 概述

本章概述了 Bootstrap 架构的关键部分，包括 Bootstrap 如何实现更好、更快、更强大的 Web 开发。

HTML5 文档类型

Bootstrap 使用某些 HTML 元素和 CSS 属性，这些属性需要使用 HTML5 文档类型。因此，在所有使用 Bootstrap 的项目开头，请包含以下 HTML5 文档类型代码。

<!DOCTYPE html>
<html>
   ....
</html>

自 Bootstrap 3 发布以来，Bootstrap 就采用了移动优先的设计理念。这意味着“移动优先”样式遍布整个库，而不是放在单独的文件中。您需要将 **视口元标记** 添加到 **<head>** 元素中，以确保在移动设备上正确渲染和触摸缩放。

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

将 **user-scalable = no** 添加到 **content** 属性中，以禁用移动设备上的缩放功能，如下所示。通过此更改，用户只能滚动而不能缩放，这使得您的网站感觉更像一个原生应用程序。

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

通常 maximum-scale = 1.0 与 user-scalable = no 一起使用。如上所述，**user-scalable = no** 可能会为用户提供更像原生应用程序的体验，因此 Bootstrap 不建议使用此属性。

Bootstrap 3 允许您通过向 **<img>** 标签添加类 **.img-responsive** 来使图片响应式。此类将 **max-width: 100%;** 和 **height: auto;** 应用于图像，以便它可以很好地缩放至父元素。

<img src = "..." class = "img-responsive" alt = "Responsive image">

Bootstrap 设置基本的全局显示（背景）、排版和链接样式：

**基本全局显示** - 在 <body> 元素上设置 background-color: #fff;。
**排版** - 使用 @font-family-base、@font-size-base 和 @line-height-base 属性作为排版基础。
**链接样式** - 通过属性 @link-color 设置全局链接颜色，并且仅在 :hover 时应用链接下划线。

如果您打算使用 LESS 代码，您可以在 scaffolding.less 中找到所有这些。

Bootstrap 使用 Normalize.css 来建立跨浏览器一致性。

Normalize.css 是一个现代的、支持 HTML5 的 CSS 重置的替代方案。它是一个小型 CSS 文件，可以更好地提高 HTML 元素默认样式的跨浏览器一致性。

使用类 **.container** 来包装页面内容并轻松居中内容，如下所示。

<div class = "container">
   ...
</div>

查看 bootstrap.css 文件中的 **.container** 类：

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

请注意，由于填充和固定宽度，容器默认情况下不可嵌套。

查看 bootstrap.css 文件：

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

在这里您可以看到 CSS 具有带 **width** 的媒体查询。这有助于应用响应式设计，并且在这些媒体查询中，容器类会相应地修改以正确呈现网格系统。

打印页面