HTML5 前端框架 Bootstrap 使用教程

时间：2014-11-30

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>

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

效果如下图所示：

上一篇：Bootstrap文档全集 下一篇：推荐7套不错的Bootstrap模板

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权