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!