html栅格等于响应式嘛,响应式布局栅格化系统

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-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

预期结果：

.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;

}

.col-sm-2 .col-md-3 .col-lg-1

.col-sm-4 .col-md-3 .col-lg-2

.col-sm-4 .col-md-3 .col-lg-8

.col-sm-2 .col-md-3 .col-lg-1

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有一套比较规范的布局流，使整个页面的布局行为保持一致，前端同学在实际开发中可以借鉴；