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