利用 Bootstrap 进行快速 Web 开发
作者：网络转载 发布时间：[ 2014/2/26 13:50:08 ] 推荐标签：开发 web
图 1. Aaron K. White 的 Bootstrap 网格系统模板
Bootstrap 网格系统的每一行多有 12 块，每两个块之间留有小槽来提供间隔。您可以拥有无限数量的行，每一行的高度任您设置。每个块是 70 像素宽，小槽是 30 像素宽。Bootstrap 还为页面正文设置一个 30 像素的左边距。网格系统的设计目标是进行基本的布置并为您分配空间，因此，在理想情况下，您只需关注要在网格中放入什么即可。
填充 HTML 模板
在 “在 CSS 中使用 LESS 实现更多的功能” 中，我使用了一个响应式设计示例（根据 developerWorks 博主 Bob Leah 的 示例）来展示 LESS 工具如何增强 CSS 语法。Bootstrap 是一种功能强大的工具，可简化来自该代码的许多关注。清单 2 是来自这篇文章的 HTML（代码 下载 中的 responsive.html），重写该 HTML（如 listing2.html），以便在 Bootstrap 的固定布局网格系统中运行它，并使用 Bootstrap 的响应特性进行补充：
清单 2. 用于 Bootstrap (listing2.html) 的示例 HTML 文件
<!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="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
sales@spasvo.com