@EncyKe
2015-12-17T02:42:15.000000Z
字数 10587
阅读 7029
前端
JavaScript
直接引入“bootstrap.js”或“bootstrap.min.js”(压缩版本)。
<!--
导入jQuery版本库,Bootstrap的JS插件依赖于jQuery;
也可以加载本地的jQuery版本。
-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!--
一次性导入所有Bootstrap的JavaScript插件(压缩版本)
-->
<script src="js/bootstrap.min.js"></script>
为方便单独导入特效文件,Bootstrap v3.2中提供了12种JS插件:
Transitions
:“transition.js”Modal
:“modal.js”Dropdown
:“dropdown.js”Scrollspy
:“scrollspy.js”Tab
:“tab.js”Tooltips
:“tooltop.js”Popover
:“popover.js”Alert
:“alert.js”Buttons
:“button.js”Collapse
:“collapse.js”Carousel
:“carousel.js”Affix
:“affix.js” Transitions
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果:
Modal
的滑动和渐变效果;Tab
的渐变效果;Alert
的渐变效果;Carousel
的滑动效果;注意:过渡动画都是采用CSS3来实现的,故不支持IE 6-8。
Modals
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
点击一个按钮弹出一个框,弹出的框可以是一段文件描述,也可以带有按钮操作,也有可以弹出的是一张图片。
结构:
.modal
>.modal-dialog
>.modal-content
>(.modal-header
+.modal-body
+.modal-footer
)
模态弹出框含modal
、modal-dialog
和modal-content
样式,弹出窗真正的内容都放置在modal-content
中,其主要又包括三个部分:
a. 弹出框头部,使用modal-header
,主要包括标题和关闭按钮;
b. 弹出框主体,使用modal-body
,弹出框的主要内容;
c. 弹出框脚部,使用modal-footer
,主要放置操作按钮;
对于一个模态弹出窗而言,modal-content
才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。
其三个部分主要控制一些间距的样式。其中modal-footer
都是用来放置按钮,所以底部还对包含的按钮做了一定的样式处理。
表现:
modal-dialog
水平居中;尺寸选择:
模态弹出窗含大尺寸样式modal-lg
和小尺寸样式modal-sm
,加在modal-dialog
一级;
动画:
可通过给.modal
增加.fade
为模态弹出框增加一个过渡动画效果。
方法一:模态弹出窗声明,只需自定义两个必要的属性:data-toggle
和data-target
。前者必须是data-toggle="modal"
,后者data-target
一般情况设置为模态弹出窗(.modal
)的id值(#id
),也可以设置为CSS的选择符。
方法二:触发模态弹出窗也可以是<a>
元素,可以用链接元素自带的href
属性替代data-target
属性。
HTML的data-参数设置
使用示例:
$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
keyboard:false
});
});
});
参数 | 使用方法 | 描述 |
---|---|---|
toggle | $(“#mymodal”).modal(“toggle”) |
触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示 |
show | $(“#mymodal”).modal(“show”) |
触发时,显示模态弹出窗 |
hide | $(“#mymodal”).modal(“hide”) |
触发时,关闭模态弹出窗 |
事件类型 | 描述 |
---|---|
show.bs.modal | 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性 |
shown.bs.modal | 该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件 |
hide.bs.modal | 在hide方法调用时(但还未关闭隐藏)立即触发 |
hidden.bs.modal | 该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发 |
使用示例:
$('#myModal').on('hidden.bs.modal',
function (e) {
// 处理代码...
}
)
Dropdown
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js"></script>
一般下拉菜单都是出现在导航条中。
结构:
ul.nav.navbar-nav
>li.dropdown
>(a[data-toggle="dropdown" data-target="#"]
>b.caret
+ul.dropdown-menu
>li
>a
)
data-toggle="dropdown"
;data-target="#"
来替代href="#"
;使用JS调用dropdown()
方法后,单击激活按钮,会弹出下拉菜单,再次单击的时候会收起下拉菜单。
$(function(){
$(".dropdown-toggle").dropdown();
})
还可以使用参数toggle
。当下拉菜单隐藏时,调用dropdown(“toggle”)
方法可以显示下拉菜单,反之,如果下拉菜单显示时,调用dropdown(“toggle”)
方法可以让下拉菜单隐藏。
$(function(){
$(".dropdown-toggle").dropdown("toggle");
})
不过使用该参数,每次单击都要两次toggle
,就会一直是一个不变的状态。所以,一般情况下,建议使用jQuery的one方法:
$(".dropdown-toggle").one("click",function(){
$(this).dropdown("toggle");
})
Scrollspy
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js"></script>
<a>
设置href="#id"
;注意首项li.active
;<div class="scrollspy" data-target="#navbar-menu">
包裹,class
项自由定义,data-target
项与<nav>
的id必须一致,此div
下子项的id则需与导航条中的href
一一对应;定义监控区样式,设置容器以产生垂直滚动条:
.scrollspy{
height:500px;
font-size:20px;
overflow:auto;
}
为监控区设置被监控的data属性:data-spy="scroll"
,定义监控过程中滚动条偏移位置data-offset="60"
。
体监控:
可以在body
中加监控:将data-spy
以及data-target
等追加在body
中,但导航条必须设置为顶部固定样式div.navbar+navbar-default+navbar-fixed-top
。
$(function(){
$("#scrollspy").scrollspy({
target: "#navbar-menu"
});
})
Bootstrap还提供了一个方法scrollspy("refresh")
。当滚动监控所作用的DOM有增加或删除页面元素的操作时,需要调用refresh方法:
$(function(){
$("[data-spy='scroll']").each(function(){
var $spy=$(this).scrollspy("refresh");
})
})
需要注意的是,这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外,还提供了一个offset参数,此参数默认值为10。默认情况下,滚动内容距离滚动容器10px以内的话,就高一片面前显示所对应的菜单项。
Tab
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tab.js"></script>
ul.nav.nav-tabs
>li(.active)
>a[data-toggle="tab" href="#id"]
div.tab-content
>div#id.tab-pane.fade(.in.active)
fade
,让其产生渐入的效果。在添加fade
样式时,最初的默认显示的内容面板要加上in
类名,不然其内容用户无法看到。nav-pill
也有选项卡的功能。只需将nav-tabs
换成nav-pills
,并将data-toggle="tab"
换成data-toggle="pill"
。在每个链接的单击事件中调用tab("show")
方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的data-toggle="tab"
或data-toggle="pill"
的属性,然后通过下面的脚本来调用:
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
Tooltip
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tooltip.js"></script>
<button>
标签或者链接<a>
标签来制作: title
或data-original-title
属性的值来定义提示信息(若同时设置,则data-original-title
的优先级要高于title
); data-placement
自定义属性来控制提示信息框的位置,具有四个值:top
、right
、bottom
和left
; data-toggle="tooltip"
;HTML的data-
设置提示框参数:
Tooltip组件不能直接通过自定义的属性data-
来触发;只支持JS触发。
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
或者也可以单独指定一个元素,在该元素上调用提示框:
$(function(){
$('#myTooltip').tooltip({
title:"我是一个提示框,我在顶部出现",
placement:'top'
});
});
JS设置提示框参数:
Popover
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-popover.js"></script>
弹出框外表与提示框差不多,不同的是:弹出框除了有标题title
以外还增加了内容content
部分;样式风格上弹出框有边框、圆角、背景、阴影以及三角形等样式;提示框的默认触发事件是hover和focus,而弹出框是click。
同样使用<button>
和<a>
,但data-toggle="popover"
,且多出data-content="内容文本"
;
HTML的data-
设置提示框参数:
Popover同Tooltip,只支持JS触发:
$(function(){
$('[data-toggle="popover"]').popover();
});
需用data-
设置弹出框的属性。或者:
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"top"
});
});
Alert
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-alert.min.js"></script>
警告框插件是在警示框组件的基础上添加单击X号能关闭警告框的功能。
<div class="alert alert-success" role="alert">
<button class="close" data-dismiss="alert" type="button" >×</button>
<p>恭喜您操作成功!</p>
</div>
关闭按钮,不一定非要用X号,也可以是普通的按钮元素或者链接元素,只需要保证关闭元素带有自定义属性data-dismiss="alert"
即可。
操作关闭按钮时都是先查找data-target
属性,再查找href
属性,如果关闭按钮都没有定义这两个属性,就会操作其父元素。也就是说,关闭按钮不在div.alert
容器内时,只要给关闭元素定义了data-target
属性(如果是链接元素还可以通过href
属性),而且属性值与div.alert
容器的id
一致,关闭元素放在容器外也可以关闭警告框。
$(function(){
$("#close").on("click",function(){
//取button的id
$(this).alert("close");
});
});
Button
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-button.min.js"></script>
<button class="btn btn-primary"
id="loaddingBtn"
data-loading-text="正在加载中,请稍等..."
<!--data-loading-text放置加载中文本-->
type="button" >
加载
</button>
$(function(){
$("#loaddingBtn").click(function () {
$(this).button("loading");
});
});
div.btn-group[data-toggle="buttons"]
>label
>input[type="radio" name id]
同单选按钮,替换type="radio"
为type="checkbox"
即可。
button[data-toggle="button"]
$("#mybutton").button("toggle")
$("#mybutton").button("reset")
$("#mybutton").button("任意字符参数名")
data-任意字符参数名-text
的属性值为“按钮上显示的文本值”。Collapse
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-collapse.min.js"></script>
每个标题对应一个内容,这两个部分组合起来称为一个panel页板,多个panel页板就是一个面板组合panel-group,也就是手风琴折叠的结构。
div#accordion.panel-group
>div.panel.panel-accordion.panel-default
>(div.panel-heading
>hn.panel-title
>a[href="#id"/data-target="#id" data-toggle="collapse" data-parent="#accordion"]
)+(div#id.panel-collapse
>div.panel-body
)
panel-collapse
一级追加collapse
可使之不可视,按需追加;默认打开的项则再追加in
类名;
Carousel
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-carousel.min.js"></script>
一个轮播图片主要包括三个部分:
ol
<a class="left carousel-control" href="" >
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
结构:
div#id.carousel.slide
>
{[ol.carousel-indicators
>(li(.active)
)]+
div.carousel-inner
>div.item(.active)
>a
>img
}
img
后添加:
<div class="carousel-caption">
<h3>图片标题</h3>
<p>描述内容...</p>
</div>
data-ride="carousel"
;data-target="#id"
:取值carousel定义的ID名或者其他样式识别符;data-slide="prev/next"
:该属性值同样定义在轮播图控制器的a
链接上,同时设置控制器href="#id"
,取值为容器carousel的ID名或其他样式识别符。data-slide-to
:用来传递某个帧的下标,取数值,可直接跳转到这个指定的帧(下标从0开始计)。HTML的data-属性:
属性名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
data-interval | number | 5000 | 幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环 |
data-pause | string | hover | 默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放 |
data-wrap | 布尔值 | true | 轮播是否持续循环 |
示例:
<div id="id" class="carousel slide" data-ride="carousel">
<!-- .carousel层添加slide样式可使图片切换有平滑感 -->
<!-- 设置图片轮播的顺序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
<li data-target="#slidershow" data-slide-to="3"></li>
<li data-target="#slidershow" data-slide-to="4"></li>
<li data-target="#slidershow" data-slide-to="5"></li>
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
...
</div>
<!-- 设置轮播图片控制器 -->
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
$(".carousel/#id").carousel({
...//参数
});
JS属性:
属性名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
interval | number | 5000 | 幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环 |
pause | string | hover | 默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放 |
wrap | 布尔值 | true | 轮播是否持续循环 |
特殊调用方法:
.carousel("cycle")
:从左向右循环播放;.carousel("pause")
:停止循环播放;.carousel("number")
:循环到指定的帧,下标从0开始,类似数组;.carousel("prev")
:返回到上一帧;.carousel("next")
:下一帧;Affix
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-affix.js"></script>
Affix插件是从Bootstrap v2.1版本新增的一个插件,其主要功能就是通过插件给某个元素(需要固定的元素)添加或删除affix
类名,实现元素在浏览器窗口中固定(元素带有affix
类名固定)和不固定(元素不带有affix
类名)的效果。
Affix 效果常见的有以下三种:
Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性data来触发。其主要包括两个参数:
data-spy="affix"
:表示元素固定不变的;data-offset:整数值
:表示元素top和bottom的值都是该数值,其包括两种方式:data-offset-top
和data-offset-bottom
,可单独以这两种方式表现。注意:在body需声明监控:<body data-spy="scroll" data-target="sidebarMenu">
Bootstrap框架自定义配置
在线自定义设置主要包括三个部分:
组件设置提供了公共样式Common CSS,UI组件Components和JS组件JavaScript components三个部分。