1. 简介
Bootstrap是Twitter推出的一个开源的前端框架.
Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,由动态语言Less写成.它是一套"易用,优雅,灵活,可扩展"的前端工具集,提供了优雅的html/CSS 规范.
Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括MSNBC(微软全国广播公司)的 Breaking News都使用了该项目.
Bootstrap兼容于所有主流浏览器,包括各种移动设备.
2. 下载和使用
Bootstrap建立了一个响应式的12网格布局系统,它引入了fixed和fluid-with两种布局方式,可以快速构建web应 用.目前Bootstrap最新版本为3.0.0,可以在Bootstrap的官方网站http://twitter.github.com/bootstrap/上下载源码.
Bootstrap使用非常简单,打开任何文本编辑器,新建一个文件并命名为:test.html, 在该文件开始处添加 Bootstrap框架代码:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
<link href="bootstrap.css" rel="stylesheet">
</head>
从上面的代码可以看到:Bootstrap基于JQuery构建,所以需先引入JQuery.Bootstrap框架代码包 括了bootstrap.js和bootstrap.css两个文件.
然后,我们可以将如下代码替换body元素的内容:
<body>
<center class="container-fluid">
<center class="row-fluid">
<center class="span3">
<center class="well sidebar-nav">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</center>
</center>
<center class="span9">
<center class="hero-unit">
<h1>Hello world!</h1>
</center>
</center>
</center>
</center>
</body>
来源: http://www.bianceng.cn/web/Html/201308/37225.htm