HTML5 前端框架 Bootstrap 使用教程

1. 简介

BootstrapTwitter推出的一个开源的前端框架。

BootstrapTwitter的设计师Mark OttoJacob Thornton合作开发,由动态语言Less写成。它是一套“易用、优雅、灵活、可扩展”的前端工具集,提供了优雅的HTML/CSS规范。

Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

Bootstrap兼容于所有主流浏览器,包括各种移动设备。

 

 

2. 下载和使用

Bootstrap建立了一个响应式的12网格布局系统,它引入了fixedfluid-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构建所以需先引入JQueryBootstrap框架代码包括了bootstrap.jsbootstrap.css两个文件。

然后我们可以将如下代码替换body元素的内容

<body>

     <div class="container-fluid">

         <div class="row-fluid">

              <div class="span3">

                   <div 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>

                   </div>

              </div>

              <div class="span9">

                   <div class="hero-unit">

                       <h1>Hello 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-header">Sections</li>

                            <li><a href="#">HTML5 Introduction</a></li>

                            <li><a href="#">HTML5 Course</a></li>

                            <li><a href="#">HTML5 Drag</a></li>

                            <li><a href="#">HTML5 Geolocation</a></li>

                            <li><a href="#">HTML5 Audio</a></li>

                            <li><a href="#">HTML5 Vedio</a></li>

                            <li><a href="#">HTML5 Canvas</a></li>

                       </ul>

                   </div>

              </div>

              <div class="span9">

                   <div class="hero-unit">

                       <h1>Welcome to HTML5!</h1>

                   </div>

                   <div class="row-fluid">

                    <div class="span4">

                      <h2>HTML5 Introduction</h2>

                      <p>HTML5 Introduction... </p>

                      <p><a class="btn" href="#">View details &raquo;</a></p>

                    </div>

                    <div class="span4">

                      <h2>HTML5 Course</h2>

                      <p>HTML5 Course... </p>

                      <p><a class="btn" href="#">View details &raquo;</a></p>

                    </div>

                    <div class="span4">

                      <h2>HTML5 Drag</h2>

                      <p>HTML5 Drag... </p>

                      <p><a class="btn" href="#">View details &raquo;</a></p>

                    </div>

                </div>

                <div class="row-fluid">

                    <div class="span4">

                      <h2>HTML5 Audio</h2>

                      <p>HTML5 Audio... </p>

                      <p><a class="btn" href="#">View details &raquo;</a></p>

                    </div>

                    <div class="span4">

                      <h2>HTML5 Vedio</h2>

                      <p>HTML5 Vedio... </p>

                      <p><a class="btn" href="#">View details &raquo;</a></p>

                    </div>

                      <div class="span4">

                      <h2>HTML5 Canvas</h2>

                      <p>HTML5 Canvas... </p>

                      <p><a class="btn" href="#">View details &raquo;</a></p>

                      </div>

                </div>

              </div>

         </div>

     </div>

</body>

效果如下图所示:

2

Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione