【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">×</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;