使用Bootstrap让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>

 
使用Bootstrap让web开发更迅速、简单
 简单表单实例:

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

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

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

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

你可能感兴趣的:(bootstrap)