bootstrap基础样式学习（二）——栅格

2024-10-19 18:03:08

(1)最外层必须使用容器

div.container或 div.container-fluid

(2)容器可以放置任何内容,若想使用栅格系统必须用 div.row

div.container > div.row

(3)一个.row中不能放置其它的内容，只能放置.col,列中放置任何内容.

div.container > div.row > div.col

(4)Bootstrap中行的默认均分12等分,每个列必面指定在行内占比.

12=[6-6]=[4-4-4]

(5)栅格系统针对不同的屏幕提供不同列

.col-lg-1/2/3...12

.col-md-1/2/3..12

.col-sm-1/2/3..12

.col-xs-1/2/3..12

(6)可以使用“列偏移”实现指定列及其后的列向右偏移的效果

.col-lg-offset-1/2/3/...12

.col-md-offset-1/2/3/...12

.col-sm-offset-1/2/3/...12

.col-xs-offset-1/2/3/...12

(7)需要注意不同屏幕下列的适用性

.col-xs-* 适用xs/sm/md/lg 屏幕

.col-sm-* 适用 sm/md/lg 屏幕

.col-md-* 适用 md/lg屏幕

.col-lg-* 适用 lg屏幕

列宽对于当前屏幕己更大屏幕都有效，列偏一样

(8)一个列可以指定在不同屏幕下宽度占比

div.col-xs-12/col-sm-9/col-md-6

div.col-xs-12/col-md-6

坑:div.col-xs-6 冲突 div.col-sm-6 错，不能写相同站列

(9)一列可以指定在特定屏幕下隐藏

.hidden-xs 仅在xs屏幕下隐藏

.hidden-sm 仅在sm屏幕下隐藏

.hidden-md 仅在md屏幕下隐藏

.hidden-lg 仅在lg屏幕下隐藏

(10)栅格系统可以嵌套,规则:在列中再嵌入行，行中再有列

.container >

.row >

.col-*-* >

.row >

.col-*-*>

最新文章

热门文章