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
:当轮播完成幻灯片过渡效果时触发该事件