【Bootstrap学习笔记】2.栅格系统、辅助类和响应式工具

五、栅格系统

学习内容

• 栅格系统相关概念
• 网格选项
• 列偏移、嵌套、交换位置(排序)

● 概念

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统。

移动设备优先：设置如下meta，即屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

布局容器：栅格系统需要放置在容器内，分为container和container-fluid两种容器，这两种容器不能相互嵌套。.container会做@media媒体查询来改变width，.container-fluid永远是100%的width。

//固定宽度
<div class="container">...</div>

//100%宽度
<div class="container-fluid">...</div>

● 网格选项

网格选项	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

● 列偏移、嵌套、交换位置(排序)

.col-md-offset-3
.col-md-push-3 .col-md-pull-3

<div class="container">
     原始行
     <div class="row">
         <div class="col-md-8 a">8</div>
         <div class="col-md-2 a">2</div>
     </div><br>
     列偏移，8和2整体移动
      <div class="row">
          <div class="col-md-8 col-md-offset-1 a">8</div>
          <div class="col-md-2 a">2</div>
      </div><br>
      列偏移，多了会换行
      <div class="row">
          <div class="col-md-8 col-md-offset-9 a">8</div>
          <div class="col-md-2 a">2</div>
      </div><br>
      嵌套，含15px的padding
      <div class="row">
          <div class="col-md-9 a">
              <div class="col-md-4 a">4</div>
              <div class="col-md-4 a">4</div>
              <div class="col-md-4 a">4</div>
          </div>
          <div class="col-md-3"></div>
      </div><br>
      交换位置，单体移动，不换行
      <div class="row">
          <div class="col-md-9 a">9</div>
          <div class="col-md-3 col-md-push-3 a">3</div>
      </div>
  </div>

六、辅助类和响应式工具

学习内容

• 相关概念
• 辅助类
• 响应式工具

● 概念

辅助类：系统提供的，用来辅助页面设计的辅助样式。例如前景色、背景色、显示关闭图标等。
响应式工具：利用媒体查询显示或隐藏某些内容。

●辅助类

1、前景色(6种)
.text-muted .text-primary .text-success .text-info .text-warning .text-danger

前景色
   <div class="container">
      <p class="text-muted">柔和灰</p>
      <p class="text-primary">主要蓝</p>
      <p class="text-success">成功绿</p>
      <p class="text-info">信息蓝</p>
      <p class="text-warning">警告黄</p>
      <p class="text-danger">危险红</p>
   </div>

2、背景色(5种)
.bg-primary .bg-success .bg-info .bg-warning .bg-danger

背景色
  <div class="container">
    <p class="bg-primary">主要蓝</p>
     <p class="bg-success">成功绿</p>
     <p class="bg-info">信息蓝</p>
     <p class="bg-warning">警告黄</p>
     <p class="bg-danger">危险红</p>
  </div>

3、关闭按钮
.close
用×表示关闭符号X

<button class="close">&times;</button>

4、三角符号
.caret

<span class="caret"></span>

5、左右浮动
.pull-left .pull-right
等同于float ，用!important加强优先级

<div class="container">
    <div class="a">LEFT</div>
     <div class="a">RIGHT</div>
     <div class="pull-left a">LEFT</div>
     <div class="pull-right a">RIGHT</div>
 </div>

6、区块居中
.center-block
等同于margin:x auto ，多设置了display:block

<div class="center-block a">区块居中</div>

7、清理浮动
.clearfix

<div class="pull-left a">L</div>
<div class="clearfix"></div>
<div class="a">R</div>

8、隐藏和显示
.show .hidden

<div class="show">显示</div>
<div class="hidden">隐藏</div>

扩展了解
1..sr-only
2..sr-only-focusable
3..text-hide

●响应式工具

1、媒体查询时，针对不同屏幕大小，有时需要显示和隐藏部分内容，例如隐藏侧栏。
2、需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

display样式：
1、.visible-*-block display: block;
2、.visible-*-inline display: inline;
3、.visible-*-inline-block display: inline-block;