简单了解:

栅格系统英文为“gridsystems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日设计的主流风格之一。

网页栅格系统:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范

------移动设备优先

在h5的项目中,我们做了移动端的项目,它有一份非常重要的meta,用于设置屏幕和设备等一款级时候运行用户缩放,以及缩放比例的问题

<meta name='viewport'content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>

//分别为:定义窗口屏幕宽度和设备一致初始缩放比例最大缩放比例禁止用户缩放

-----布局容器

Bootstrap需要为页面内容和栅格系统包裹一个 .container或者.container-fluid容器,由于padding等属性的原因,这两种容器不能相互嵌套

//固定宽度(最大1170px)左右留白

<divclass=’container’>

XXX

</div>

//100%宽度

xxxx

</div>

栅格系统中,浏览器随着屏幕的大小的增减自动分配最多12列,通过一系列行(row)和列(column)的组合来创建页面布局,工作原理如下:

1.行(row)必须包含在.container或者.container-fluid中,以便赋予合适的排列(aligment)和内补(padding)

2.通过行(row)在水平方向创建一组列(column)

3.内容放在列(column)内,并且只有列可以作为行的直接子元素

4.类似 .row和 .col-xs-4的这种预定义的类,可以用来快速创建栅格布局

5.通过为列设置padding属性,从而创建列与列之间的间隔(gutter),通过为 .row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为行所包含的列抵消掉了padding

6.在栅格列中的内容排成一行

7.如果一行中包含的列大于12,多余的列所在的元素将被作为一个整体另起一行来排

8.栅格系统中的列是通过制定1到12的值来表示其跨越的范围,例如三个等宽的列可以使用三个 .col-xs-4来创建

栅格类使用与屏幕宽度大于或者等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类,因此在元素上应用任何 .col-md-*栅格类使用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类,在元素上应用任何 .col-lg-*不存在,也影响大屏幕设备

------响应式布局

<div class=’container’>//固定宽度

<div class=’row’>//第一行

<div class=’col-md-3’>我是内容</div>//占了12份的3份

<div class=’col-md-9’>我是内容</div>//占了12份的9份

</div>

<div class=’row’>//第二行

<div class=’col-md-4’>我是内容</div>//占了12份的4份

<div class=’row’>//第三行

<div class=’col-md-1’>我是内容</div>//占了12份的1份

</div>

<div>

-----栅格参数

栅格系统最外层区分了四种宽度的浏览器:超小屏(<768px),小屏(>=768px),中屏(>=992px),大屏(>=1200px),而内层.container容器的自适应宽度为:自动,750px,970px,1170px,自动的意思为:如果你是手机屏幕,则全面独占一行显示

Bootstrap(2)__Bootstrap基础<栅格系统>

举个栗子:

</div>

//如果是大屏幕电脑一行显示4个模块(-lg-3),如果是中等屏幕pad一行显示3个模块(-md-4),如果是小屏幕手机一行显示1个模块(xs-12)

3个常用技术点:

1.列偏移:

假设一行两列分别占5,6有让中间保持空隙,向两边靠

<div class=’col-md-6 col-md-offset-1’>我是内容</div>//对应的md偏移也是md,如果是设置的-2,偏移两列,加起来就是13份超过了,会自动换行并偏移,自己试试

</div>

2.嵌套:

嵌套遵循把父亲当做12份

<div class=’col-md-8’>我是嵌套的(1-8)</div>

<div class=’col-md-4’>我是嵌套的(9-12)</div>

</div>

</div>

3.移动:

push向右移动,pull向左移动

</div>

辅助类

----情景文本颜色

.text-muted 柔和灰

.text-primary 主要蓝

.text-success 成功绿

.text-info 信息蓝

.text-warning 警告黄

.text-danger 危险红

<p class=’text-muted ’>我是柔和灰</p>

----情景背景颜色

.bg-primary 主要蓝

.bg-success 成功绿

.bg-info 信息蓝

.bg-warning 警告黄

.bg-danger 危险红

<p class=’text-info ’>我背景是信息蓝</p>

----关闭按钮

以前的关闭按钮我们内容总是用X 表示,这样展示出来的效果其实不好因为x这个字母在不同的设备下渲染的效果不一样,bootstrap给我们提供了一个用× 表示

<button class=’close’>×</button>//.cose表示真正的关闭按钮(做了效果)

----三角符号

<spanclass=’caret’></span>

----快速浮动

//底层就是float,只不过使用了!important加强了优先级

----清除浮动

//这个div只需要放在需要清理浮动的区块的前面即可(比我们自己写的兼容性好)

----块级居中

//就是设置了margin:x auto,并且设置了display:block

----显示和隐藏

<div class=hidden>你看不见我</div>

响应式工具

在媒体查询时,针对不同屏幕大小,有时需要显示和隐藏部分内容,响应式工具类提供了下面的一些解决方案

<div class=’visible-xs-block’>超小屏的时候显示成区块</div>

<div class=’visible-md-inline’>中屏的时候显示成内联</div>

<div class=’hidden-xs’>用超小屏看就不到我的容颜勒</div>

秒客网

Bootstrap(2)__Bootstrap基础<栅格系统>

简单了解:

------移动设备优先

-----布局容器

------响应式布局

-----栅格参数

3个常用技术点:

1.列偏移:

2.嵌套:

3.移动:

辅助类

----情景文本颜色

----情景背景颜色

----关闭按钮

----三角符号

----快速浮动

----清除浮动

----块级居中

----显示和隐藏

响应式工具

相关文章