响应式布局---2. Bootstrap前端开发框架
1.1 介绍
Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。
1.2 使用
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四部曲：
1.2.1 创建文件夹结构
在https://v3.bootcss.com/下载bootstrap的压缩文件，解压后将其中的文件夹(css,fonts,js)复制到刚刚建立的bootstrap文件夹下：
1.2.2 创建html骨架结构、引入相关样式文件
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 要求当前页面使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
解决ie9以下浏览器对html5新增标签不识别，并导致css不起作用的问题
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
解决ie9以下浏览器对css3 Media Query 的不识别问题
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap的样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
1.2.3 书写内容
- 直接拿Bootstrap预先定义好的样式来用
- 修改Bootstrap原来的样式，注意权重问题
- 学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
<body>
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- bootstrap是根据类来创建外观形状 -->
<div class="btn btn-success login">登陆</div>
<div class="btn btn-danger">未成功</div>
</body>
/* 利用我们自己写的样式覆盖原先的样式 */
.login {
width: 88px;
height: 45px;
}
1.3 布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container,它提供两个做此用处的类。（注意：这个类名必须是container，不可更改）
.container类
- 响应式布局的容器 固定宽度
- 大屏（>=1200px）宽度定为1170px
- 中屏（>=992px）宽度定为970px
- 小屏（>=768px）宽度定为750px
- 超小屏（100%）
上述宽度都是设定好的，不可以像之前一样任意修改
.container-fluid类
- 流式布局容器百分比宽度
- 占据全部视口(viewport)的容器
- 适合于单独移动端开发
<body>
<!-- 此时拉伸屏幕可以看到container盒子的宽度自动在1170px、970px、750px、100%之间变化 可以与01-响应式布局原理中的代码进行比较 这里省略了媒体查询 实际上媒体查询的部分在bootstrap中定义好了 -->
<!-- 注意在bootstrap里面为container定义了一个左右15px的内边距 -->
<div class="container">123</div>
<!-- 适合于单独移动端开发 不适合响应式开发 -->
<div class="container-fluid">abc</div>
</body>
超小屏：
大屏：