利用 Bootstrap 进行快速 Web 开发（2）网格系统
|
- UID
- 1066743
|
利用 Bootstrap 进行快速 Web 开发（2）网格系统
网格系统 中的主要容器 div 表示使用 Bootstrap 的固定布局。放入该容器中的 HTML 合并到了 Bootstrap 的网格系统 中。
如果还能想起曾经看到过的大部分 Web 页面，那么您就会认识到它们被分成了一系列的块。位于页面顶部的块可能拥有一个徽标。导航可能位于左边或右边的块中，而内容索引可能也适合放在那个位置。甚至可能出现另一个块包含一个脚注的情况。主要内容本身可能被划分成多个面板或块。过去，Web 设计人员通过使用 CSS 盒子模型（box model）手工设置所有这些块。
网格系统是将盒子布置（比如刚刚描述的）抽象为行和列的一种方法。Bootstrap 为此类网格提供了一个核心的 CSS。您可以通过使用特殊的类，通过嵌入 div 元素将内容放置在任何布局的盒子中。
图 1 显示了一个有用的模板，这个模板最初由 Aaron K. White 开发，用于可视化 Bootstrap 的网格系统并规划如何安排您的内容（参见 ）。在本文中，我做了一些修改，以便在本文中更容易读取文本。
图 1. Aaron K. White 的 Bootstrap 网格系统模板 Bootstrap 网格系统的每一行最多有 12 块，每两个块之间留有小槽来提供间隔。您可以拥有无限数量的行，每一行的高度任您设置。每个块是 70 像素宽，小槽是 30 像素宽。Bootstrap 还为页面正文设置一个 30 像素的左边距。网格系统的设计目标是进行基本的布置并为您分配空间，因此，在理想情况下，您只需关注要在网格中放入什么即可。
填充 HTML 模板在 “ ” 中，我使用了一个响应式设计示例（根据 developerWorks 博主 Bob Leah 的 ）来展示 LESS 工具如何增强 CSS 语法。Bootstrap 是一种功能强大的工具，可简化来自该代码的许多关注。清单 2 是来自这篇文章的 HTML（代码 中的 responsive.html），重写该 HTML（如 listing2.html），以便在 Bootstrap 的固定布局网格系统中运行它，并使用 Bootstrap 的响应特性进行补充：
清单 2. 用于 Bootstrap (listing2.html) 的示例 HTML 文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <!doctype html>
<html lang="en-US">
<head>
<title>Responsive Bootstrap page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello world!</h1>
<div class="row">
<div id="banner" class="span12">
<!-- Photo by Jake Sutton
http://www.flickr.com/photos/44124405407@N01/510899838 -->
<img src="img/sky-slim.jpg">
</div>
</div>
<div class="row">
<div id="main-content" class="span8">
<p>Humpts dumptus in muro sedet
</p>
<p>Veni vidi vici
</p>
<p>Alea iacta est
</p>
<hr>
</div>
<div class="span4">
<div class="widget-title">One</div>
<div class="widget-text">
The quick brown fox jumps...
</div>
<div class="widget-content">
<div class="widget-title">Two</div>
<div class="widget-text">
Over the lazy dog...
</div>
</div>
<div class="widget-content">
<div class="widget-title">Three</div>
<div class="widget-text">
To get to the other side
</div>
</div>
</div>
</div>
<div class="row">
<div id="footer" class="span12">
© Nobody! This document is placed in the public domain.
</div>
</div>
</div>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
|
在 中，Bootstrap 删除了我需要在较旧的响应式设计代码中手动完成的任务。因为页面使用了 Bootstrap 的网格系统，所以我不再需要使用专门的 CSS 来操作或调整盒子大小。仔细安排可视空间的 CSS 也不需要专门的 CSS，因为 Bootstrap 网格在各个块之间设置了很好的默认值。此外，我不需要任何 CSS 来进行媒体查询（media query）并在设计参数中设置响应，因为 Bootstrap 的响应特性会负责完成这些任务。
您可以在清单 2 中看到 div 标记的嵌套。嵌套的 div 使用了 Bootstrap 网格类。具有 container 类的 div 是整个固定网格布局的包装程序。具有 row 类的每个 div 在网格中定义了盒子的一行。具有 span4 类的 div 定义了一个横跨 4 个盒子的块。具有 span12 类的 div 定义横跨 12 个盒子的块 — 页面的整个宽度。Bootstrap 有一个 spanN 类，可横跨从 1 到 12 的任意数量 N 的盒子。
图 2 显示了所生成的页面在移动浏览器中的外观（运行 Android 4.1.1 的 Samsung Galaxy S3 上的 Google Chrome）：
图 2. 清单 2 中的浏览器输出 |
|
|
|
|
|
