Bootstrap栅格布局系统的特点_html/css_WEB-ITnose
程序员文章站
2022-04-28 07:58:55
...
栅格布局系统的特点:
(1)所有的行必须放在容器中: .container或.container-fluid
(2)分为多行(row),一行中平均分为12列(col)
(3)网页内容只能放在列(col)中,不能直接放在行(row)
(4)可以在col中再嵌套row
(5)col分为四大类: col-xs col-sm col-md col-lg
(6)col-md-* *值可为1~12,值就为某个列的宽度( */12 )
(7)可以为一个列指定不同屏幕下的不同宽度
(8) col-lg-* 只对大PC屏幕有效
col-md-* 对普通PC和大PC屏幕都有效
col-sm-* 对平板、PC、大PC屏幕都有效
col-xs-* 对手机、平板、PC大PC屏幕都有效
(9) .hidden-lg 当前列只在大PC屏幕下隐藏
.hidden-md 当前列只在PC屏幕下隐藏
.hidden-sm 当前列只在平板屏幕下隐藏
.hidden-xs 当前列只在手机屏幕下隐藏
上一篇: 关于h5语义化标签的详细介绍
推荐阅读
-
bootstrap的栅格系统好用吗?_html/css_WEB-ITnose
-
bootstrap的栅格系统好用吗?_html/css_WEB-ITnose
-
栅格布局的两种简单的实现方式_html/css_WEB-ITnose
-
Bootstrap栅格系统_html/css_WEB-ITnose
-
Bootstrap入门笔记之(三)栅格系统_html/css_WEB-ITnose
-
【7】了解Bootstrap栅格系统基础案例(2)_html/css_WEB-ITnose
-
【10】了解Bootstrap栅格系统基础案例(5)_html/css_WEB-ITnose
-
【8】了解Bootstrap栅格系统基础案例(3)_html/css_WEB-ITnose
-
10套免费的响应式布局 Bootstrap 模版_html/css_WEB-ITnose
-
10套免费的响应式布局 Bootstrap 模版_html/css_WEB-ITnose