使用Bootstrap让web开发更迅速、简单

hzy3774

浏览: 993027 次
性别:
来自: 珠海

最近访客更多访客>>

diego0404

jklwan

anbin0814

lxljava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB前端

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

Bootstrap主要包括四个部分：

脚手架

全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。

基本CSS样式

常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。

组件

常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。

JavaScript插件

和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。

下载地址：http://www.bootcss.com/

我们需要的主要是一个js文件和一个css文件：

例如，一个最简单的bootstrap页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=gb2312" />
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="http://libs.baidu.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
		<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
		<title>This is a bootstrap demo</title>
	</head>
	<body>
		<h1>Hello, world!</h1>
	</body>
</html>

使用了百度的CDN公共库。

一个table的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=gb2312" />
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="http://libs.baidu.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
		<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
		<title>This is a bootstrap demo</title>
	</head>
	<body>
		<table class="table table-striped table-bordered">
			<caption>
				<h2> My Table </h2>
			</caption>
			<tr>
				<th>默认样式</th>
				<th>默认样式</th>
				<th>默认样式</th>
			</tr>
			<tr>
				<td>默认样式</td>
				<td>默认样式</td>
				<td>默认样式</td>
			</tr>
			<tr>
				<td>默认样式</td>
				<td>默认样式</td>
				<td>默认样式</td>
			</tr>
		</table>
	</body>
</html>

简单表单实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=gb2312" />
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="http://libs.baidu.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
		<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
		<title>This is a bootstrap demo</title>
	</head>
	<body>
		<form class="form-horizontal">
			<div class="control-group success">
				<label class="control-label" for="inputId">账号：</label>
				<div class="controls">
					<input type="text" id="inputId" placeholder="请输入账号">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="inputPassword">密码：</label>
				<div class="controls">
					<input type="password" id="inputPassword" placeholder="请输入密码">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="repeatPassword">再次输入密码：</label>
				<div class="controls">
					<input type="password" id="repeatPassword" placeholder="请再次输入密码">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">性别：</label>
				<div class="controls">
					<label class="radio">
						<input type="radio" name="sex" id="optionsRadios1" value="option1" checked>
						男</label>
					<label class="radio">
						<input type="radio" name="sex" id="optionsRadios2" value="option2">
						女</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">家乡：</label>
				<div class="controls">
					<select>
						<option>北京</option>
						<option>上海</option>
						<option>广州</option>
						<option>深圳</option>
						<option>西安</option>
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">爱好：</label>
				<div class="controls">
					<label class="checkbox">
						<input type="checkbox">
						打球</label>
					<label class="checkbox">
						<input type="checkbox">
						跑步</label>
					<label class="checkbox">
						<input type="checkbox">
						编程</label>
					<button type="submit" class="btn btn-primary">
						注册
					</button>
					<button type="reset" class="btn btn-inverse">
						重置
					</button>
				</div>
			</div>
		</form>
	</body>
</html>

图标：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=gb2312" />
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="http://libs.baidu.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
		<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
		<title>This is a bootstrap demo</title>
	</head>
	<body>
		<ul class="nav nav-list">
			<li class="active">
				<a href="#"><i class="icon-home icon-white"></i> 首页</a>
			</li>
			<li>
				<a href="#"><i class="icon-book"></i> Library</a>
			</li>
			<li>
				<a href="#"><i class="icon-pencil"></i> Applications</a>
			</li>
			<li>
				<a href="#"><i class="i"></i> Misc</a>
			</li>
		</ul>
	</body>
</html>