bootstrap栅格系统

全局css样式

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

bootstrap为响应式布局——通过媒体查询实现

1. 移动设备优先（增加meta属性）

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scale=no"/>

2. 排版和链接

排版
1）h标签对应的h类
2）small标签对应的small类

3. normalize.css 浏览器重置（库可下载），让各浏览器保持一致

4. 浏览器布局容器

固定模式布局 container 流式布局：container-fluid
样式用类名称使用

例一:class=container 自动居中并随浏览器大小变化而变化
css样式中的comtainer类

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
   }
 }

除此之外随着页面的变化还有媒体查询的相关属性
例二： 流式布局 container-fluid默认100%布局

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

虽然和container的样式相同，但是没有定义其他的媒体查询，所以宽度总是百分百

相同点：都有左右的padding(槽宽)，如果不需要可以给子元素设置负值的margin抵消掉槽宽；或者直接在样式中删除

5. 栅格系统

类似表格布局tb td tr， 一行12个列

1. 屏幕尺寸划分

屏幕名称	尺寸大小
超小屏：col-xs-	手机 (<768px)
小屏幕: col-sm-	平板 (≥768px)
中屏幕：col-md -	桌面显示器 (≥992px)
大屏幕：col-lg-	大屏幕 大桌面显示器 (≥1200px)

2. 行row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列aligment和内补padding。列必须是行的子元素

1. 内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
2. 只有中屏幕时会划分为12列，其他尺寸的屏幕没有样式
3. 每行最多12列，多于12列之后会折行再次排列划分

测试：

.row定义的全局css样式为：
所以抵消了父元素container-fluid里面的槽宽，不会影响内容

.row {
  margin-right: -15px;
  margin-left: -15px;
}

每一个col-尺寸-的样式中都有padding(槽宽)

 padding-right: 15px;
  padding-left: 15px;

所以要想适应各种屏幕，css样式为：

		.sty{
            border: 1px solid red;
        }
        .borde{
            border: 1px solid #000000;
            height: 100px;
            padding: 0 !important;/*直接删除原有padding，抵消父元素row的槽宽*/
            box-sizing: border-box;
        }

<div class="container-fluid sty">
    <div class="row">
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-1</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-2</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-3</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-4</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-5</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-6</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-7</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-8</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-9</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-10</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-11</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-12</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-13</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-14</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-15</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-16</div>
        <div class="col-md-1 col-lg-1 col-xs-1 col-sm-1 borde">.col-md-17</div>
    </div>
</div>

3. 性能优化：根据屏幕尺寸动态设置类名称

6. 显示隐藏

visible- hidden-原理：display-none;根据媒体查询相应的显示

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}

根据媒体查询设置相关显示
而hidden是只有相关媒体查询直接设置为隐藏

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

例如，想要某种效果只在大屏幕时显示，在中屏幕上显示为各占一行，其他为隐藏

<div class="container-fluid sty">
    <div class="row visible-lg-md">
        <div class="col-lg-2 borde">1</div>
        <div class="col-lg-10 borde">2</div>
    </div>
</div>

大屏幕

中屏幕

其他屏幕隐藏

7. 行元素的偏移（一行不满12列）

offset偏移量：页面占不满一整行时想要右对齐，原理是设置margin-left;

<div class="container-fluid sty">
    <div class="row">
        <div class="col-md-2 col-md-offset-2 borde">1</div>
        <div class="col-md-5 borde">2</div>
    </div>
</div>

push设置left值往右走（relative相对定位可能重叠）;pull刚好相反

<div class="container-fluid sty">
    <div class="row">
        <div class="col-md-1 borde col-md-push-4">col-md-1</div>
        <div class="col-md-7 bordee">col-md-5</div>
    </div>
</div>

8. 栅格嵌套

<div class="container-fluid sty">
    <div class="row">
        <div class="col-md-6 borde">
            <div class="row">
                <div class="col-md-4 borde">1</div>
                <div class="col-md-4 borde">2</div>
                <div class="col-md-4 borde">3</div>
            </div>
        </div>
        <div class="col-md-6 s"></div>
    </div>
</div>

解决方法

1. 内部嵌套不写row
2. 内部row单独定义margin:0