HTML5前端框架Bootstrap使用..docVIP

HTML5 前端框架 Bootstrap 使用 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的官方网站/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 div class=container-fluid div class=row-fluid div class=span3 div class=well sidebar-nav ul lia href=#link/a/li lia href=#link/a/li lia href=#link/a/li lia href=#link/a/li lia href=#link/a/li lia href=#link/a/li lia href=#link/a/li /ul /div /div div class=span9 div class=hero-unit h1Hello world!/h1 /div /div /div /div /body 上面的代码中，我们采用流式布局构建，将页面分成两部分：左边是7个链接，占3个宽度；右边是一个Hello world的标题，占9个宽度。效果如下： 图1 对上面的Hello world应用稍作改变，我们可以实现一个简单的HTML5介绍网站。将test.html页面的body元素中的内容替换成如下代码： body div class=container-fluid div class=row-fluid div class=span3 div class=well sidebar-nav ul class=nav nav-list li class=nav-headerSections/li lia href=#HTML5 Introduction/a/li lia h