Bootstrap网格系统
来自CloudWiki
- Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
目录
什么是网格
- 在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
- 简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
什么是 Bootstrap 网格系统
- Bootstrap 官方文档中有关网格系统的描述：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
- 让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。
- 响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
网格系统的工作原理
下面就是 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 网格系统是如何工作的：
- 整个父元素的宽度划分为12个网格，网格系统通过一系列的行和列来布局。
- 使用类.row来创建行。
- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
- 列是行的直接子元素,内容应该放置在列.col内。
- 可以指定每一列的宽度，宽度用格子数表示。比如：col-md-6 :中等页面时 占6个格子
- 所有列的格子数 加起来 应该等于12个格子。
注：列的宽度一共有四种规格（col-xs、col-sm、col-md 、col-lg），分布对应在不同屏幕上的宽度
网格布局样例
第一步：建立一个容器container
- 每个页面都需要一个容器<div class="container">...</div> ，确保居中和最大宽度。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 手机,平板，台式机区分</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
</div>
</body>
</html>
第二步：在容器中建立行
- 一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md-*"></div>。
<div class="container"> <div class="row"></div> <div class="row"></div> </div>
第三步：在行中建立列
- 网格中的每一行是由12 个单元组成的，您可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即 6+6=12。则使用的样式class是col-md-6。
- 您可以尝试其他更多的选项，比如 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。您可以尝试一下，但要确保总和总是 12。
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; border:2px solid blue;">
</div>
<div class="col-md-6" style="background-color: #dedef8;border:2px solid blue;">
</div>
<div class="row"></div>
</div>
第四步：在列中插入内容
- 全部代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 水平分成两列</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; border:2px solid blue;">
<p>第一列的段落1
</p>
<p>第一列的段落2
</p>
</div>
<div class="col-md-6" style="background-color: #dedef8;border:2px solid blue;">
<p>第二列的段落1
</p>
<p>第二列的段落2
</p>
</div>
</div>
</body>
</html>
- 用Bootstrap做出的东西还能自动适应屏幕的大小。你试着改变浏览器窗口的大小，当窗口变小时，我们的几个列会自动的变成上下排列，变成自适应。
扩展样例
设置更多的列
- 问题：设计第二行的布局，如下所示含三个列：
适应不同的设备
我们会添加更多的类，以适应不同屏幕大小的设备。
<div class="col-md-6 col-xs-8" style="background-color: #dedef8;border:2px solid blue;"> <p>第二列的段落1 </p> <p>第二列的段落2 </p> </div>
跨多个系统工作
- 下表总结了 Bootstrap 网格系统如何跨多个设备工作：
大中型设备使用实例
- Bootstrap 在中型设备中，会查找带有 md 的class，并使用它们。在大型设备中，会查找带有 lg 的class，并使用它们。在本实例中，我们的 2 个 div 在中型设备中显示为 50%/50% ，在大型设备为 33%/66%。
主要代码如下：
<div class="col-md-6 col-lg-4">....</div> <div class="col-md-6 col-lg-8">....</div>
请查看下面的实例进行验证。
- 代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 中型和大型设备区分显示</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6 col-lg-4" style="background-color: #dedef8;
border:2px solid blue;">
<p>第一列段落1
</p>
<p>第一列段落2
</p>
</div>
<div class="col-md-6 col-lg-8" style="background-color: #dedef8;
border:2px solid blue;">
<p>第二列段落1
</p>
<p>第二列段落2
</p>
</div>
</div>
</body>
</html>
- 在中型屏幕是两列分别 50% 50%的布局
- 在大屏幕中是两列分别是33%/66%的布局.
小型屏幕：手机、平板电脑
- 我们已经看过 中型和大型设备 。现在，让我们一起看另一个实例，我们将让它同样适用于小型手机。我们要把手机的列分割为 25%/75%，我们将添加如下选项：
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
- 现在，给我们提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。请查看下面的实例进行验证。
- 代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 手机,平板，台式机区分</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color: #dedef8;
border:2px solid blue;">
<p>第一列段落1
</p>
<p>第一列段落2
</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color: #dedef8;
border:2px solid blue;">
<p>第二列段落1
</p>
<p>第二列段落2
</p>
</div>
</div>
</body>
</html>
超小型设备：小屏手机
- 我们已经看过 中型和大型设备 。现在，让我们一起看另一个实例，我们将让它同样适用于小型手机。我们将添加如下选项：
<div class="col-xs-8 col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-xs-8 col-sm-9 col-md-6 col-lg-8">....</div>
响应式的列重置
- 以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。
- 为了解决这个问题，可以使用 .clearfix class和 响应式实用工具来解决，如下面实例所示：
<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
border:2px solid blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;border:2px solid blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.
</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
border:2px solid blue;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;border:2px solid blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim
</p>
</div>
</div>
</div>
应用案例：商职首页
参考文档： [1] Bootstrap 网格系统 http://www.runoob.com/bootstrap/bootstrap-grid-system.html [2] 响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统 http://blog.csdn.net/zzq900503/article/details/54427252
