CSS笔记（Bootstrap插件）
通过data属性API就可以使用所有Bootstrap插件
如同jQuery一样，若发生命名冲突可使用noConflict
1 模态框（Modal）插件
+ <button>，定义`data-toggle="modal"`以及`data-target="#id"`或`href="#id"`
+ <div>，定义`modal`，`id`
+ <div>，定义`modal-dialog`
+ <div>，定义`modal-content`
+ <div>，定义`modal-header`
+ <div>，定义`modal-title`
+ <button>，定义关闭按钮`close`
+ <div>，定义`modal-body`
+ <div>，定义`modal-footer`1.1 选项
有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。以以下这样的方式添加到js中：
<script>
$(function(){
$("#mymodal").modal({
keyboard:false
})
})
</script>其中选项有：
backdrop或data-backdrop：布尔值，默认true，用于定义用户点击模态框外部时，会否关闭框口keyboard或data-keyboard：布尔值，默认true，用于定义使用esc键时，会否关闭框口show或data-show：布尔值，默认true，用于定义初始化时，是否显示框口
1.2 方法
可以独自调用的modal()方法：
$('#identifier').modal('toggle')：手动切换模态框$('#identifier').modal('show')：手动显示模态框$('#identifier').modal('hide')：手动隐藏模态框
1.3 事件
show.bs.modal：调用show方法时触发hide.bs.modal：调用hide方法时触发shown.bs.modal：模态框显示后触发hidden.bs.modal：模态框隐藏后触发
2 下拉菜单（Dropdown）插件
+ <div>或<li>等，定义`dropdown`
+ <a>或<button>等，定义`data-toggle="dropdown"`，`data-target="#id"`或`href="#id"`
+ <ul>，定义`dropdown-menu`2.1 方法
$().dropdown('toggle') 用来显示或隐藏下拉菜单
3 滚动监听（Scrollspy）插件
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标
+ <body>，定义`data-spy="scroll"`，`data-target="#id"`或`href="#id"`，可选的`data-offset="num"`3.1 方法
.scrollspy('refresh')：调用 .refresh 方法来更新 DOM，这在 DOM 的任意元素发生变更（即添加或移除了某些元素）时非常有用
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})3.2 事件
activate.bs.scrollspy：每当一个新项目被滚动监听激活时，触发该事件
4 附加导航（Affix）插件
附加导航（Affix）插件允许某个<div>固定在页面的某个位置。也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。
+ <body>，定义`data-spy="scroll"`，`data-target="#id"`或`href="#id"`，可选的`data-offset="num"`
+ <ul>，定义`data-spy="affix"`，以及`data-offset`用以定义浮动距离5 标签页（Tab）插件
+ <li>，定义`data-toggle="tab"`或`data-toggle="pill"`
+ <div>，定义`tab-content`
+ <div>，定义`tab-pane`，`fade`（用于淡出），`id`
请添加
fade到每个tab-pane后面。第一个标签页必须添加in类，以便淡入显示初始内容
5.1 方法
$('#myTab a:last').tab('show')：该方法可以激活标签页元素和内容容器。
5.2 事件
show.bs.tab：该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用event.target和event.relatedTarget来定位到激活的标签页和前一个激活的标签页。shown.bs.tab：该事件在标签页显示时触发，但是必须在新标签页被显示之后。分别使用event.target和event.relatedTarget来定位到激活的标签页和前一个激活的标签页。
6 提示工具（Tooltip）插件
当您想要描述一个链接（不仅仅是链接）的时候，提示工具（Tooltip）就显得非常有用。
+ <a>，定义`data-toggle="tooltip"`，`data-placement="top/left/right/bottom"`，`title="****"`选项请看教程
6.1 方法
$('#element').tooltip('toggle')：切换显示/隐藏元素的提示工具$('#element').tooltip('show')：切换显示元素的提示工具
$('#element').tooltip('hide')：切换隐藏元素的提示工具
$('#element').tooltip('destroy')：破坏元素的提示工具
6.2 事件
show.bs.tooltip： 当调用show实例方法时立即触发该事件shown.bs.tooltip：当提示工具对用户可见时触发该事件hide.bs.tooltip： 当调用hide实例方法时立即触发该事件hidden.bs.tooltip：当提示工具对用户隐藏时触发该事件
7 弹出框（Popover）插件
弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标点击在元素上即可。
+ <button>，定义`data-toggle="popver"`，`title="***"`，`data-content="***"`，`data-placement`
+ <scriot>，需要另外激活
$(function(){
$("[data-toggle='popver']").popver();
})选项、方法、事件都与提示工具（Tooltip）插件类似
8 警告框（Alert）插件
警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息，还可以向所有的警告框消息添加可取消（dismiss）功能。
+ <div>，定义`alert`，`alert-warning`
+ <a>，定义`close`，`data-dismiss="alert"`8.1 事件
close.bs.alert：当调用 close 实例方法时立即触发该事件closed.bs.alert：当警告框被关闭时触发该事件
9 按钮（Button）插件
通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。
+ <button>，定义` data-loading-text="***"`可用于显示加载，定义` data-toggle="button"`用于激活单个按钮的切换（还可以添加到`btn-group`上）另外还可以使用btn btn-primary来拟造<input>元素的按钮，如：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> 选项 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> 选项 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> 选项 3
</label>
</div>10 折叠（Collapse）插件
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
+ <a>，定义`data-toggle="collapse"`，`data-target="#id"`或`href="#id"
+ <div>，定义`id`事件，方法都大致差不多请看教程
11 轮播（Carousel）插件
+ <div>，定义`carousel`，`slide`，`id`
+ <ul>，定义`carousel-indicators`，用于小圆点按钮
+ <li>，定义`data-target="#id"`（指向父类`id`），`data-slide="num"`（索引从0开始），还有`active`初始化
+ <div>，定义`carousel-inner`
+ <div>，定义`item`
+ 可选<div>，定义`carousel-caption`，作为小圆点按钮上方小标题
+ <a>，定义`carousel-control`，`left`,`href="#id"`（指向父类`id`）,`data-slide="prev"`
+ <a>，定义`carousel-control`，`right`,`href="#id"`（指向父类`id`）,`data-slide="next"`11.1 选项
interval或data-interval：轮播时间间隔，默认5000pause或data-pause：默认值："hover"，鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环wrap或data-wrap：轮播是否连续循环，默认值true
11.2 方法
carousel('cycle')：从左到右循环轮播项目carousel('pause')：停止轮播循环项目carousel(number)：循环轮播到某个特定的帧（从 0 开始计数）carousel('prev')： 循环轮播到上一个项目carousel('next')： 循环轮播到下一个项目
11.3 事件
slide.bs.carousel：当调用slide实例方法时立即触发该事件slid.bs.carousel：当轮播完成幻灯片过渡效果时触发该事件
浙公网安备 33010602011771号