bootstrap
栅栏系统css中的col-xs-*、col-sm-*、col-md-*
的意义:
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
首先说明:
1、col-
列;
2、xs-maxsmall
,超小;sm-small
,小;md-medium
,中等;lg-large
,大;
3、-*
表示占列,即占自动每行row分12列栅格系统比;
4、col-xs-*
超小屏幕 手机 (<768px),
.col-sm-*
小屏幕 平板 (≥768px),
.col-md-*
中等屏幕 桌面显示器 (≥992px)(栅格参数).
5、不管在哪种屏幕上,栅格系统都会自动的每行row
分12
列 col-xs-*
和col-sm-*
和col-md-*
后面跟的参数表示在当前的屏幕中 每个div
所占列数。例如 <div class="col-xs-6 col-md-3">
这个div在屏幕中占的位置是: .col-xs-6
在超小屏幕中占6列 也就是屏幕的一半(12/6列=2个div) ,.col-md-3
在中单屏幕中占3列也就是1/4(12/3列=4个div)。
6、反推,如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 ),则col-xs-4
;在大屏幕上显示6个div(12/6个=每个占2列 ) ,则 col-md-2
;这样我们就可以控制我们自己想要的什么排版了。
7、以下案例说明:
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<!-- 说明:每row行共12列,分个3div,每个div平占4列,即3个*4列=12列 -->
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
<!-- 说明:每row行共12列,分个2div,第1个div占4列,第2个div则占8列,即4列+8列=12列 -->
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
<!-- 说明:每row行共12列,分个3div,每1,3个div占3列,第2个div则占6列,即3列+6列+3列=12列 -->
</div>
8、混用案例:
HTML代码:
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
</div>
当屏幕尺寸
小于 768px 的时候,用 col-xs-12
类对应的样式;
在 768px 到 992px 之间的时候,用 col-sm-9
类对应的样式;
在 992px 到 1200px 之间的时候,用 col-md-6
类对应的样式;
大于 1200px 的时候,用 col-lg-3
类对应的样式;