开发者学堂课程【前端开发框架 Bootstrap 使用教程：Bootstrap 全局 css 样式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4222
Bootstrap 全局 css 样式
一、Bootstrap 全局 css 样式的介绍
1、全局 css 样式：
设置全局 css 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
2、概览：
深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快、更强壮的最佳实践。
3、HTML5 文档类型：
Bootstrap 使用到的某些 HTML 元素和 css 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
例
<!DOCTYPE HTML>
<html lang=”zh-CN”> ...
</html>
二、Bootstrap 全局 css 样式的特点和运用
1、移动设备优先
在 Bootstrap2 中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中,我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说, Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放,需要在之中添加 viewport 元数据标签。
例
<netaname=”viewport”content=”width=device-width,initial=sscale=1”>
具体操作打开集成开发环境创建一个工程
首先引入一个 Bootstrap 文件
然后创建一个 HTML 文件
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>全局css样式</title>
<link href=”bootstrap.min.css”rel=”stylesheet”>
</head>
<body>
<div class=”container>
<p>内容哈哈哈哈</p>
</div>
</body>
</html>
支持移动设备需要在
<meta charset=”UTF-8”>
<meta name=”viewport”content=”width=device-width,inital-scale=1”>
<title>全局css样式</title>
<link href=”bootstrap.min.css”rel=”stylesheet”>
</head>
2、排版与链接
Bootstrap 排版、链接样式没置了基本的全局样式。分別是:
·为 body 元素役置 background-color:#fff;
·使用@font-family-base、@font-size-base 和@line-height-base a 変量作为排版的基本参数
·为所有链接设置了基本顔色@link-color,并且当链接处于：hover 状恋吋才添加下划线
送些祥式都能在 scaffolding.less 文件中找到对应的源码。
例
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>全局css样式</title>
<link href=”bootstrap.min.css”rel=”stylesheet”>将这个注释一下
</head>
<body>
<div class=”container>
<p>内容哈哈哈哈</p>
</div>
</body>
</html>
位置和大小都会发生变化
对于链接样式的设置
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>全局css样式</title>
<link href=”bootstrap.min.css”rel=”stylesheet”>
</head>
<body>
<div class=”container>
<p>内容哈哈哈哈</p>
<a href=””>hello</a>
</div>
</body>
</html>
3、布局容器
Bootstrap 需要为页面内容和栅格系统包裹个.container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因,这两种容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的窖器。
<div class="container">
...
</div>
.container-fluid类用于100%宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
