Bootstrap
第一步：下载
第二步： 解压缩
第三步：引入（head内部 link引入）
Bootstrap 全局样式
移动设备优先：
<meta name="viewport" content="width=device-width, initial-scale=1">
（需要在<head> 之间添加元数据标签在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">）
<meta http-equiv="X-UA-Compatible" content="IE=edge">（告诉IE浏览器以最高规格渲染）
.c1 {
background-color: red;
padding: 10px 20px;
margin: 0 auto;
height: 100px;
100px;
} margin:0 auto 为 自动居中
一.布局容器
<div class="container"> ... </div> 或 <div class="container-fluid"> ... </div>
二.栅格系统
<div class="col-xs-6 c1 col-xs-push-6"> </div> <div class="col-xs-6 c2 col-xs-pull-6"> </div> 或 <div class="col-md-6 col-xs-6 c1 col-xs-offset-3"> </div> 一共12列
三.媒体查询
@media screen and (max- 700px) { .c1 { background-color: green; 放 style 里
@media screen and (max- 700px) { .c1 { background-color: green; 放 style 里
四 嵌套列
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>