Bootstrap栅格化系统
Bootstrap 的栅格化系统采用将页面布局分为12列,再根据页面宽度采用预定义类控制模块占用宽度比例的思想,实现响应式布局。此方法论下的实现可以兼容较多种比例的页面布局,命名比较规范,多列布局页面开发值得借鉴;
栅格化系统的工作规范
(1).container(.container-fluid)>.row>.column;采用容器内行(row)列(column)布局方式,.column必须包含在.row中,.row必须包含在.container中;.container可以包含多个.row,.row可以包含多个.column;
布局形式
(2)展示的内容应当放置于.column类中,并且只有.column可以作为.row的子元素;
(3)使用类似于.row .col-xs-4等预定义类,快速创建栅格化布局;
(4)栅格类适用于屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格化类,比如.col-md-*在.container-fludid宽度≥992px时生效;
媒介分类
Bootstrap将屏幕大小分为4类
/* 屏幕大小小于768px*/
@media (max-width: 767px) { ... }
/*屏幕最小宽度为768px*/
@media (min-width: 768px) { ... }
/*屏幕最小宽度为992px*/
@media (min-width: 992px) { ... }
/*屏幕最小宽度为1200px*/
@media (min-width: 1200px) { ... }
代表屏幕大小的几个缩写形式:
xs:extra small 特别窄屏幕,默认指浏览器像素宽度小于768px;
sm:small 窄屏幕,默认指浏览器像素宽度大于等于768px,通常是平板宽度;
md:middle 中等宽度屏幕,默认值指浏览器像素宽度大于等于992px,通常是桌面显示器,略缩小的情况;
lg:large 大屏幕,默认值指浏览器像素宽度大于等于1200px。
实例1:列宽比例展示展示
代码如下:
.row {
margin-bottom: 20px;
}
.row div {
min-height: 50px;
text-align: center;
line-height: 50px;
}
.row1 div {
border: 1px solid #ff0000;
}
.row2 div {
border: 1px solid #00ff00;
}
.row3 div {
border: 1px solid #0000ff;
}
.row3 div {
border: 1px solid #ccad00;
}
.row4 div {
border: 1px solid #ffaf00;
}
预期结果:
.col--1样式在控制范围内会使其控制块宽度为父容器的1/12;
.col--8样式在控制范围内会使其控制块宽度为父容器的8/12;
.col--4样式在控制范围内会使其控制块宽度为父容器的4/12;
.col--6样式在控制范围内会使其控制块宽度为父容器的6/12;
实际运行结果:
col布局比例
实例1:列宽比例展示展示
代码如下:
.row {
margin-bottom: 20px;
}
.row div {
min-height: 150px;
text-align: center;
line-height: 40px;
}
.row1 div {
border: 1px solid #df24b1;
}
#doc-width-info {
color: #ffaf00;
font-size: 25px;
text-align: center;
}
var divDocWith = document.getElementById("doc-width-info");
var showDocWidth = function () {
divDocWith.innerHTML = "文档宽度:" + document.body.scrollWidth + 'px';
}
window.onload = function () {
showDocWidth();
}
window.onresize = function () {
showDocWidth();
}
预期结果:
(1)container≥1200px(lg):4列布局1:2:8:1;
(2)container≥992px && container<1200px(md):3:3:3:3
(3)container≥768px && container<991px(sm):2:4:4:2
(3)container<768px(xs):div 默认display:block
实际运行结果:
lg 1:2:8:1;
md 3:3:3:3
sm 2:4:4:2
xs 默认布局
总结
代码可copy来运行,从运行结果可看出与预期一致,bootstrap有一套比较规范的布局流,使整个页面的布局行为保持一致,前端同学在实际开发中可以借鉴;