BootStrap前端框架
一.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效果如下
比较全的第一个程序
<html>
<head>
<title>Bootstrap 101 Templatetitle>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
head>
<body>
<h1>Hello, world!!!h1>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">script>
<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:
条件注释 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.表格
演示代码如下:
<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>1td>
<td>macbook airtd>
<td>苹果最新超薄笔记本td>
<td>笔记本td>
<td><a href="#">修改a>td>
<td><a href="#">删除a>td>
tr>
<tr>
<td>2td>
<td>ipad protd>
<td>苹果最新平板电脑td>
<td>平板电脑td>
<td><a href="#">修改a>td>
<td><a href="#">删除a>td>
tr>
<tr>
<td>3td>
<td>iphone6s plustd>
<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">111div>
<div class="pull-right">222div>
内部的源代码如下:
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
!important; 设置该属性为最高优先级,即相当于把该属性定义在css文件最下面.
(2)显示/隐藏工具
使用.show类显示, .hidden类隐藏,这种隐藏是不占位的,相当于设置了display:none
<div class="show">333div>
<div class="hidden">444div>
(3)居中
使用.center-block 类将元素设为块级元素并居中
<div style="width:100px;background-color:yellowgreen;" class="center-block">555div>
注意必须设置元素的宽度居中才有效
5.对除了屏幕阅读器的设备隐藏
使用.sr-only类
<a class="sr-only" href="#content">Skip to main contenta>
五.组件集
1.导航条
Bootstrap的导航主要分为胶囊式导航、面包屑导航、头部导航3类,可以满足大多数的开发需求.
胶囊式导航
水平胶囊导航
胶囊导航实质是一个无序列表,只需要给ul元素添加.nav和.nav-pills类即可
<ul class="nav nav-pills">
<li class="active"><a href="#">Homea>li>
<li><a href="#">SVNa>li>
<li><a href="#">iOSa>li>
<li><a href="#">VB.Neta>li>
<li><a href="#">Javaa>li>
<li><a href="#">PHPa>li>
ul>
垂直胶囊导航
如果需要纵向的胶囊导航, 只需要在水平胶囊导航的基础上加一个.nav-stacked 类即可
<div style="width:140px;text-align:center;">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Homea>li>
<li><a href="#">SVNa>li>
<li><a href="#">iOSa>li>
<li><a href="#">VB.Neta>li>
<li><a href="#">Javaa>li>
<li><a href="#">PHPa>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">
<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 navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">网站Logoa>
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="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
<li role="separator" class="divider">li>
<li><a href="#">One more separated linka>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="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
ul>
li>
ul>
div>
div>
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">Leftbutton>
<button type="button" class="btn btn-default">Middlebutton>
<button type="button" class="btn btn-default">Rightbutton>
<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">Lefta>
<a class="btn btn-default">Middlea>
<a class="btn btn-default">Righta>
div>
注意:两端对齐的用法只适用于<a>元素,因为按钮元素不能应用这些样式并将其所包含的内容两端对齐.
(3)嵌套,可以在 按钮组 内继续 嵌套 按钮组
演示代码:
<div class="btn-group">
<button type="button" class="btn btn-default">Leftbutton>
<button type="button" class="btn btn-default">Middlebutton>
<button type="button" class="btn btn-default">Rightbutton>
<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">52span>
<a href="">中国队金牌a>
li>
<li class="list-group-item">
<span class="badge">48span>
<a href="">美国队金牌a>
li>
<li class="list-group-item">
<span class="badge">41span>
<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="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">»a>li>
ul>
可以通过添加 .pagination-lg类或.pagination-sm类来获得比标准尺寸更大或更小的分页,例如:
<ul class="pagination pagination-lg”>..
pagination"
>..ul>
<ul class="pagination pagination-sm”>..
如果仅仅想使用上一页/下一页的功能怎么办?Bootstrap也内置了该功能,为ul添加.pager类即可，演示代码:
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">Defaultspan>
<span class="label label-primary">Primaryspan>
<span class="label label-success">Successspan>
<span class="label label-info">Infospan>
<span class="label label-warning">Warningspan>
<span class="label label-danger">Dangerspan>
除了标签之外,还有一种提示信息很常用,很多网站都有消息系统来提示用户有未读的新闻、私信等内容,Bootstrap中称之为badge(徽章),如图所示
演示代码:
<button class="btn btn-primary">
未读信息
<span class="badge">4span>
button>
8.缩略图
有时候需要在网页中布局图像、文本等(例如商品展示),可以使用缩略图
演示代码如下:
<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.模态对话框
如果想让用户在当前页面完成某种稍显复杂的操作,譬如登录、注册,或者是阅读一段用户说明，模态对话框是一个不错的选择。用户在操作或阅读完毕后可以很方便地返回原页面，免去了页面跳转带来的等待.
点击”开始演示模态框” 按钮后,弹出模态对话框
演示代码如下:
<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">Xa>
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部分组成:控制器、内容部分、标识符.控制器负责控制幻灯的翻页，标识符告诉我们页码,内容部分负责展现内容。具体的代码如下:
演示代码:
<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">Previousspan>
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">Nextspan>
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”>..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”来调整轮播的时间。
