bootstrap经典网页布局_对于栅格布局的认识-刘方雨

这学期上前端课入了个门，发现，初级web前端开发者们在开发时常常陷入一个困境，就是拼命着眼于如何进行布局的复杂实现，从而消耗了专注于布局设计的精力。关于这个现象，我接触了新概念——“声明式”和“命令式”。

简单来概括，“命令式”就是你在心里有了一个你要实现的目标后，你告诉机器，执行什么指令，说的清清楚楚明明白白（但是机器不知道你要的是个什么鬼结果）。所以你非常的累，机器还不一定能执行出你要的结果（你可能下达不正确的指令）。

“声明式”则不一样，你向机器声明了你要什么结果，怎么去执行得到你的结果，就是机器需要操心的事情了，省心省力、完成度高。像数据库就是一个比较好的例子，SQL语言运行时，数据库帮你设计获取这个结果集的执行路径，并返回结果集。，使用SQL语言获取数据，显然要比自行编写处理过程去获取数据容易的多。

此博客为详细解说：https://blog.csdn.net/jessise_zhan/article/details/80129755

理解了这两个概念，我们可以思考这种模式在前端开发页面布局中的应用。

像目前的浮动布局，缺陷是很明显的，实现过程比较复杂和细节化，不利于知识的共享，如果要实现响应式布局，即适应于各种浏览器兼容性和各类大小的屏幕尺寸，则需要更多知识和技巧。非常贴合“命令式”了。

如果在屏幕背景显示细密的栅格，是否会对开发带来不少便利？类似坐标纸，帮助设计者可以正确的读取尺寸和对准边界。栅格 grid就是如此。

基于此种思想，社区出现了名为960.css 的栅格样式包，使用者只需要引入这个样式包，然后按照约定给元素指定相应的class属性，就能立即获得各种复杂的布局，实例可参看： http://960.gs

960的作者假定所有的网页宽度为固定的960px，以方便后续的处理。因为在当时，这个宽度可以适应各种电脑屏幕的尺寸。

960.css将屏幕划分若干行和列，如图所示：

container: 代表包裹整个栅格系统的容器

rows: 代表一行

column: 代表一列

gutter: 代表各列之间的空隙

将整个容器或屏幕分为12列或16列，我们以12列为例，图中，每1列宽为60px，gutter为20px,容器两边的补白各10px，即:960px = 10 + 60 12 + 20 11 + 10

.container_12 .grid_1 {

width: 60px;

}

.container_12 .grid_2 {

width: 140px;

}

.....

.container_12 .grid_12 {

width: 860px;

}

这样，我们只需要相应的元素设置列数，就能准确的设置宽度。

即便如此，960.css的诞生时代较早，存在一些缺陷，譬如：固定960px的宽度已经不适应于当前1280的主流屏幕，对移动端的支持不好，不支持响应式布局，不支持构建工具，定制不方便等。

但是如今的开发者开发出了更多栅格。

例如，bootstrap 栅格系统，他针对主流的屏幕尺寸，预先给出了不同的容器宽度和相应的class，可方便实现响应式布局，还提供了更多方便好用的class,如.row(不再需要手动清除浮动)等提供了构建工具支持，可快速定制栅格系统。

bootstrap 教程：http://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

更进一步，浏览器厂商还提供了内置实现的原生栅格系统，这是我看到比较好的教程

display: grid布局教程 http://www.hw798.com/news/102232

想学习实现简单的工具也不是那么容易，还是觉得前端水太深，入行需谨慎。