Bootstrap栅格布局系统的特点

简介: Bootstrap栅格布局系统的特点

栅格布局系统的特点:

(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 当前列只在手机屏幕下隐藏

目录
相关文章
|
3月前
|
机器学习/深度学习 存储 算法
基于Flask+Bootstrap+机器学习的世界杯比赛预测系统
基于Flask+Bootstrap+机器学习的世界杯比赛预测系统
58 0
|
4月前
|
编解码 移动开发 前端开发
【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
|
3月前
|
机器学习/深度学习 数据采集 算法
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统(上)
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统
55 0
|
14天前
|
前端开发 容器
Bootstrap 5 保姆级教程(一):容器 & 网格系统
Bootstrap 5 保姆级教程(一):容器 & 网格系统
N..
|
2月前
|
开发框架 前端开发 容器
Bootstrap栅格系统
Bootstrap栅格系统
N..
13 0
|
3月前
|
机器学习/深度学习 数据可视化 Python
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统(下)
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统
52 0
|
4月前
|
前端开发 JavaScript Java
基于JavaWeb机票订购系统(含前后台)(Java+spring+jsp+bootstrap+mysql)
基于JavaWeb机票订购系统(含前后台)(Java+spring+jsp+bootstrap+mysql)
|
5月前
|
编解码 前端开发 容器
BootStrap之前奏响应式布局
BootStrap之前奏响应式布局
45 0
|
6月前
|
前端开发
使用bootstrap的栅栏实现五列布局
使用bootstrap的栅栏实现五列布局
47 0
|
7月前
|
前端开发 容器
前端基础 - Bootstrap网格系统
前端基础 - Bootstrap网格系统
33 0