Bootstrap网格 - 安然，o\'~\'o

Bootstrap网格

首先了解一下，什么是网格？

　　在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效的使用HTML和CSS的方法。

Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随设备或视口大小的增加而适当地扩展到12列，即渐进增强。

Bootstrap网格系统的工作原理如下：

1. 行必须放置在.container class内
2. 使用行来创建列的水平组
3. 内容放在列内，且唯有列可以是行的直接子元素
4. 预定义网格类，如.row、.col-xs-4
5. 列通过内边距来创建内容之间的间隙（.row上的外边距取负）
6. 通过指定想要横跨的十二个可用的列来创建（例如创建三个相等的列，则使用三个.col-xs-4）

为了让Bootstrap开发的网站对移动设备友好，确保适当地绘制和触屏缩放，需要在网页的head中添加viewport meta标签。例如：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

其中，width用于控制设备宽度；

　　device-width确保能在不同屏幕分辨率的设备上正确显示

　　initial-scale确保网页加载时，以1:1比例呈现，不会有任何缩放。

此外，添加user-scalable=no ，可以禁用缩放功能，一般maximum-scale=1.0与其一起使用。

Bootstrap网格的基本结构：

<div class="container">
    <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
    </div>
    <div class="row">...</div>
</div>
<div class="container">....

下表总结了Bootstrap网格系统如何跨多个设备工作：

发表于 2018-12-09 21:25 安然（o\'~\'o） 阅读(112) 评论(0) 编辑收藏举报