栅格系统
栅格系统(grid systems),也被翻译为“网络系统”,运用固定的格子设计版面布局,其风格工整简洁。
网页栅格系统:以规则的网络阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性,而且对于前端开发来说,网页将更加的灵活与规范。
在 h5的项目中,我们做移动端的项目,有一份非常重要的 meta ,用于设置屏幕和设备等一款及时运行用户缩放以及缩放比例的问题:
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
// 分别为:定义窗口 屏幕宽度和设备一致 初始缩放比例 最大缩放比例 禁止用户缩放
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者 .container-fluid 容器,由于 padding等属性的原因,这两种容器不能互相嵌套。
固定宽度:
// 最大为 1170px
<div class=’container’></div>
//100%宽度
<div class=’container-fluid’></div>
栅格系统中,浏览器随着屏幕的大小的增减自动分配最多12列,通过一系列行(row)和列(column)的组合来创建页面布局,工作原理如下:
- 行必须包含在 .container或.container-fluid中,方便给合适的排列aligment和內补padding
- 通过行在水平方向创建一组列col
- 内容放在列内,并且只有列可以作为行的直接子元素
- 类似.row和.col-xs-4的这种预定义的类,可以用来快速创建栅格布局
- 通过为列设置padding属性,从而创建列于列之间的间隔gutter,通过为 .row元素设置负值 margin 从而抵消为 .container 元素设置的 padding,间接为行包含的列抵消掉了padding
- 在栅格列中的内容排成一行
- 如果一行中包含的列大于12,多余的列所在的元素将被作为一个整体另起一行来排列
- 栅格系统中的列是通过指定1到12的值来表示其跨域的范围,例如三个等宽的列可以使用三个 .col-xs-4来创建
- 栅格类使用与屏幕宽度大于或者等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类,因此在元素上应用任何 .col-md-* 栅格类使用于与屏幕宽度大于或者等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类,在元素上应用任何 .col-lg-* 不存在,也影响大屏幕设备
1)响应式布局
2)栅格参数
栅格系统最外层区分了四种宽度的浏览器:
- 超小屏(<768px)
- 小屏(>=768px)
- 中屏(>=992px)
- 大屏(>=1200px)
而内层,container容器的自适应宽度为:自动750px,970px,1170px,自动的意思为:如果你是手机屏幕,则全面独占一行显示
3个常用的技术点:
- 列偏移:假设一行两列分别占有5,6,有让中间保持空隙,向两边靠:
- 嵌套:嵌套遵循把父亲当作12份
- 移动:push,向右移动
pull,向左移动
例如:不同屏幕大小,盒子所占份数
3)辅助类
----情景文本颜色
<p class=’text-muted’>我是柔和灰</p>
.text-muted 柔和灰
.text-primary 主要蓝
.text-success 成功绿
.text-info 信息蓝
.text-warning 警告黄
.text-danger 危险红
----情景背景颜色
.bg-primary 主要蓝
.bg-success 成功绿
.bg-info 信息蓝
.bg-warning 警告黄
.bg-danger 危险红
----关闭按钮
以前的关闭按钮我们内容总是用X 表示,这样展示出来的效果其实不好因为x这个字母在不同的设备下渲染的效果不一样,bootstrap给我们提供了一个用 &timers; 表示
<button class=’close’> &timers;</button> // .cose表示真正的关闭按钮(做了效果)
----三角符号
<span class=’caret’></span>
----快速浮动
<div class=’pull-left’>左边</div>
<div class=’pull-right’>右边</div>
// 底层就是float,只不过使用了!important加强了优先级
----清除浮动
<div class=’clearfix’><div>
// 这个div只需要放在需要清理浮动的区块的前面即可(比我们自己写的兼容性好)
<div class="pull-right" style='width:100px; height:100px; background:red;'>1</div>
<div class='clearfix'></div>
<div style='width:100px; background-color:blue'>2</div>
----块级居中
<div class=’center-block’>居中</div>
//就是设置了margin:x auto,并且设置了display:block
----显示和隐藏
<div class=’show’>显示</div>
<div class='hidden'>你看不见我</div>
4)响应式工具
在媒体查询时,针对不同屏幕大小,有时需要显示和隐藏部分内容,响应式工具提供了下面的一些解决方案:
<div class=’visible-xs-block’>超小屏的时候显示成区块</div>
<div class=’visible-md-inline’>中屏的时候显示成内联</div>
<div class=’hidden-xs’>用超小屏看就不到我的容颜勒</div>