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>
Bootstrap和EasyUI的选用：EasyUI主要适合做后端，比如企业的内部管理系统侧重于后台管理。而Bootstrap适合做前端，它拥有强大的组件，绚丽多样的效果。
有了以前CSS,JS的基础Bootstrap的学习很容易。而且现在很多的互联网企业都在使用这个框架。
简单快速的让网页颜值爆表就选Bootstrap!
扫一扫
5925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
