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的官方网站http://twitter./bootstrap/上下载源码。
Bootstrap使用非常简单,打开任何文本编辑器,新建一个文件并命名为:, 在该文件开始处添加Bootstrap框架代码:
<!DOCTYPE html>
<html lang="en">
<head>
<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet">
</head>
从上面的代码可以看到:Bootstrap基于JQuery构建,所以需先引入JQuery。。
然后,我们可以将如下代码替换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 前端框架 bootstrap 使用 来自淘豆网m.daumloan.com转载请标明出处.
