Bootstarp---轻轻松松让你的网页颜值爆表

浏览数：19 / 时间：2015年06月09日

Bootstrap太强大了，刚开始接触就已经被它深深的吸引了。

首先Bootstrap是什么呢？

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

它能让我们做些什么呢？

你是不是在网页制作的时候经常对那些网页布局，写css样式和重复的js特效而烦恼。那么Bootstrap就解决了我们的问题。 Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。所有你网站中常用到的它都包含了。

怎么使用呢？

只要到Bootstrap官网：http://getbootstrap.com/下载它。里面包括js、css和image三个文件夹。使用的时候跟我们平时引入js和css文件一样。当然如果你只想使用其中的一个组件你也可以单独下载它的js文件。

下面这个例子就是我几分钟搭建的一个页面

技术分享

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap</title>
<script type="text/JavaScript" src="jquery-1.9.1.min.js"></script>
<script type="text/JavaScript" src="bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div class="container">
     <div class="navbar navbar-inverse " >
		 <div class="navbar-inner">
			  <div class="container">
				  <ul class="nav">
					  <li class="active"><a href="#">首页</a></li>
					  <li class="divider-vertical"></li>
					  <li ><a href="#">新闻</a></li>
					  <li class="divider-vertical"></li>
					  <li ><a href="#">娱乐</a></li>
				  </ul>
				  <ul class="nav pull-right">
					  <li ><a href="#">登录</a></li>
					  <li class="divider-vertical"></li>
					  <li ><a href="#">注册</a></li>
				  </ul>				  
		      </div >
	    </div >
     </div>
 
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<div class="carousel slide" id="carousel-83301">
					<ol class="carousel-indicators">
						<li data-slide-to="0" data-target="#carousel-83301">
						</li>
						<li data-slide-to="1" data-target="#carousel-83301">
						</li>
						<li class="active" data-slide-to="2" data-target="#carousel-83301">
						</li>
					</ol>
					<div class="carousel-inner">
						<div class="item">
							<img alt="" src="1.jpg" />
							<div class="carousel-caption">
								<h4>
									张靓颖
								</h4>
								<p>
									2005年参加超级女声比赛获得季军。赛后签约华友世纪和华谊兄弟公司[1] 。2009年张靓颖自立门户，组建少城时代公司，并与环球唱片签署全球唱片约[2] 。2014年与索尼音乐娱乐公司建立战略合作关系.
								</p>
							</div>
						</div>
						<div class="item">
							<img alt="" src="2.jpg" />
							<div class="carousel-caption">
								<h4>
									范冰冰
								</h4>
								<p>
									《武媚娘传奇》是由唐德影视出品的电视剧，由高翊浚执导，由范冰冰、张丰毅、李治廷、张钧甯、张庭、周海媚、李李仁、李晨等人主演的古装历史剧。
								</p>
							</div>
						</div>
						<div class="item active">
							<img alt="" src="3.jpg" />
							<div class="carousel-caption">
								<h4>
									胡彦斌
								</h4>
								<p>
									2014年1月，创立个人独立工作室“太歌文化工作室”发行第九张个人专辑《太歌》[31] 。4月4号，助唱韩磊成为《我是歌手》歌王[32] ；11月参加腾讯视频原创音乐真人秀《Hi歌》。
								</p>
							</div>
						</div>
					</div> <a data-slide="prev" href="#carousel-83301" class="left carousel-control">?</a> <a data-slide="next" href="#carousel-83301" class="right carousel-control">?</a>
				</div>
			</div>
		</div>
	</div>

	<h1 class="page-header"><small>使用</small>Bootsatrap<small>让网页颜值爆表</small></h1 >
	<br/>
	<div class="row">
		<div class="span4">
			<h2 class="page-header">区块一</h2>
			<p>1999年参加“上海亚洲音乐节新人歌手大赛”出道[2] ；2002年发行首张个人专辑《文武双全》，成为首位在内地、香港、台湾推出个人专辑的国内歌手[3] ；2003年发行专辑《文武双全升级版》；2004年发行专辑《MUSIC 混合体》，一人包办了专辑中所有的作曲、编曲以及制作工作. </p>
		</div>
		<div class="span4">
			<h2 class="page-header">区块二</h2 >
			<p>《武媚娘传奇》是由唐德影视出品的电视剧，由高翊浚执导，由范冰冰、张丰毅、李治廷、张钧甯、张庭、周海媚、李李仁、李晨等人主演的古装历史剧。
该剧主要讲武则天从14岁入宫闱后再到身着皇袍头戴帝冕最终登位的人生历程，以及权力斗争的故事。</p>
		</div>
		<div class="span4">
			<h2 class="page-header">区块三</h2>
			 <p>2006年张靓颖出席博鳌亚洲论坛[4] ，与澳大利亚前总理同台献歌[4] 。2007年在美国洛杉矶举行演唱会[5] 。2008年随时任国家主席胡锦涛出访日本，在日本首相官邸演出[6] 。2009年3月在日本举行音乐鉴赏会[7] ，美国、日本、泰国的主流媒体对其进行专访报道 .</p>	
		</div>	
	</div>
	
</div>
</body>
</html>

技术分享