Bootstrap学习笔记——网格系统

来源：互联网发布：网络歌手兼职编辑：程序博客网时间：2024/06/05 23:59

1 实现原理

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统（Grid System），可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。让网站易于浏览，并降低用户端的负载。

Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。- - LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 - .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
详细分析略
参考
http://www.imooc.com/code/2325
http://www.tuicool.com/articles/Afuu2q/
http://www.runoob.com/bootstrap/bootstrap-grid-system.html

2 用法

下表总结了 Bootstrap 网格系统如何跨多个设备工作：
这里写图片描述

2.1 基本用法（列组合）

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性，例如：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>基本用法</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><link rel="stylesheet" href="style.css"></head><body><div class="container">  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-8">.col-md-8</div>  </div>  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>  </div>  <div class="row">    <div class="col-md-3">.col-md-3</div>    <div class="col-md-6">.col-md-6</div>    <div class="col-md-3">.col-md-3</div>  </div></div></body>

这里写图片描述

备注：
实例中用的是类”col-md-”，但是在调试窗口上显示不出来效果，全部以行展示，改成类”col-sm-”时全屏时能够显示出效果，而小屏的时候还是看不出来效果，最后改成类”col-xs-*”可以直接显示出效果。

如果直接将代码粘贴到本地，就完全可以显示，不过没有灰色背地及黑色边框。

针对调试窗口问题的解决方案是缩放浏览器，再点击全屏，就出现效果了

——网站上的调试窗口与本地浏览有差异

2.2 列偏移

在某列元素上添加类名“col-md-offset-*”该列就会向右偏移。如“col-md-offset-4”，表示该列向右移动4个列的宽度。

<div class="container"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div><div class="col-md-2">.col-md-3</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div></div></div>

注意：使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示，如：

<div class="container">  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>    <div class="col-md-2">.col-md-3</div>  </div>  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>  </div>  <div class="row">    <div class="col-md-3">.col-md-3</div>    <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>    <div class="col-md-4">col-md-4</div>  </div></div>

这里写图片描述

上面代码中列和偏移列总数为3+3+3+4 = 13>12，所以发生了列断行。

2.3 行排序

列排序其实就是改变列的左右控件位置，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*”(其中星号代表移动的列组合数)。

<div class="container">  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-8">.col-md-8</div>  </div></div>

这里写图片描述

<div class="container">  <div class="row">    <div class="col-md-4 col-md-push-8">.col-md-4</div>    <div class="col-md-8 col-md-pull-4">.col-md-8</div>  </div></div>

改变两列的控件位置
这里写图片描述

想想着一个人站在左边，推过去push，拉过来pull

2.4 列的嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。来看一个简单示例：

<body><div class="container">  <div class="row">    <div class="col-md-8">      我的里面嵌套了一个网格      <div class="row">        <div class="col-md-6">col-md-6</div>        <div class="col-md-6">col-md-6</div>      </div>    </div>    <div class="col-md-4">col-md-4</div>  </div>  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-8">      我的里面嵌套了一个网格      <div class="row">        <div class="col-md-4">col-md-4</div>        <div class="col-md-4">col-md-4</div>        <div class="col-md-4">col-md-4</div>      </div>    </div>  </div></div></body>

这里写图片描述

阅读全文

0 0