Bootstrap栅格系统

什么是栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

row(行)必须包含在.container(固定宽度)或 .container-fluid (100% 宽度)中
column(列)必须放在.row内

栅格选项

bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm、col-md、col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm是small的缩写,xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

栅格系统可以在多种屏幕设备上工作,实现了响应式。
col-xs- 超小屏幕 手机(<768px)。
col-sm- 小屏幕 平板 。(≥768px 且 <992px)。
col-md- 中等屏幕 桌面显示器(≥992px且<1200px)。
col-lg- 大屏幕 大桌面显示器(≥1200px)。

实例:
css

	div{
	   border: 1px solid #000;
	}

html

 

一行中放置不相等宽的多列

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
1
3
3
6
3
1
4
1

MD1
MD1
MD1
MD3
MD3
MD3
MD3
MD12
MD12
MD1

效果图
Bootstrap栅格系统_第1张图片
1.列偏移
通过.col-md-offset-* 类可以将列向右侧偏移

这里col-md-offset-1使.col-md-3向右偏移了一个列的宽度

 
2
6
2

在这里插入图片描述

2.列排序
通过 .col-md-push-* 和 .col-md-pull-* 类改变列的顺序

1
2

在这里插入图片描述

你可能感兴趣的:(Bootstrap栅格系统)