BBOTSTRAP

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>