bootstrap笔记
Bootstrap笔记
预定义样式是在服务器端预先定义的样式也可以称之为全局样式，当前工程下的所有模板都可以直接使用。
viewport 翻译为中文可以叫做"视区"
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中
通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定位为980px
官方网站：www.bootstrapcss.com
什么是响应式布局？
让一个网站可兼容不同分辨率的设备
给用户更好的视觉使用体验
响应式的优点和缺点？
优点：解决了设备只见的差异化展示
缺点：兼容性代码多，工作量大，加载速度受影响
对原有的网站布局会产生影响，用户判断未必精确
移动优先：
在设计的初期就要考虑的页面如何在多终端展示
渐进增强：
充分发挥硬件设备的最大功能
Bootstrap是最受欢迎的Html，css和js框架，用于开发响应时布局，移动设备优先的web项目，由Twitter于2011年8月在Github上发布的开源产品。将常见的CSS布局小组件和javascript插件进行了完整并完善的封转，能让没有没有经验的前端的工程师和后端工程师都迅速掌握和使用，大大提高效率。
响应时设计：系统平台，屏幕设计，屏幕定向等进行相应的响应和调整，具体的实践方式由多方面决定包括弹性网络布局，图片使适应不同的设备，能够兼容多个终端。
Bootstrap 允许您以两种方式显示代码：
- 第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
- 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
请确保当您使用 <pre> 和<code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。
为什么要使用bootstrap？
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的
Bootstrap包的内容：
bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用
bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了
bootstrap-responsive.css 这个是在对bootstrap框架应用了响应式布局之后所需要的CSS样式表，如果你的网站项目不准备做响应式设计，就不需要引用这个CSS。
bootstrap-responsive.min.css 和bootstrap.min.css的作用是一样的，是bootstrap-responsive.css的压缩版
bootstrap.js 这个是bootstrap的灵魂所在，是bootstrap的所有js指令的集合，你看到bootstrap里面所有的js效果，都是由这个文件控制的，这个文件也是一个未经压缩的版本，供开发的时候进行调试用
bootstrap.min.js 是bootstrap.js的压缩版，内容和bootstrap.js一样的，但是文件大小会小很多，在部署网站的时候就可以不引用bootstrap.js，而换成引用这个文件了~~
要想使用bootstrap需要四步：
A<meta name="viewport" content="width=device-width, initial-scale=1">
B：导入bootstrap<link href="../css/bootstrap.min.css" rel="stylesheet">
C：导入jquery<script src="../js/jquery-3.1.1.js"></script>
D：导入<script src="../js/bootstrap.min.js"></script>
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
-
“行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
-
类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 -
通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
-
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。 - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何
.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。
媒体查询
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值
/* 小屏幕（平板，大于等于 768px） */
@media (min-width:@screen-sm-min)
{... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
栅格系统用法：
Container是bootstrap的容器 屏幕是自适应的。最大的时候是剧中的
Container-fluid在屏幕上不管什么分辨率都是沾满全屏的
列组合：
<div id="container">栅格是把div平分了12格，
<div class="row">
<div class="col-md-1">col-md-4</div>它占了4格
<div class="col-md-1">col-md-4</div>它占了4格
</div>
</div>
列偏移：
Col-md-offset-3左空了3格；
列嵌套：
<div class="col-md-8">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
列排序：
<div class="row">
<div class="col-md-3 col-md-push-2">col-md-3</div>向右推移2格
<div class="col-md-4 col-md-pull-2">col-md-4</div>向左推移2格
</div>
跨设备的定义组合：
<div id="container">栅格是把div平分了12格，
<div class="row">
<div class="col-md-1 col-xs-4 col-xm-4">col-md-4</div>它占了4格
<div class="col-md-1 col-xs-3 col-xm-4">col-md-4</div>它占了4格
</div>
</div>
清除浮动：
<div class="clearfix visible-xs"></div>清除浮动，只在超小分辨率清除浮动
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 1 <br/>
ghjsdLvgnjdmkv
</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 2</div>
<div class="clearfix visible-xs"></div>清除浮动
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 4</div>
</div>
</div>
禁止响应布局：
<meta name="viewport" content="width=device-width, initial-scale=1">不适用这个移动设备优先
Bootstrap排版基础；
Html5文档类型：
移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">
属性：width，是不是用缩放，
响应时图片
<imgsrc=”路径”class=”img-responsive”>
Bootstarp设置了一些全局样式
Body背景为白，margin：0px；
字体、大小、行间距都进行了设置
所有默认样式都在normalize.less和scaffolding.less
Normalize.css
Bootstarp使用第三方案，normalize是一个专门用于将不同的浏览器的默认css效果特征统一的css库
H1:字体大小36px，margin-top：20px；margin-bottom：10px；
H2:字体大小30px，margin-top：20px；margin-bottom：10px；
H3:字体大小24px，margin-top：20px；margin-bottom：10px；
H4:字体大小18px，margin-top：10px；margin-bottom：10px；
H5:字体大小14px，margin-top：10px；margin-bottom：10px；
H6:字体大小12px，margin-top：10px；margin-bottom：10px；
标签:定义了margin；
Class没有定义margin
Body全局样式
P全局样式：设置了margin
<pclass=”lead text-right”></p>字体变大，右对齐；
强调文本：small
<p class=”lead text-right”>
<small>small</small>
<em>em</em>
<cite>cite</cite>
<b>b</b>
<br/>
<abbr title=”跟我一起学习java” class=”initialism”>学习java</abbr>鼠标移上去就会显示title
</p>
Strong
Em斜体
Cite斜体
缩略语：abbr
地址元素：address
引用：blockquote引用一篇文章
Push-right右对齐
Bootstarp列表与代码样式：
无序列表<ul></ul>
有序列表<ol></ol>
列表与代码：A列表
去点列表list-unstyled
内联列表：list_inline
Dl列表<dl><dd></dd><dl>
水平列表dl：dl-horizontal
<code>显示单行内联代码
<kbd>显示用户输入代码
B代码 <pre>多行代码块 自动格式化
<var>变量
<samp>程序结果
|
基础样式 |
Bootstrap表格样式：
|
带背条纹.table-striped 表.table |
先加基础样式
|
响应时表格 |
|
带边框.table-border |
|
悬停.table-hover |
|
紧凑 .table-condensed |
|
样式表.active .success .info |
Bootstrap表格样式
Bootstrap表单样式：
Bootstrap表单样式：A：基础表单
1、全局样式
2、form-control占满全屏
3、 form-group
B内联表单
1、form-inline
为 <form> 元素添加.form-inline 类可使其内容左对齐并且表现为inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
C横向表单：
1、在form上应用form-horizontal
2、使用栅格系统
D表单控件
1、Input
2、Select
3、Textarea
4、Checkbox&radio
5、静态控件
E：控作状态
F：辅助文本
G:控件大小
H：添加额外的图标
I：控件状态
1、焦点状态focus
2、禁用状态disabled
3、被禁用的filedset
4、只读状态Readonly
5、校检状态
添加 .has-warning、.has-error 或
.has-success
例：<div class="form-group">
<label class="sr-only"> <input type="password" class="form-control" placeholder="Password"（输入框默认的）/></label>
</div>包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：
text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和
color。
必须添加类型声明
只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
输入控件组
如需在文本输入域 <input> 前面或后面添加文本内容或按钮控件，请参考输入控件组。
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。form-control加上这个属性了col列是不起作用的
只要这个属性的值是true或者false的话，直接使用属性就行了
<div class="form-group">
<select class="form-control" multiple>multiple显示多项列表
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
Readonly只读状态
将验证状态传达给辅助设备和盲人用户
使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。
添加图标：添加一个属性has-feedback对小图标的定位
关于bootstrap中表单中的所有的属性
Form-control：适应屏幕100%；是添加在input，select上面的，只控制输入框的样式
form-group：包裹在lable和input
For-horizontal：为form添加水平
作用：1、设置表单控件padding和margin值
2、改变form-group的表现形式，类似于网格系统“row”；
Form-inline：在form添加就行了，内联样式；
Sr-only在lable标签中添加，隐藏的属性
Multiple多行设置
Rows设置高度
Cols设置宽度如果设置了form-control就不需要设置cols
1、如果checkbox需要水平排列，只需要在lable标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在lable标签上添加类名“radio-inline”
Bootstrap按钮样式
Bootstrap按钮样式：
A：按钮样式
1、btn-default默认的
Primary首选项
2、Success成功
3、waring警告
4、Danger危险的
B：按钮大小
1、btn-lg大按钮
2、Btn-sm中按钮
3、Btn-xs小按钮
4、
C：多标签支持
D：活动状态
1、active 只是一个属性
E：禁用状态
1.Disabled
按钮的总结：
Bootstrap按钮组：
Btn-group：该class用于形成基本的按钮，在btn-group中放置一系列带有class.Btn的按钮
Btn-toolbar:该class有助于把几组<div class=”btn-group”>结合到一个<divclass=”btn-toolbar’>中，一般获得更复杂的组件
btn-group-lg btn-group-sm btn-group-xs这些class可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
Btn-group-vertical该class让一组按钮垂直堆叠显示，而不是水平堆叠显示
图片与辅助样式：1、响应时图片img-responslve宽度设了100%，高度自动
2、图片形状
A：img-rounded圆角图片
B：img-circle椭圆
C：img-thumbnall边界有一个细线，中间与边界有一个空白
3、文本样式：
A：柔和灰：text-muted
B：text-primary主要蓝
C：text-success成功绿
D：信息蓝text-info
F：text-warning警告黄
G：text-danger危险红
4、文本背景样式：
A：主要蓝：bg-primary
B：成功绿：bg-success
C：信息蓝：bg-info
D：bg-waring警告黄
F：bg-danger威胁黄
辅助图标：A：关闭图标close
B:向下箭头caret
内容的浮动：center-block居中
Pull-left：居左；
Pull-right：居右；
Clearfixvisible-sm hidden-sx：只有在小分辨率下清除浮动
隐藏和显示：A：visible-md在中等分辨率下显示
B:hidden-md在中等分辨率下隐藏
C：show显示
D：hidden：隐藏
组件
小图标：1、小图标的基本用法：在<span class=”glyphicon glyphicon-glass”></span>
2、实现原理
:相同的字母在不同的字体显示不同的图标，
3、应用的场景：
A：可以在各种元素内容 可以在按钮，<a>标签
B:工具栏
<div class="btn btn-toolbar">//代表这是个工具栏
<div class="btn btn-group">//代表这是个一组按钮
<a href="#"class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>
<a href="#"class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>
<a href="#"class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>
<a href="#"class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>
</div>
</div>
C：输入框
<div class="col-sm-3 col-sm-offset-2"><!--//占据3格，向左俩格；-->
<div class="input-group"><!--z证明是组件的一组-->
<span class="input-group-addon">
<span class="glyphicon glyphicon-heart"></span>
</span><!--前面的图标-->
<input type="text"class="form-control"
>
</div>
</div>
下拉菜单：1、基本用法
dropdown
dropdown-menu隐藏菜单
data-toggle="dropdown"显示下拉菜单
2、对齐方式
默认是左对齐
Col-sm-3 col-sm-offset-2
3、标题
dropdown-header
4、分割线
Divider大约相距9像素
5、禁用菜单
disabled
6、**菜单 active
<div class="container">
<div class="dropdown col-sm-2 col-sm-offset-2">
<button type="button" class="btn btn-danger" data-toggle="dropdown">
<span class="glyphicon glyphicon-ok"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">文件管理</a></li>
<li><a href="#">文件1</a></li>
<li><a href="#">文件1</a></li>
<li><a href="#"><span class="glyphicon glyphicon-alert"></span></a>
</li>
<li class="active"><a href="#">文件1</a></li>
<li class="divider"></li>
<li class="disabled"><a href="#">文件</a></li>
</ul>
</div>
</div>
按钮组： Active**
按钮组：btn-group把按钮设置成圆角，margin设置为0；
按钮组：A：基本用法
1、可以是<a></a><button></button>标签
2、自动的吧按钮设置成圆角，margin为0；
3、btn-group属性加在div类上
B：按钮工具栏
1、btn-toolbar按钮的工具栏加在div类上
2、btn-group分组加在div上
C：按钮尺寸设置
1、btn-lg设置大点 btn-sm小点btn-xs最小的
2.如果在div类上设置尺寸大小，再在按钮设置尺寸大小是不起作用的。
D:嵌套分组
1、按钮组嵌套一个按钮或者下拉菜单
E:垂直分组
1、btn-group-vertical
F自适应分组
1、btn-group-justified这个容器的按钮会填满容器
2、每个按钮都放在一个按钮组<div>
<div class="container">
<div class="btn-group-vertical"><!--s水平按钮基本语法-->
<button type="button" class="btn btn-default">按钮</button>
<button type="button" class="btn btn-default">按钮</button>
<a href="#" class="btn btn-default">按钮1</a>
<a href="#" class="btn btn-default">按钮1</a>
</div>
<div class="btn btn-toolbar"><!--工具栏-->
<div class="btn-group">
<button type="button" class="btn btn-default">按钮</button>
<button type="button" class="btn btn-default">按钮</button>
</div>
</div>
<hr/>
<div class="btn-group"><!--嵌套按钮-->
<button type="button" class="btn btn-default">按钮</button>
<button type="button" class="btn btn-default">按钮</button>
<a href="#" class="btn btn-default">按钮1</a>
<a href="#" class="btn btn-default">按钮1</a>
<div class="btn-group">
<button type="button " class="btn btn-default dropdown-toggle " 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><a href="#">项目</a></li>
</ul>
</div>
</div>
<div class="row"><!--自适应大小-->
<div class="col-sm-6">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮</button>
</div>
</div>
</div>
</div>
</div>
按钮式下拉菜单：
按钮式下拉菜单：
A：组合式下拉菜单
B：分离式下拉菜单
C：按钮大小
D：向上弹起菜单
Dropup：<div class="btn-group dropup"><!--向上弹起菜单-->
输入框：
输入框：
A：基本用法
1、文本框和小图标的组合input-group
2、前面的图标叫做input-group-addon加在《span》标签中
B：尺寸设置
1、input-group-lg大的
2、input-group-sm中等
3、input-group-xs最小的
C：复选框addon
D：按钮加addon
input-group-btn吧这个加在span标签上，可以
E：下拉菜单按钮作为addon
F：分段按钮作为addon
input-group-btn吧这个加在span标签上，可以多个按钮存在
<div class="container">
<div class="input-group"><!--基本语法-->
<span class="input-group-addon">@</span>
<input type="text"class="form-control">
<span class="input-group-addon">..00</span>
</div>
<hr/>
<div class="input-group"><!--图标作为前头-->
<span class="input-group-addon glyphicon glyphicon-ok"></span>
<input type="text"class="form-control">
<span class="input-group-addon">..00</span>
</div>
<hr/>
<div class="input-group"><!--复选框作为addon-->
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text"class="form-control">
<span class="input-group-addon">..00</span>
</div>
<hr/>
<div class="input-group"><!--按钮作为addon-->
<span class="input-group-btn">
<button type="button"class=" btn btn-default">ok</button>
</span>
<input type="text"class="form-control">
<span class="input-group-addon">..00</span>
</div>
<hr/>
<div class="input-group">
<span class="input-group-btn"><!--下拉列表作为addon-->
<button type="button" class="btn btn-default">kaishi</button>
<button type="button"class=" btn btn-default dropdown-toggle" 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><a href="#">瞎忙活</a></li>
</ul>
</span>
<input type="text"class="form-control">
</div>
</div>
导航：
导航：
A：选项卡导航nav.Nav-tabs
B:胶囊式选项卡 nav.nav-pills
C:堆叠式导航：nav.nav-pills .nav-stacked
D:自适应导航nav-justified
F:分隔符
E：禁用：
G：二级导航
导航条：与导航的区别是：导航条有一条背景颜色
A：基础导航条
1、navbar-nav菜单从竖排变成横排
2、navbar导航条的背景条
3、navbar-default导航条的样式
4、navbar-header导航条的标题
5、navbar-text导航条加入文本
6、navbar-link
7、navbar-btn按钮可以居中
B：导航条中的表单：
C：导航条中的文本、连接、按钮
D：顶部固定和底部固定
1、navbar-fixed-top:跑到最上面吧第一个导航条覆盖
E：Navbar-static-top：变成方角
F:反色导航条 ：navbar-inverse变成黑色
默认导航条是50px
G：响应式的导航条：
navbar-toggle根据屏幕的分辨率考虑出不出现
Data-toggle：collapse决定容器出不出现
Collapse：根据768px隐藏掉
面包屑导航和分页导航：
面包屑.breadcrumb
1、
分页pagination
翻页pager
分页大小：pagination-lg..
标签，徽章，大屏展播，页面标题
1、标签lable
A：强调文本用《span》在加lable样式 lable-default默认色
B:lable-danger危险色
C：lable-info信息蓝
D：lable-warning警告色
2、lable
3、徽章badge
按钮，超链接，下拉列表（list-group
：list-group-item）
4、大屏展播：jumbotron
A：h1和p标签有默认的样式
5、页面标题：page-header
与h1很相似，加上页面标题设置的间距大一点
缩略图与警告框：
1、缩略图
A：加在超链接上的样式：thumbnail
B:可以自定义的缩略图：
2、默认的警告框
Alter-info
3、可关闭的警告框
加在按钮上close，data-dismiss=“alter”；
在div上加上alter-dismissable
4、多彩样式的警告框
5警告框中的链接
Alter-link：显示的更明显
进度条和媒体对象：
1、精度条的基本样式
A：progress：进度条
B：progress-bar：背景
2、进度条的多彩样式
A：还是四种样式
3、条纹进度条
A：progress progress-striped
A：progress-bar progress-striped
4、进度条的动画样式
A:progress-bar progress-striped active
5、堆叠样式进度条
A：
6、媒体对象默认样式
A：media表示这个容器内，我要图文红牌,media-left,media-right左右漂移
B:media-body内容
C;media-heading标题
D:media-object代表图片，视频
F：对齐方式：media-middle垂直方向居中
7、媒体列表
放在ul标签中。
选项卡：
1、选项卡组成和布局
Tab-content面板
Tab-pane面板
2、声明式用法
Data-toggle=“tab”系统才会把对应的面板显示或隐藏掉
fade in起到了渐变效果，相当于动画，加在div上
3、Javascript用法
这个不是直接调用div而是从调用tap属性
4、事件
Show.bs.tab刚刚显示
Show.bs.tab完整显示
Hide.bs.tab刚刚隐藏
Hide.bs.tab完整隐藏
a[data-toggle="tab"]a标签中的含有data-toggle="tab"这个属性的a标签
e.target.innerHtml当前**了哪个值就返回那个值
<div class="container"><!--选项卡-->
<ul class="nav nav-tabs ">
<li><a href="#pane1" data-toggle="tab">常规</a></li>
<li><a href="#pane2" data-toggle="tab">查看</a></li>
<li><a href="#pane3" data-toggle="tab">搜索</a></li>
</ul>
<!--面板-->
<div class="tab-content">
<div class="tab-pane active" id="pane1">
常规 常规 常规 常规 常规 常规
</div>
<div class="tab-pane"id="pane2">
查看查看
</div>
<div class="tab-pane"id="pane3">
搜索
</div>
</div>
</div>
<div class="container"><!--选项卡胶囊式-->
<ul class="nav nav-pills">
<li><a href="#pane1" data-toggle="pill">常规</a></li>
<li><a href="#pane2" data-toggle="pill">查看</a></li>
<li><a href="#pane3" data-toggle="pill">搜索</a></li>
</ul>
<!--面板-->
<div class="tab-content">
<div class="tab-pane active" id="pane1">
常规 常规 常规 常规 常规 常规
</div>
<div class="tab-pane"id="pane2">
查看查看
</div>
<div class="tab-pane"id="pane3">
搜索
</div>
</div>
</div>
<script>
$(function(){
$('.nav.a').click(function(e){
e.preventDefault();
});
$('#show2').click(function(){
$('#cheak').tab("show")
});
$('a[data-toggle="tab"]').on('show.bs.tab',function(e){
var newss = e.target.innerHTML;
$('#test').html(newss);
});
});
</script>
<div class="container"><!--选项卡javascript用法-->
<ul class="nav nav-pills ">
<li><a href="#pane1" data-toggle="pill">常规</a></li>
<li><a href="#pane2" data-toggle="pill" id="cheak">查看</a></li>
<li><a href="#pane3" data-toggle="pill">搜索</a></li>
</ul>
<!--面板-->
<div class="tab-content">
<div class="tab-pane " id="pane1">
常规 常规 常规 常规 常规 常规
</div>
<div class="tab-pane "id="pane2">
查看查看
</div>
<div class="tab-pane "id="pane3">
搜索
</div>
</div>
<button type="button" id="show2">按钮</button>
</div>
工具提示框：
1、基本用法
Data-toggle=“tooltip”
Data-placement=“五个方向值”
$(‘select’).tooltip()
不能单独使用，必须和js一起是使用
2、js用法
$(‘select’).tooltip()
$(‘select’).tooltip(‘show’)显示
$(‘select’).tooltip(‘hide’)隐藏
$(‘select’).tooltip(‘toggle’)单击显示，单击隐藏
$(‘select’).tooltip(‘option’)
3、参数
Data-animation应用一个fade动画
Data-html true/false是否支持html代码提示语
Data-placement方向
Data-selector触发提示的事件是什么
Data-original-title提示语（不需要用，版本删掉了）
Data-trigger ：如何触发事件
Click：
Hover默认的
focus
manual
Data-delay（show：500，hid：100）延迟时间json格式，鼠标单击时500秒显示，离开时100秒隐藏
Data-container String|false将tooltip附加到元素上
Data-template字符串，提示语模板
4、事件：
Show.bs.tooltip
Shown.bs.tooltip
Hid.bs.tooltip
Hidden.bs.tooltip
考虑到性能问题，不能单独的使用基本语法要和js语法配合使用
$(function(){
/* $('#showbtn').click(function(){
$('[data-toggle="tooltip"]').tooltip('show');
});*/
/* $('[data-toggle="tooltip"]').tooltip({
trigger:'click'
});*/
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="tooltip"]').on('show.bs.tooltip',function(){
$('#test').css("background","red");
})
});
<div style="margin: 200px ">
<button type="button" class="btn btn-danger"data-trigger="click" title="你好吗" data-toggle="tooltip" data-placement="right">按钮</button>
<button type="button" class="btn btn-danger" title="你好吗" data-toggle="tooltip" data-placement="left">按钮</button>
<br/>
<button type="button" id="showbtn"class="btn btn-danger">显示</button>
<div style="width: 100px;height: 200px ;background: gray" id="test"></div>
</div>
弹出框和警告框：
data-toggle="popover"；弹出框
$(‘select’).popover();
data-toggle="popover";
data-content=""
Data-original-title=””;
工具栏是鼠标移上去就显示，而提示框点击才会显示
警告框：
1、布局样式
2、data-dismiss=“alert”
3、data-target=“#target”
4、$().alert
5、$().alert(‘close’)
焦点轮播图：
焦点广告：
1、基本用法
布局与样式
Data-ride=”carousel”加载完了，开始轮播，在div容器上，再加一个id方便与小圈圈关联，在加个class=“carousel slide
”
Carousel-inner水平排列，默认的是隐藏的
在一个div上加上Carousel-inner
<div class="carousel-inner"><!--图片-->
<div class="item active"><img src="ni.jpeg"width="600px" height="400px" ></div>
<div class="item"><img src="hao.jpg" width="600px" height="400px" ></div>
<div class="item"><img src="ma.jpg" width="600px " height="400px" ></div>
</div>
图片容量
圈圈：carousel-indicators
小圈圈使用的是有序列表<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel_container"></li>
<li data-slide-to="1"data-target="#carousel_container"></li>
<li data-slide-to="2"data-target="#carousel_container"></li>
</ol>
左右按钮：
<a href="#carousel_container" data-slide="prev" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
2、自定义属性：
Data-ride=‘carousel’在图片容器上加的属性，加上以后开始轮播
Data-slide=‘prev|next’在超链接上加的，是左右轮播
Data-slide-to=‘3’在小圈圈上的<li>标签加的
Data-interval=‘5000’自动循环事件
Data-pause=“hover”当鼠标移到图片时，就不轮播了
Data-wrap=’true’是否持续循环
3、javascript用法：
$(‘.carousel’).carousel()
.carousel(‘cycle’)默认是从左往右的
.carousel（‘pause’）暂停
.carousel(number)循环到number
.carousel（‘prev’）返回到前一条
.carousel（‘next’）转到下一条
4、事件：
Slide.bs.carousel
Slide方法后，还未开始下一张图
Slid.bs.carousel在一张图结束后
图片的默认大小是600px*400px
Html结构需要四步：
1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆圈指示符的关联
1.2、图片列表部分，用一个外层div包裹所有，然后每个img会被一个div，则class为item的包裹住
1.3、圆圈指示符：用一个ol列表来显示其各图形列表项，每个列表项需要指定data-slide-to=”index”属性，用于标记当前圆圈的索引号
1.4、左右控制按钮：实现向左、向右移动的功能
2、Css样式
2.1、Carousel：只有一个相对定位标记
2.2、Carousel-inner：旋转图片列表区域，其中每项有item来修饰
2.2.1、其中的active、next、prev都认为是可见的
2.2.2、Carousel-caption：表示每个item项应该有标题信息，默认显示下、中位置
2.3、Carousel-control：设置向左、向右按钮的样式，其中会设置渐变、透明度等信息，提供了icon-prev、icon-next两种额外样式
2.4、Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体
轮播（焦点广告）
如果用html需要四步：
1、在div最外层加一个class=”carousel slide”data-ride=”carousel”id=”show”
2、在第二个div中添加一个class=”carousel-inner”水平排列
<div class=”iteam”><img></div>
<div class=”iteam”><img></div>
<div class=”iteam”><img></div>
3、圈圈
<ol>
<li data-slide-to=”0”data-target=”show”>
<li data-slide-to=”1”data-target=”show”>
<li data-slide-to=”2”data-target=”show”>
</ol>
4、左右按钮
<a href=”#show”data-slide=”prev”class=”left carousel-control
”>
<span class=”glyphicon glyphicon-chevron-left
”></span>
</a>