Bootstrap学习笔记（一） 媒体查询&布局容器&栅格系统&排版
备注：
官网：https://v3.bootcss.com/
CDN库：http://www.bootcdn.cn/bootstrap/
引入Bootstrap有几种方式：
1.可以先将源码文件下载至本地，再通过link引入：<link rel="stylesheet" href="css/bootstrap.css">
2.也可以通过CDN库直接复制链接
1.媒体查询
媒体查询就是可以根据设备显示器的特性（视口宽度、屏幕比例、设备方向-横向或者竖向等）为其设定CSS样式，属于响应式布局。
看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: yellow;
}
@media screen and (min-width: 500px) {
div{
width: 200px;
height: 200px;
background: #1b6d85;
}
}
@media screen and (min-width: 800px) {
div{
width: 300px;
height: 300px;
background: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>当页面尺寸大于800px的时候，div的颜色就是red，
当页面尺寸大于800px的时候，div的颜色就是#1b6d85，
当页面尺寸大于800px的时候，div的颜色就是yellow.
2.布局容器
<div class="container">
.container 类用于固定宽度并支持响应式布局的容器。
</div>
<div class="container-fluid">
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
</div>3.栅格系统(系统会自动分为最多12列)
1.创建栅格系统的容器
# 每一行row包含在一个容器container中
<div class="container">
<div class="row">
...
</div>
</div>2.创建合适的栅格系统
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
# 每个row代表一行(12份)
# col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；除了col-md-数字之外还有其他的几种：
.c0l-xs- 无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm- 屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md- 屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg- 屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；
例子如下：
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">屏幕分别为3种情况的时候，分别占每行的几份</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>4.排版
HTML 中的所有标题标签，<h1> 到 <h6>均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<span class="h1">我是p标签的h1标签</span><br/><br/>
<span class="h2">我是p标签的h2标签</span><br/><br/>
<span class="h3">我是p标签的h3标签</span><br/><br/>
<span class="h4">我是p标签的h4标签</span><br/><br/>
<span class="h5">我是p标签的h5标签</span><br/><br/>
<span class="h6">我是p标签的h6标签</span><br/><br/>刚刚学习，各位大佬如发现不足之处还请指出。
