一.what
前端CSS框架,另一个前端框架Foundation
前端框架:使用HTML、CSS、JavaScript编写的组件工具集,拿来可以直接用，不用从造轮子.
二.why
最流行的前端框架、用的多
Twitter公司于2011年8月开源的整体式前端框架,由Twitter的设计师Mark Otto和Jacob
Thornton合作开发，短短几个月时间红遍全球,大量的Bootstrap风格的网站出现在互联网的浪潮中,而应用更为广泛的是它的后台管理页面.近两年的所有互联网项目的后台均采用了Bootstrap进行构建.
为什么如此流行
1.功能强大和样式美观
2.简单易用、文档丰富
3.高度可定制性
4.丰富的生态圈
5.布局兼容性好
三.how(第一个程序)
1.下载Bootstrap
http://getbootstrap.com
最新版本bootstrap-3.3.7
不同版本的区别: 最新版本已经发展到Bootstrap 3 但是不意味着 Bootstrap2已经淘汰了,Bootstrap3采用了扁平化的风格,Bootstrap2在按钮、工具栏等位置更多采用了立体的效果,它们之间没有谁好谁坏的区别,只是设计风格的不同. 应该根据自己项目的实际需求来决定使用哪一个版本
扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。
关于扁平化可以参考
http://baike.baidu.com/link?url=8RakX7FRvO0H7FbVWc2mBOMcSpy-humjYXGQEYZTjrbPfcCM1JNZCPjk0Hf60TlY6ma0FYvn5a992RPpfpJVA_
2.在项目中引入Bootstrap
引入3个文件
bootstrap.css
jquery.js
Bootstrap.js
Bootstrap要求的jquery在1.9.1版本或以上,jQuery3以下
演示代码如下：
<html>
<head>
<title>第一个Bootstrap程序</title>
<link href="../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<h1>Hello,Bootstrap!</h1>
<script src="jquery-2.1.4.js"></script>
<script src="cbootstrap.js"></script>
</body>
</html>
需要注意的是因为bootstrap框架依赖于jquery,所以要先导入jquery.js再导入bootstrap.js
.另外以前我们导入 js都是在head中导入,现在为什么要把它放到body中导入呢?
因为如果放到head中导入,服务器给客户端浏览器传输该页面的时候从上到下传输,这样会先传输js文件,如果用户的网速比较慢,这样在传输js文件的过程中,body中的内容还没有传输过来,这样用户看到的是一片白,影响用户的体验,所以我们通常把js文件放到后面加载,这样用户可以先看到body中的内容,再下载js来改变页面的行为,提高用户了用户的体验.(否则用户看见一片白直接关闭网页了)
普通纯HTML效果如下
比较全的第一个程序
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!!!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
代码解释1：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
页面宽度为设备宽度,初始缩放比例为1.0,调整比例对桌面浏览器并不起作用,只对移动端浏览器生效,比例值越大字越大
该语句是为了解决移动端浏览器显示问题
不加上面这句话,在web端访问没问题,在移动端浏览器中显示效果如下
加上这句话以后效果如下
具体详见:
http://davidbcalhoun.com/2010/viewport-metatag/
代码解释2:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
条件注释 IE9以下 引入这两个文件,IE9以上(包括IE9)把它当做注释内容,不引入.
引入这两个文件为了让IE8支持HTML5元素和媒体查询.
四.基本样式
1.普通按钮
(1)按钮基本样式
演示代码:
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">危险</button>
(2)调节按钮的大小
<p>
<button type="button" class="btn btn-primary btn-lg">主要</button>
<button type="button" class="btn btn-default btn-lg">默认</button>
</p>
<p>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-default">默认</button>
</p>
<br/>
<p>
<button type="button" class="btn btn-primary btn-sm">主要</button>
<button type="button" class="btn btn-default btn-sm">默认</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">主要</button>
<button type="button" class="btn btn-default btn-xs">默认</button>
</p>
(3)块级按钮
<button> 和<a> 默认都是行内元素(内联元素),而对于移动端来说一个占据一行的大按钮再正常不过了
演示代码:
<button type="button" class="btn btn-primary btn-block">主要</button>
<button type="button" class="btn btn-default btn-block">默认</button>
(4)不可点击的按钮
讲按钮的背景色做50%的褪色处理以呈现出无法点击的效果
<button type="button" class="btn btn-primary" disabled="disabled">主要</button>
<button type="button" class="btn btn-default" disabled="disabled">默认</button>
2.关闭按钮
对按钮元素应用.close类就可以显示一个关闭按钮,如图所示
<button type="button" class="close" aria-hidden="true">×</button>
aria-hidden="true" 对屏幕阅读器来说这个按钮时隐藏的
屏幕阅读器,便于残障人士更方便阅读网页内容的工具
关于屏幕阅读器,可参见
http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/
3.下拉按钮
对span元素应用caret类就可以显示一个下拉符号
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
4.图片
<img src="img/beer.jpg" />
<img src="img/beer.jpg" class="img-rounded" />
<img src="img/beer.jpg" class="img-circle" />
<img src="img/beer.jpg" class="img-thumbnail" />
5.表格
演示代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>bootstrap表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
<style type="text/css">
tr.tableHead {
background-color:#000000;
color:#ffffff;
}
tr.tableHead>th {
text-align: center;
}
</style>
</head>
<body>
<div class="text-center">
<h1>商品信息</h1>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr class="tableHead">
<th>商品编号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>商品种类</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>macbook air</td>
<td>苹果最新超薄笔记本</td>
<td>笔记本</td>
<td><a href="#">修改</a></td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>ipad pro</td>
<td>苹果最新平板电脑</td>
<td>平板电脑</td>
<td><a href="#">修改</a></td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>iphone6s plus</td>
<td>苹果最新大屏手机</td>
<td>手机</td>
<td><a href="#">修改</a></td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
6.工具类
(1)浮动工具
左浮动、右浮动: 为元素添加.pull-left、.pull-right类就可以设置左浮动和有浮动
演示代码如下:
<div class="pull-left">111</div>
<div class="pull-right">222</div>
内部的源代码如下:
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
!important; 设置该属性为最高优先级,即相当于把该属性定义在css文件最下面.
(2)显示/隐藏工具
使用.show类显示, .hidden类隐藏,这种隐藏是不占位的,相当于设置了display:none
<div class="show">333</div>
<div class="hidden">444</div>
(3)居中
使用.center-block 类将元素设为块级元素并居中
<div style="width:100px;background-color:yellowgreen;" class="center-block">555</div>
注意必须设置元素的宽度居中才有效
5.对除了屏幕阅读器的设备隐藏
使用.sr-only类
<a class="sr-only" href="#content">Skip to main content</a>
五.组件集
1.导航条
Bootstrap的导航主要分为胶囊式导航、面包屑导航、头部导航3类,可以满足大多数的开发需求.
胶囊式导航
水平胶囊导航
胶囊导航实质是一个无序列表,只需要给ul元素添加.nav和.nav-pills类即可
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
垂直胶囊导航
如果需要纵向的胶囊导航, 只需要在水平胶囊导航的基础上加一个.nav-stacked 类即可
<div style="width:140px;text-align:center;">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
面包屑导航
面包屑导航一般用于有层次关系的选项，如果想实现面包屑导航,需要给ul加一个.breadcrumb类即可.
<ul class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">资料库</a></li>
<li><a href="#">数据</a></li>
</ul>
头部导航
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <!--这里设置网站的标题 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网站Logo</a>
</div>
<!—这里设置网站的链接 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li>
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
具体分析头部导航主要分为两层结构,第一层是最外面的 <nav class="navbar navbar-default">…</nav>，这一层用于设置导航的基本样式
将.navbar-default类替换为 .navbar-inverse类,则显示为反色的导航(黑底白字)
第二层有两个并列的元素: <div class="navbar-header">…</div>内部用于设置标题内容.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">….</div>内部则用于编写具体的导航链接、搜索表单、下拉菜单等具体的导航内容。
Bootstrap提供了在小窗口下导航 收起/展开的功能
同学们可以把上面的窗口拖小的试一下
添加.navbar-fixed-top可以让导航条固定在顶部,不会随页面滚动而消失。为了防止固定在顶部后遮挡正常内容,需要设置:body{padding-top:50px;} 其中具体的值取决于导航条的高度
加了body的补白不会遮挡正常内容,不加会遮挡
2.下拉菜单
演示代码：
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
<li class="divider"></li>
<li><a href="#">选项四</a></li>
</ul>
</div>
按钮和下拉选择都要包裹在<div class="dropdown">….</div>内
按钮必须添加 data-toggle="dropdown" 触发器
放置下拉选项的无须列表需要添加 .dropdown-menu 类
添加一个空的<li class="divider"></li>来分割列表项
3.按钮组
上面一组是放到按钮组中的效果,下面一组是没有放到按钮组的效果
按钮组用于把一组按钮放在同一行里，按钮之间没有间隙.用法很简单,只需要将一组按钮
放在<div class="btn-group">..</div>中即可.
演示代码:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<input type="button" class="btn btn-default" value="点我" />
</div>
(1)垂直排列
<div class="btn-group-vertical">
</div>
(2)两端对齐(按钮组拉伸到100%宽度)
演示代码:
<div class="btn-group btn-group-justified">
<a class="btn btn-default">Left</a>
<a class="btn btn-default">Middle</a>
<a class="btn btn-default">Right</a>
</div>
注意:两端对齐的用法只适用于<a>元素,因为按钮元素不能应用这些样式并将其所包含的内容两端对齐.
(3)嵌套,可以在 按钮组 内继续 嵌套 按钮组
演示代码:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
<li class="divider"></li>
<li><a href="#">选项四</a></li>
</ul>
</div>
</div>
4.input控件组
多个input控件放到一组中配合使用,下面演示了几种常见的组合，最常见的input控件组
非搜索框莫属.
(1)搜索框
实质就是 文本框+按钮
演示代码:
<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<input type="button" name="search" value="search" class="btn btn-default"/>
</span>
</div>
如果需要带下拉菜单的按钮,只需要将按钮换成下拉菜单即可。
(2)搜索框+文字
搜索框后不是按钮,不可点击
演示代码:
<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control" />
<span class="input-group-addon">
输入完成后回车
</span>
</div>
5.列表组
上图是未经美化的列表,下图是经过美化的列表
演示代码如下:
<div style="width:100px;">
<ul class="list-group">
<li class="list-group-item"><a href="">选项一</a></li>
<li class="list-group-item"><a href="">选项二</a></li>
<li class="list-group-item"><a href="">选项三</a></li>
<li class="list-group-item"><a href="">选项四</a></li>
</ul>
</div>
注意:列表组中使用有序列表时不会显示序号.
列表组不仅可以应用于列表,还可以将其他需要列表的元素展现为列表的样子.例如,
左图为不加样式的,右图为加上列表组样式的.
演示代码:
<div class="class="list-group" style="width:200px;">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">英格兰战胜威尔士</h4>
<p>最新欧洲杯战况英格兰2:1战胜威尔士....</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">乌克兰对北爱尔兰</h4>
<p>乌克兰对北爱尔兰....</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">德国对波兰</h4>
<p>德国队波兰....</p>
</a>
</div>
为列表组添加徽章也十分容易,Bootstrap会自动将徽章放置在右边
演示代码:
<div style="width:150px;">
<ul class="list-group">
<li class="list-group-item">
<!-- 即使将徽章放在前面,最终还是会居右放置-->
<span class="badge">52</span>
<a href="">中国队金牌</a>
</li>
<li class="list-group-item">
<span class="badge">48</span>
<a href="">美国队金牌</a>
</li>
<li class="list-group-item">
<span class="badge">41</span>
<a href="">俄罗斯队金牌</a>
</li>
</ul>
</div>
6.分页
几乎所有的列表页面都需要分页, Bootstrap提供了一个较为美观的分页样式,如下图所示：
实现上述效果比较简单,只需给无序列表的ul元素添加pagination类即可
演示代码：
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
可以通过添加 .pagination-lg类或.pagination-sm类来获得比标准尺寸更大或更小的分页,例如:
<ul class="pagination pagination-lg”>..</ul>
<ul class="pagination">..</ul>
<ul class="pagination pagination-sm”>..</ul>
如果仅仅想使用上一页/下一页的功能怎么办?Bootstrap也内置了该功能,为ul添加.pager类即可，演示代码:
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
注意:翻页元素默认居中对齐,如果为列表元素添加.previous和.next类,可以将上一页/下一页按钮设置为两端对齐.演示代码:
<div>
<ul class="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
</div>
7.标签和Badge
标签一般用于对内容进行标记,例如可以用在京东的订单管理后台,标示订单的状态(”未发货”、”已发货”、”已完成”等)
Bootstrap内置了6种常用的标签类,分别为default(默认)、primary(主要)、success(成功)、info(消息)、warning(警告)、danger(危险操作)
演示代码:
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
除了标签之外,还有一种提示信息很常用,很多网站都有消息系统来提示用户有未读的新闻、私信等内容,Bootstrap中称之为badge(徽章),如图所示
演示代码:
<button class="btn btn-primary">
未读信息
<span class="badge">4</span>
</button>
8.缩略图
有时候需要在网页中布局图像、文本等(例如商品展示),可以使用缩略图
演示代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 缩略图</title>
<link href="../../css/bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的占位符缩略图">
</a>
</div>
</div>
<script src="../../js/jquery/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
9.面板
很多时候需要将某些内容放到一个容器里,此时可以使用Bootstrap的面板组件.
可以看到,面板的作用就是加上了容器的边框并设置了内容和容器间的边距,对应最简单面板样式的代码如下：
<div class="panel panel-default">
<div class="panel-body">基础面板示例</div>
</div>
我们还可以为面板添加header和footer，如下图所示
演示代码如下:
<div class="panel panel-default" style="width:500px;">
<div class="panel-heading">面板页头</div>
<div class="panel-body">面板内容省略...</div>
<div class="panel-footer">面板页脚</div>
</div>
面板代码的配色和之前介绍的标签是一致的,都是对应诸如success、warning、danger等颜色,例如
<div class="panel panel-default">…</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>
10.进度条
进度条常用于文件的上传和下载、内容的加载等场景,Bootstrap提供了多种进度条样式供选择.
注意:Bootstrap以及其他前端组件只解决进度条的样式问题,追踪进度扔需依赖服务端程序.
Bootstrap中,一个标准的进度条如下图所示:
最简单的实现代码如下:
<div class="progress" style="width:500px;">
<div class="progress-bar" style="width:60%;"></div>
</div>
为外层的div元素添加.progress类,为内层的div元素添加.progress-bar类,并控制内层div的宽度百分比,这样就得到一个基础的进度条了.
进度条的颜色既可以自己根据需要用自定义的颜色进行覆盖,也可以调用Bootstrap内置的类来覆盖.
为内层的div元素添加. progress-bar-success就可以获得如下图的颜色,其命名规律和Bootstrap的标签类是一致的.
<div class="progress" style="width:500px;">
<div class="progress-bar progress-bar-success" style="width:60%;"></div>
</div>
我们还可以为进度条添加条纹效果,如下图所示.
实现条纹效果需要为外层的div添加.progress-striped类,演示代码:
<div class="progress progress-bar-striped" style="width:500px;">
<div class="progress-bar progress-bar-info" style="width:60%;"></div>
</div>
六.Bootstrap中的JavaScript特效
Bootstrap的流行很大程度上得益于它大大降低了页面开发的学习成本,很多时候,JavaScript效果是一些非专业人士或美工出身的站长最头疼的问题,从零开始学习一门真正的编程语言,到能够在实战中实现足够好的效果,这个时间和学习成本是相当高的.而Bootstrap实现了从UI到JavaScript代码的一体化,只要在HTML代码中加入框架约定的触发器,就可以实现大多数的效果.即使用导官方没有提供的效果,开源社区的开发者也往往能提供现成的解决方案.
下面就来看看Bootstrap提供的几种常用效果吧.
1.模态对话框
如果想让用户在当前页面完成某种稍显复杂的操作,譬如登录、注册,或者是阅读一段用户说明，模态对话框是一个不错的选择。用户在操作或阅读完毕后可以很方便地返回原页面，免去了页面跳转带来的等待.
点击”开始演示模态框” 按钮后,弹出模态对话框
演示代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示分页组件</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<h2>创建模模态对话框（Modal）</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<div class="modalfade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
模态对话框示例
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
</div>
</div>
<script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
根据代码分析,完整的模态对话框功能主要分为两个部分:出发按钮和对话框.出发按钮可以是一个button，也可以是一个链接，只需要加入两个元素:
data-toggle=” modal”触发器
data-target="#myModal",用于和相应的对话框id进行对应.
对话框部分主要分3层.
第一层:<div class=”modal” id=”myModal”>…</div>,这一层使用class=”modal”设置样式并设置模态对话框的触发类,提供id和触发按钮的data-target属性的值进行对应，还可以添加其他的配置属性.
第二层:<div class=”modal-dialog”>…</div>,设置一个居中的对话框.
第三层:<div class=”modal-content”>…</div>,设置具体的内容.
注意:不要在一个模态框上重叠另一个模态框.
开发中,选项参数可以通过data属性或JavaScript进行传递。对于data属性,需要将选项名称放到data-之后,例如data-backdrop=””，具体的参数可以参考官方文档.
2.标签页切换
如果有多个分类的内容,又不想全部直接展现在页面上,使用标签页进行切换是一个不错的选择.如下图所示
演示代码:
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#intro" data-toggle="tab">商品介绍</a></li>
<li><a href="#parameter" data-toggle="tab">规格参数</a></li>
<li><a href="#qingdan" data-toggle="tab">包装清单</a></li>
<li><a href="#pingjia" data-toggle="tab">商品评价</a></li>
<li><a href="#shouhou" data-toggle="tab">售后保障</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="intro">我是商品介绍</div>
<div class="tab-pane" id="parameter">我是规格参数</div>
<div class="tab-pane" id="qingdan">我是包装清单</div>
<div class="tab-pane" id="pingjia">我是商品评价</div>
<div class="tab-pane" id="shouhou">我是售后保障</div>
</div>
标签页切换由两部分组成:标签页部分和与标签页对应的内容部分.
标签页部分本质是一个列表,为列表的ul/ol属性添加.nav和.nav-tabs类,使其展现为标签页的样式,列表项中的<a>链接需要加上data-toggle=”tab”这个触发器, 并且href的值要和对应内容部分的id进行对应.
内容部分需要包裹在<div class=”tab-content”>…</div>内部,保证除了应该显示的内容外,其他是隐藏的.内容的各个单项需要包裹在<div class=”tab-pane”>…</div>内部,并且要为<div
class=”tab-pane”>标签设置一个id,用于与标签页的href属性的值对应.
3.Tooltip
Tooltip插件的效果是鼠标悬停在目标元素上时,显示额外的提示,如下图所示
演示代码:
<a href="#" id="myTooltip" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>
其中data-toggle=”tooltip”是插件触发器,title的内容是提示文字,data-placement属性用于指定提示出现的位置。
要使该插件生效,需要在页面底部添加JavaScript代码完成初始化:
<script type="text/javascript">
$("#myTooltip").tooltip();
</script>
开发者可以为tooltip()函数添加参数,或者在标签内添加”data-参数名”进行配置,比如上面例子中的data-placement=”right”.
4.弹出框
Tooltip采用的是hover进行触发,多用于简单的提示,弹出框则通过点击触发,一般用于显示更多的内容,如下图所示.
应用弹出框插件的代码结构和Tooltip差不多,演示代码如下:
<a href="javascript:void(0);" id="myPopover" class="btn btn-lg btn-danger" data-toggle="popover" data-content="采用了点击事件触发,相比Tooltip可以显示更多、更正式的内容,并且可以配置更多样式." data-original-title="弹出框的应用">点击了解更多</a>
需要添加data-toggle=”popover”触发器进行插法,主要有两个配置项: data-content配置弹出框内容,data-original-title配置弹出框的标题.
弹出框对Tooltip存在依赖,因此插件中必须包含有Tooltip.和Tooltip一样,也需要添加初始化JavaScript代码:
<script type="text/javascript">
$("#myPopover").popover();
</script>
和Tooltip一样,可以为popover()函数添加参数,或者在标签内添加”data-参数名”进行配置，比如上面Tooltip例子中的data-placement=”right”
5.提示信息
一般来说,任务执行成功或失败后,用户需要得到一个提示信息,这个信息可以出现在页面跳转后的新页面,也可以是Ajax执行成功后的回调。但它们都有一个共同的特点,需要在阅读完毕后消失.Bootstrap内置了警告框插件,使用户可以单击关闭按钮关掉提示信息。
演示代码如下:
<div id="my-alert" class="alert alert-danger fade in" style="width:400px;">
警告,服务器挂了!
<a href="#" class="close" data-dismiss="alert">X</a>
</div>
构造提示信息需要两个部分:提示信息和关闭信息按钮。提示信息这里使用了Bootstrap内置的alert类,关闭按钮则是在和提示信息文字并列的位置构造一个链接,为该链接添加data-dismiss=”alert”这个触发器来触发关闭事件.
Bootstrap为警告框的关闭动作暴露了事件,允许进行监听,可以再编写关闭警告框后执行的动作.
Close.bs.alert: 当close函数被调用之后,此事件被立即触发.
Closed.bs.alert: 当警告框被关闭之后(CSS过渡效果执行完毕),此事件被触发,演示代码如下:
<script type="text/javascript">
$("#my-alert").bind('closed.bs.alert',function(){
alert('关闭了!');
})
</script>
8.幻灯片
Bootstrap集成了一个幻灯片组件,可以完成图片或内容的切换和自动播放。
幻灯片结构由3部分组成:控制器、内容部分、标识符.控制器负责控制幻灯的翻页，标识符告诉我们页码,内容部分负责展现内容。具体的代码如下:
演示代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示幻灯片组件</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:730px;">
<!--标识符:告诉我们页码-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 幻灯片内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../img/1.jpg">
</div>
<div class="item">
<img src="../../img/2.jpg">
</div>
<div class="item">
<img src="../../img/3.jpg">
</div>
</div>
<!-- 控制器: 负责上一页/下一页 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
首先,所有内容都需要包裹在<div class=”carousel slide”>..</div>内部,如果需要开启轮播,则需要加入data-ride=”carousel”触发器.
标识符部分是一个列表,需要为ol/ul添加class="carousel-indicators"类.
内容部分需要整体包裹在<div class="carousel-inner”>..</div>内部，每一页的内容需要包裹在<div class="item">…</div>内部.
控制器部分实际就是一个<a>链接,需要为这个链接加上carousel-control类,并添加一个.left或.right类指明向前翻页还是向后翻页.翻页的图标可以使用Bootstrap内置的图标:
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
也可以自定义图标样式.
注意:Bootstrap的幻灯片插件是基于CSS3实现的动画效果,但是IE9及IE9以下的浏览器不支持这些必要的CSS属性，因此在IE下回丢失过渡动画效果.
和其他插件的参数配置一样,可以通过data属性或JavaScript传递选项参数,对于data属性，将选项名称放到data-之后,例如data-interval=”3000”来调整轮播的时间。
8134
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
