Bootstrap
一、bootstrap介绍 ============= twitter 公司开发的 html+css+javascript 这个框架的目的就是要建立一个页面多个终端，有着完美的用户体验。核心：响应时布局 特点： 1、跨设备、跨浏览器 2、响应式布局 3、提供全面的组件 4、内置jquery插件 5、支持html5，css3 6、支持less动态样式 二、排版样式 ====== **1、页面主体** Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)； class=’lead’可以将这个属性复写为一个标题 **2、标题** h1-h6 我们从 Firebug 查看元素了解到， Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构，并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。 在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1><p>Bootstrap<mark>框架</mark></p> <p class="text-left">Bootstrap 框架</p>
<p class="text-center">Bootstrap 框架</p>
<p class="text-right">Bootstrap 框架</p>
<p class="text-nowrap">Bootstrap 框架</p><ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul><ul class="list-inline">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul> <code><section></code><pre><p>Please input...</p></pre><table class="table"><table class="table table-striped"><table class="table table-bordered"><table class="table table-hover" ><tr class="success"><tr class="sr-only"><a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input"> <button class="btn btn-block">Button</button> <button class="btn active">Button</button><button class="btn active disabled">Button</button> <div class="input-group">
<div class="input-group-addon">￥</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div> <form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div>
</form> <div class="checkbox">
<label>
<input type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">音乐
</label>
</div> <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
8.添加额外的图标
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div> <img src="images/hot1.jpg" alt="图片" class="img-rounded">
<img src="images/hot1.jpg" alt="图片" class="img-circle">
<img src="images/hot1.jpg" alt="图片" class="img-thumbnail">
<!-- 响应式-->
<img src="images/hot1.jpg" alt="图片" class="img-responsive">
…
流体宽度
… /div 栅格系统中， 浏览器会随着屏幕的大小的增减自动分配最多12列。 通过一系列的行(row)与列(column)的组合来创建页面布局。  设置偏移
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div>可以嵌套
<div class="container">
<div class="row" >
<div class="col-md-9 a" style="padding: 0">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div>可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>实现了左边是3右边是9
第 6 章 辅组类和响应式工具
辅助类
1、情景文本颜色
2、情景背景色
3、关闭按钮
<button type="button" class="close">×</button>4、三角符号
<span class="caret"></span>5.快速浮动
<div class="pull-left a" style="width: 200px">左边</div>
<div class="pull-right a" style="width: 200px">右边</div>6、区块居中
<div class="center-block a" style="width: 200px">居中</div>7.清理浮动
<div class="clearfix"></div>8.显示和隐藏
<div class="show">show</div>
<div class="hidden">hidden</div>响应式工具
超小屏幕激活显示
Bootstrap
超小屏幕激活隐藏
Bootstrap
注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。
第 7 章 图标菜单按钮组件
1、图标的使用
<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span>2．下拉菜单组件
1、首先外边有一个外围的保住的容器
2、为ul添加 dropdown-menu
3、为button添加data-toggle=”dropdown”
<div class="dropdown" >
<button class="btn btn-default" data-toggle="dropdown">下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>茶品</li>
<li>茶品</li>
<li>茶品</li>
<li>茶品</li>
</ul>
</div>3、将按钮分组
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>将多个按钮和一个下拉菜单按钮分成一个组 嵌套的是一个分组
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>
<div class=" btn-group" >
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu ">
<li class="dropdown-header">茶品</li>
<li class="divider"></li>
<li>茶品</li>
<li>茶品</li>
<li>茶品</li>
</ul>
</div>
</div>分列式下拉菜单
<div class=" btn-group" >
<button type="button" class="btn btn-default">下拉菜单</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu ">
<li class="dropdown-header">茶品</li>
<li class="divider"></li>
<li>茶品</li>
<li>茶品</li>
<li>茶品</li>
</ul>
</div>第 8 章 输入框和导航组件
1、输入框组件
为输入框添加一个小提示左边
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>两边
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">yuan</span>
</div>按钮和输入框合并
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default" type="button">提交</button>
</div>
</div>2、导航组件
1、标签式导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="">资讯</a></li>
<li><a href="">产品</a></li>
<li><a href="">关于</a></li>
</ul>2、胶囊式导航
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="">资讯</a></li>
<li><a href="">产品</a></li>
<li><a href="">关于</a></li>
</ul>垂直的胶囊式
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="">资讯</a></li>
<li><a href="">产品</a></li>
<li><a href="">关于</a></li>
</ul>两端对齐式
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="">资讯</a></li>
<li><a href="">产品</a></li>
<li><a href="">关于</a></li>
</ul>3、导航条组件
<nav class="navbar navbar-default ">
<div class="container">
<a href="#" class="navbar-brand">标题</a>
<ul class="nav navbar-nav">
<li><a href="">首页</a></li>
<li><a href="">资讯</a></li>
<li><a href="">产品</a></li>
<li><a href="">关于</a></li>
</ul>
</div>
</nav>在导航条中使用各种
<!--将导航固定在顶部，下面的内容会自动上移 但是360的兼容模式不能正常的显示-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a href="#" class="navbar-brand">标题</a>
<ul class="nav navbar-nav">
<li><a href="">首页</a></li>
<li><a href="">资讯</a></li>
<li><a href="">产品</a></li>
<li><a href="">关于</a></li>
</ul>
<!--导航条中使用表单-->
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default">提交</button>
</div>
</div>
<!--导航中使用按钮-->
<button class="btn btn-default navbar-btn">按钮</button>
<!--导航中使用对齐方式，left 和 right-->
<button class="btn btn-default navbar-right">向右</button>
<!--导航中使用一段文本和超链接-->
<p class="navbar-text">这是一段文本<a class="navbar-link">超链接</a></p>
</form>
</div>
</nav>九、路径分页标签和徽章组件
1、路径组件(面包屑导航)
<ol class="breadcrumb">
<li><a href="">首页</a></li>
<li><a href="">产品列表</a></li>
<li class="active">羊绒大衣</li>
</ol>2、分页组件
<ul class="pagination">
<!--设置为首选项-->
<li ><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 class="disabled"><a href="#">6</a></li>
<li><a href="#">></a></li>
</ul>翻页组件
<ul class="pager">
<li><a href="">上一页</a></li>
<li><a href="">下一页</a></li>
</ul>将翻页的两个按钮分到页面的两边
<ul class="pager">
<li class="previous"><a href="">上一页</a></li>
<li class="next"><a href="">下一页</a></li>
</ul>徽章
<nav class="nav nav-pills">
<li class="active"><a href="">信息<span class="badge">12</span></a></li>
<li><a href="">电话</a></li>
<li><a href="">还撒谎</a></li>
</nav>第 10 章 巨幕 页头 缩略图和 警告框组件
1、巨幕
<div class="jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>这是一个学习性的网站！</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>2、页头组件
<div class="page-header">
<h1>大标题<small>小标题</small></h1>
</div>3、缩略图组件
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<img src="images/s8.jpg" class="thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<img src="images/s8.jpg" class="thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<img src="images/s8.jpg" class="thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<img src="images/s8.jpg" class="thumbnail">
</div>
</div>4、警告框组件
带关闭按钮的警告框组件
<div class="alert alert-success">
Bootstrap
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>第 11 章 进度条媒体对象和 Well 组件
well组件
这个组件可以实现简单的嵌入效果。
<div class="well"></div>进度条组件
<div class="progress">
<div class="progress-bar" style="width: 60%">80</div>
</div><div class="progress">
<!-- 让进度条有一个最低值-->
<div class="progress-bar" style="min-width:20%;width: 0%">80</div>
</div>
<div class="progress">
<!-- 情景进度条-->
<div class="progress-bar progress-bar-success" style="width: 50%">80</div>
</div>
<div class="progress">
<!-- 动画斑马线进度条-->
<div class="progress-bar progress-bar-striped progress-bar-success active" style="width: 50%">80</div>
</div>
<div class="progress">
<!-- 斑马线进度条-->
<div class="progress-bar progress-bar-striped progress-bar-success" style="width: 50%">80</div>
</div>实现进度条的堆叠
<div class="progress">
<div class="progress-bar progress-bar-success"
style="min-width:20px;width:35%">35%</div>
<div class="progress-bar progress-bar-warning"
style="min-width:20px;width:20%">20%</div>
<div class="progress-bar progress-bar-danger"
style="min-width:20px;width:10%">10%</div>
</div>媒体对象组件
media
<div class="media">
<div class="media-left ">
<img src="images/hot1.jpg" alt="hot1">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17
种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；
脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；
羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
<div class="media">
<div class="media-left ">
<img src="images/hot1.jpg" alt="hot1">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17
种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；
脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；
羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
</div>
</div>
</div>实现的是回帖的效果
<div class="media">
<div class="media-left ">
<img src="images/hot1.jpg" alt="hot1">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17
种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；
脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；
羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
<div class="media">
<div class="media-left ">
<img src="images/hot1.jpg" alt="hot1">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17
种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；
脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；
羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
</div>
</div>
</div>第 12 章 列表组面板和嵌入组件
列表组组件
一般用来做侧栏
基本列表组组件
<ul class="list-group">
<li class="list-group-item">首页</li>
<li class="list-group-item">首页</li>
<li class="list-group-item">首页</li>
<li class="list-group-item">首页</li>
</ul>徽章 的列表组组件
<ul class="list-group">
<li class="list-group-item">首页<span class="badge">10</span></li>
<li class="list-group-item">首页</li>
<li class="list-group-item">首页</li>
<li class="list-group-item">首页</li>
</ul>为li加active变成首先项
面板组件
一般用来做登录注册之类的小窗口的面板
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">标题</div>
<div class="panel-body">面板文字</div>
<div class="panel-footer">尾部</div>
</div>
</div>面板里边可以存放表格和表单，并且实现它们之间的无缝连接
响应式嵌入组件
<div class="embed-responsive embed-responsive-16by9">
<embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>第 13 章 模态框插件
1、基本使用
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">标题</h4>
</div>
<div class="modal-body">
<p>弹出嗯荣</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">注册</button>
<button class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹窗</button>点击按钮弹出 对话框 在这个对话矿上也可以使用删各系统
第 14 章 下拉菜单和滚动监听插件
声明式的方式创建新的下拉菜单
<div class="dropdown">
<!-- data-toggle="dropdown"实现和插件的一个绑定-->
<button class="btn btn-primary" id="btn" 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>
</ul>
</div>实现的是一个在div滚动的时候，上边的标签也会指到相应的位置
<div class="container" >
<nav id="nav" class="navbar navbar-default">
<a class="navbar-brand">标题</a>
<ul class="nav navbar-nav">
<li><a href="#html5">html5</a></li>
<li><a href="#bootstrap">bootstrap</a></li>
<li class="dropdown">
<a href="" data-toggle="dropdown">js
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#jquery">jquery</a></li>
<li><a href="#yui">backano</a></li>
<li><a href="#extjs">ext</a></li>
</ul>
</li>
</ul>
</nav>
<div id="content" data-offset="0" data-spy="scroll" data-target="#nav" style="padding: 0 10px;height: 200px;overflow: auto;position: relative;">
<section class="sec">
<h4 id="html5">HTML5 <a href="#" onclick="removeSec(this)">删除</a></h4>
<p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。</p>
</section>
<section class="sec">
<h4 id="bootstrap">Bootstrap</h4>
<p>Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto 和Jacob Thornton 合作开发，是一个CSS/HTML 框架。Bootstrap提供了优雅的HTML 和CSS 规范，它即是由动态CSS 语言Less 写成。Bootstrap 一经推出后颇受欢迎，一直是GitHub 上的热门开源项目，包括NASA 的MSNBC（微软全国广播公司）的Breaking News 都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap 源码进行性能优化而来。[3] </p>
</section>
<section class="sec">
<h4 id="jquery">jQuery</h4>
<p>JQuery 是继prototype 之后又一个优秀的Javascript 库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0 及后续版本将不再支持IE6/7/8 浏览器。jQuery 使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的html 页面保持代码和html 内容分离，也就是说，不用再在html 里面插入一堆js 来调用命令了，只需要定义id 即可。</p>
</section>
<section class="sec">
<h4 id="yui">Yui</h4>
<p>近几年随着jQuery、Ext 以及CSS3 的发展，以Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。</p>
</section>
<section class="sec">
<h4 id="extjs">Extjs</h4>
<p>ExtJS 可以用来开发RIA 也即富客户端的AJAX 应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax 框架。因此，可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于YUI 技术，由开发人员JackSlocum 开发，通过参考JavaSwing 等机制来组织可视化组件，无论从UI 界面上CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript 客户端技术的精品。</p>
</section>
</div>
</div>
</body>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script> $('body').css({ height:document.documentElement.clientHeight }) function removeSec(e){ $(e).parents('.sec').remove(); $('#content').scrollspy('refresh'); } </script>第 15 章 标签页和工具提示插件
标签页插件（选项卡功能）
实现选项卡的功能
<ul class="nav nav-tabs">
<li class="active" data-toggle="tab"><a href="#html5">html5</a></li>
<li><a href="#bootstrap" data-toggle="tab">bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">jquery</a></li>
<li><a href="#extjs" data-toggle="tab">extjs</a></li>
</ul>
<div class="tab-content" style="padding: 10px">
<div class="active tab-pane" id="html5">
<p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。</p>
</div>
<div class="tab-pane" id="bootstrap">
<p>Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto 和Jacob Thornton 合作开发，是一个CSS/HTML 框架。Bootstrap提供了优雅的HTML 和CSS 规范，它即是由动态CSS 语言Less 写成。Bootstrap 一经推出后颇受欢迎，一直是GitHub 上的热门开源项目，包括NASA 的MSNBC（微软全国广播公司）的Breaking News 都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap 源码进行性能优化而来。[3] </p>
</div>
<div class="tab-pane" id="jquery"><p>JQuery 是继prototype 之后又一个优秀的Javascript 库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0 及后续版本将不再支持IE6/7/8 浏览器。jQuery 使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的html 页面保持代码和html 内容分离，也就是说，不用再在html 里面插入一堆js 来调用命令了，只需要定义id 即可。</p></div>
<div class="tab-pane" id="extjs"> <p>近几年随着jQuery、Ext 以及CSS3 的发展，以Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。</p></div>
</div>第 16 章 弹出框和警告框插件
一、弹出框
实现的是点击按钮弹出一个带着标题和内容的框
<button class="btn btn-default a1" data-toggle="popover" title="boot" data-content="Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。...">点击弹窗或隐藏</button>
</body>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script> $('.a1').popover() </script>第 17 章 按钮和折叠插件
一、按钮插件
点一次变颜色
<button class="btn btn-primary" data-toggle="button" >按牛牛</button>按钮插件 实现单选按钮bootstrap的样式
<div class="btn-group" data-toggle="buttons">
<label for="r1" class="btn btn-primary active">
<input type="radio" autocomplete="off" id="r1" checked>男
</label>
<label for="r2" class="btn btn-primary ">
<input type="radio" autocomplete="off" id="r2" checked>女
</label>
</div>复选按钮类似
实现点击菜单 出现折叠的效果
<button class="btn btn-primary" data-toggle="collapse" data-target="#content">
Bootstrap
</button>
<div class="collapse" id="content">
<div class="well">
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由
Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目
前,Bootstrap 最新版本为 3.0 。
</div>
</div>实现手风琴的伸缩效果 只有一个显示
<div class="panel-group" id="accord">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<a href="#collapseOne" data-toggle="collapse" data-parent="#accord">点击我进行展示，再点击我进行折叠，第一部分</a>
</h1>
</div>
<div class=" panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
这里是第一部分
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<a href="#collapse2" data-toggle="collapse" data-parent="#accord">点击我进行展示，再点击我进行折叠，第2部分</a>
</h1>
</div>
<div class=" panel-collapse collapse " id="collapse2">
<div class="panel-body">
这里是第2部分
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<a href="#collapse3" data-toggle="collapse" data-parent="#accord">点击我进行展示，再点击我进行折叠，第2部分</a>
</h1>
</div>
<div class=" panel-collapse collapse " id="collapse3">
<div class="panel-body">
这里是第2部分
</div>
</div>
</div>
</div>第 18 章 轮播插件
实现轮播的效果
<div id="myCarousel" class="carousel slide" style="width: 900px;" >
<ol class="carousel-indicators">
<li data-target="#myCarousel" class="active" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" ><img src="./images/slide1.png" alt="slide1.png"/>
<div class="carousel-caption">
<h3>saji</h3>
<p>sajs</p>
</div>
</div>
<div class="item"><img src="./images/slide2.png" alt="slide1.png"/>
<div class="carousel-caption">
<h3>saji</h3>
<p>sajs</p>
</div>
</div>
<div class="item"><img src="./images/slide3.png" alt="slide1.png"/>
<div class="carousel-caption">
<h3>saji</h3>
<p>sajs</p>
</div>
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>用js实现轮播前和轮播后的区分
$("#myCarousel").carousel({
//设置自动播放/2 秒
interval : 2000,
//设置暂停按钮的事件
pause : 'hover'
//只播一次
// wrap : false
})
//执行之前调用
.on('slide.bs.carousel',function(){
console.log(111)
})
//执行之后调用
.on('slid.bs.carousel',function(){
console.log(222)
})