响应式布局---3. Bootstrap栅格系统

1.1 栅格系统介绍

利用Bootstrap做响应式内部采取的是一种叫做栅格系统的方式。
栅格系统:英文名girdsystems,又称网格系统,它是指将页面布局划分成等宽的列,然后通过列数的定义来模块化页面布局。
与rem划分等份数不同的是:rem响应式布局中是将整个屏幕划分成若干等分,而栅格系统是将页面内容(container)划分成若干等份。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口尺寸的增加,系统会自动分为最多12列。
Bootstrap里面的container宽度是固定的,但是不同屏幕下,container的宽度不一样,我们再把container划分为12等份。
Bootstrap也采用了normalize.css的初始化,以后在引用Bootstrap的时候就不再需要另外引入normalize.css文件。
https://v3.bootcss.com/css/

1.2 栅格选项参数

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
体会Bootstrap中文网:https://www.bootcss.com/ 的以下部分的伸缩布局:
响应式布局---3. Bootstrap栅格系统_第1张图片

实现

响应式布局---3. Bootstrap栅格系统_第2张图片

  • 行row必须放到container布局容器里面
  • 我们实现列的平均分配需要给列添加类前缀
  • xs-extral small:超小;sm-small:小;md-medium:中等;lg-lage:大;
  • 列column大于12,多余的列所在元素将被作为一个整体另起一行排列
  • 每一列默认有15px的padding
  • 可以同时为一列指定多个设备的类名,以便划分不同的份数,例如:class="col-md-4 col-sm-6"

举例1:


    

当孩子的份数相加等于12 则孩子可以占满整个container宽度

1
2
3
4
1
2
3
4

当孩子的份数相加小于12 则孩子可以占不满整个container宽度

1
2
3
4

当孩子的份数相加大于12 则多出的那一列另起一行显示

1
2
3
4

    
    
    
    
    
    
    
    Document
    

效果图如下:
响应式布局---3. Bootstrap栅格系统_第3张图片

举例2:


    
一.
1
2
3
4
二.
1
2
3
4




响应式布局---3. Bootstrap栅格系统_第4张图片

1.3 列嵌套


    
a
b
2
3

1.4 列偏移

使用.col-md-offset-类,可以将列向右偏移,这些类实际上是通过使用选择器为当前元素增加了左侧的边距(margin)。


    
左侧
右侧
中间盒子

1.5 列排序

通过使用.col-md-push-和.col-md-pull-类就可以很容易改变列column的顺序。
响应式布局---3. Bootstrap栅格系统_第5张图片


    
左侧
右侧

1.6 响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面工作。
响应式布局---3. Bootstrap栅格系统_第6张图片
与之相反的是visible-xs、visible-sm、visible-md、visible-lg是显示某个页面内容。


    
1 我会在大屏下显示哦
2
4

你可能感兴趣的:(响应式布局---3. Bootstrap栅格系统)