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

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!

时间: 2024-10-11 05:59:57

Bootstarp---轻轻松松让你的网页颜值爆表的相关文章

【随笔】爆表危机

婚后生活真的很辛苦,家离工作地点距离太远,搞得每天休息不足,周末还要打扫家里的卫生,导致前一段体重下降.本来挺好的事儿,可是就在这两周,去了几次岳母家还回了几次姥姥家,吃了几顿好吃的,居然体重又回来了……几天早晨,无意间走上电子称,想看看自己现在有多重了,结果一站上去,表针飞转,迅速定格在105Kg的位置,当时这个汗啊,前不久还是95Kg呢,本以为会慢慢瘦下去,没想到出现了惊人反弹,2周就涨了20斤,天啊,我到底是怎样的体质啊!!再照这个发展趋势,我再量体重,非得爆表不可!不成了,不敢乱吃好吃的

【SQL】小心字符串拼接导致长度爆表

原文:[SQL]小心字符串拼接导致长度爆表 请看代码: DECLARE @max VARCHAR(max) SET @max='aaa...' --这里有8000个a +'bb' --连接一个varchar常量或变量 SELECT LEN(@max) 别想当然以为它会返回8002,而是8000,select @max也只会得到8000个a,后面两个b没了.我们知道,varchar(max)类型不受字符数限制,但为什么会这样? 这其实与@max的数据类型无关,而是与字符串拼接后得到的数据类型有关,

今日最值得关注的除了下跌,还有沪指成交额的“爆表”,

今日最值得关注的除了下跌,还有沪指成交额的“爆表”,下午14:30,沪市成交突破万亿元大关后成交数据停留在一万亿不再继续更新.如此罕见的一幕,说明市场狂热的人气.不过天量交易下,是资金疯狂洗盘还是不计成本出逃? http://baozoumanhua.com/users/10790452http://baozoumanhua.com/users/10790454http://baozoumanhua.com/users/10790561http://baozoumanhua.com/users/

大神营销值爆表,X7将成战斗机?

昨日,大神@祝芳浩博微博发布了题为<智能手机市场"七大恨">战斗檄文,并放言大神将做出一款真正超越iPhone的旗舰手机,为国产智能手机正名! @祝芳浩在微博长文中列举的国内外智能手机的各种乱象.文中不仅吐槽了苹果.三星的对手机市场利润的攫取,也吐槽了苹果产品设计和质量上存在的诟病,指出了三星空有技术与体系优势却创新乏力的现实,还指出了小米追求销量成心魔,榜样正在沦陷的现状,华为空有体量,却只知道复制小米,缠斗魅族的无奈...... <智能手机市场"七大恨&

Mysql 通过information_schema爆库,爆表,爆字段

MySQL版本大于5.0时,有个默认数据库information_schema,里面存放着所有数据库的信息(比如表名. 列名.对应权限等),通过这个数据库,我们就可以跨库查询,爆表爆列. 若要从这些视图中检索信息,请指定完全合格的 INFORMATION_SCHEMA view_name 名称. 列名 数据类型 描述 TABLE_CATALOG nvarchar(128) 表限定符. TABLE_SCHEMA nvarchar(128) 表所有者. TABLE_NAME nvarchar(128

做JAVA开发的同学一定遇到过的爆表问题,看这里解决

背景:Java线上服务运行一周后,某个周六晚上CPU使用率突然持续99%,Java进程处于假死状态,不响应请求.秉着先恢复服务再排查问题的原则,在我连接×××采用重启大法后,CPU使用率恢复正常,服务也正常响应了,如下图一所示:(图一)CPU使用率图 但是,当晚的并发量也没有比平时高出许多,为什么会突然出现这种CPU爆表的情况?带着这个疑问,我走上了问题排查的道路. 首先,我查了相关的错误日志,发现故障的时间段内有大量的ckv请求超时,但请求超时并不是ckv server的问题,而是ckv cl

HTML:图片热点 网页划区 表单

图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" usemap="jingling" /> <map name="jingling"> <area shape="rect" coords="52,217,288,395" href="http://

客户端网页编程-html表单

在html中使用标签可以将内容显示在网页中,如果要完成用户与网页之间的交互则需要用到HTML表单(form),表单可以在网页中提供一个图形化的用户界面,把使用者输入的数据传送到服务器端.下面描述一下form表单中具体的控件可用法. <form></form>也是标签,成对出现的,在form表单中,使用属性action标记使用者输入数据传送的地址,使用method标记数据传送的方式,有get/post两种,例如 <form action="www.taobao.com

ORACLE的安装与网页版创建表空间的简单操作以及PLsql的简单操作

1.oracle的安装: 安装简单易学,在这里不做解释.下载看装包后耐心等待,注意安装目录不要有中文字符,尽量按照指定目录进行安装.安装完成后会占用有大约5g的内存. 如果要卸载oracle,需要用其自带的卸载工具进行卸载[universal installer],然后删除注册表项,删除环境变量,删除目录并且重新启动计算机. 2.在网页版进行创建表空间: 进入网页版: 在电脑的服务中我们可以看到一共有7个oracle的服务项目,其中只有三个是正在启动中.这三项中,只有当OracleDBConso