*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使用非常简单，打开任何文本 编辑器，新建一个文件并命名为：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 »</a></p>
</div>
<div class="span4">
<h2>HTML5 Course</h2>
<p>HTML5 Course... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>HTML5 Drag</h2>
<p>HTML5 Drag... </p>
<p><a class="btn" href="#">View details »</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 »</a></p>
</div>
<div class="span4">
<h2>HTML5 Vedio</h2>
<p>HTML5 Vedio... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>HTML5 Canvas</h2>
<p>HTML5 Canvas... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
效果如下图所示：
图2*
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
沒有留言:
張貼留言
if you like make fds, wellcome you here~~anytime***
my free place for everyones who want the good software,
come & download them~ wellcome!!