Stay before every beautiful thoughts.

Just be nice, always think twice!

Bootstrap详解:栅格系统

江矿先森. Bootstrap

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

1、col-xs类

用法是<div class=“col-xs-*”>。它星号代表1~12的数字。我们知道栅格系统总共有12列,我们在这里使用数字几就代表着该div占用几列的宽度。假如我们在给超级小屏幕开发界面,那么我们使用该类,该类没有任何行为,不管屏幕小到多少,都不会改变div的布局。

2、col-sm类

用法是<div class=“col-sm-*”>。星号的意义同上,但是该类适合屏幕宽度为750px的设备,如果在屏幕宽度小于750px的设别上,该div就会水平堆叠。 这是在大于750px屏幕上的样式: 这是在小于750px屏幕上的样式:

3、col-md类

用法是<div class=“col-md-*”>。该类适合970px以上屏幕。通上面讲的道理一样,假如使用屏幕尺寸小于970px的设备查看网页,div就会垂直堆叠。 这是在大于970px屏幕上的样式: 这是在小于970px屏幕上的样式:

4、col-lg类

用法是<div class=“col-lg-*”>。该类适合1170px以上屏幕。通上面讲的道理一样,假如使用屏幕尺寸小于1170px的设备查看网页,div就会垂直堆叠。 这是在大于1170px屏幕上的样式: 这是在小于1170px屏幕上的样式:

如何组合使用这几个类? 我们使用<div class=“col-sm-10 col-md-8”>这样的方式来表示:在中等屏幕设备上该div占用8列的宽度;在小屏幕上该div占用10列的宽度。

江矿先森.
前(台)端(菜), 喜欢瞎折腾新技术. 乜野都识少少, 先可以扮代表:p