[关闭]
@EncyKe 2015-12-17T02:42:15.000000Z 字数 10587 阅读 6371

Bootstrap【进阶篇】

前端 JavaScript


零、引入

1. 直接引入

直接引入“bootstrap.js”或“bootstrap.min.js”(压缩版本)。

  1. <!--
  2. 导入jQuery版本库,Bootstrap的JS插件依赖于jQuery;
  3. 也可以加载本地的jQuery版本。
  4. -->
  5. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  6. <!--
  7. 一次性导入所有Bootstrap的JavaScript插件(压缩版本)
  8. -->
  9. <script src="js/bootstrap.min.js"></script>

2. 单独引入

为方便单独导入特效文件,Bootstrap v3.2中提供了12种JS插件:


一、动画过渡Transitions

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>

1. 简介

默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果:

注意:过渡动画都是采用CSS3来实现的,故不支持IE 6-8。


二、模态弹出框Modals

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>

1. 简介

点击一个按钮弹出一个框,弹出的框可以是一段文件描述,也可以带有按钮操作,也有可以弹出的是一张图片。

结构:
.modal>.modal-dialog>.modal-content>(.modal-header+.modal-body+.modal-footer)

模态弹出框含modalmodal-dialogmodal-content样式,弹出窗真正的内容都放置在modal-content中,其主要又包括三个部分:
a. 弹出框头部,使用modal-header,主要包括标题和关闭按钮;
b. 弹出框主体,使用modal-body,弹出框的主要内容;
c. 弹出框脚部,使用modal-footer,主要放置操作按钮;

对于一个模态弹出窗而言,modal-content才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。
其三个部分主要控制一些间距的样式。其中modal-footer都是用来放置按钮,所以底部还对包含的按钮做了一定的样式处理。

表现:

尺寸选择:
模态弹出窗含大尺寸样式modal-lg和小尺寸样式modal-sm,加在modal-dialog一级;

动画:
可通过给.modal增加.fade为模态弹出框增加一个过渡动画效果。

2. 声明式触发

方法一:模态弹出窗声明,只需自定义两个必要的属性:data-toggledata-target。前者必须是data-toggle="modal",后者data-target一般情况设置为模态弹出窗(.modal)的id值(#id),也可以设置为CSS的选择符。
方法二:触发模态弹出窗也可以是<a>元素,可以用链接元素自带的href属性替代data-target属性。
HTML的data-参数设置
此处输入图片的描述

3. JS触发

1) 属性设置

此处输入图片的描述
使用示例:

  1. $(function(){
  2. $(".btn").click(function(){
  3. $("#mymodal").modal({
  4. keyboard:false
  5. });
  6. });
  7. });

2) 参数设置

参数 使用方法 描述
toggle $(“#mymodal”).modal(“toggle”) 触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示
show $(“#mymodal”).modal(“show”) 触发时,显示模态弹出窗
hide $(“#mymodal”).modal(“hide”) 触发时,关闭模态弹出窗

3) 事件设置

事件类型 描述
show.bs.modal 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性
shown.bs.modal 该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件
hide.bs.modal 在hide方法调用时(但还未关闭隐藏)立即触发
hidden.bs.modal 该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发

使用示例:

  1. $('#myModal').on('hidden.bs.modal',
  2. function (e) {
  3. // 处理代码...
  4. }
  5. )

三、下拉菜单Dropdown

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js"></script>

1. 简介

一般下拉菜单都是出现在导航条中。
结构:
ul.nav.navbar-nav>li.dropdown>(a[data-toggle="dropdown" data-target="#"]>b.caret+ul.dropdown-menu>li>a)

2. 声明式触发

3. JS触发

使用JS调用dropdown()方法后,单击激活按钮,会弹出下拉菜单,再次单击的时候会收起下拉菜单。

  1. $(function(){
  2. $(".dropdown-toggle").dropdown();
  3. })

还可以使用参数toggle。当下拉菜单隐藏时,调用dropdown(“toggle”)方法可以显示下拉菜单,反之,如果下拉菜单显示时,调用dropdown(“toggle”)方法可以让下拉菜单隐藏。

  1. $(function(){
  2. $(".dropdown-toggle").dropdown("toggle");
  3. })

不过使用该参数,每次单击都要两次toggle,就会一直是一个不变的状态。所以,一般情况下,建议使用jQuery的one方法:

  1. $(".dropdown-toggle").one("click",function(){
  2. $(this).dropdown("toggle");
  3. })

四、滚动监视Scrollspy

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js"></script>

1. 简介

  1. 当用户鼠标滚动时,滚动条的位置会自动更新导航条中相应的导航项;
  2. 用户拖动滚动条,当滚动到特定板块上时,上方相应的导航项就会高亮显示;

2. 声明式触发

  1. 在导航条中的<a>设置href="#id";注意首项li.active
  2. 监控区以<div class="scrollspy" data-target="#navbar-menu">包裹,class项自由定义,data-target项与<nav>的id必须一致,此div下子项的id则需与导航条中的href一一对应;
  3. 定义监控区样式,设置容器以产生垂直滚动条:

    .scrollspy{
        height:500px;
        font-size:20px;
        overflow:auto;
    }
    
  4. 为监控区设置被监控的data属性:data-spy="scroll",定义监控过程中滚动条偏移位置data-offset="60"

体监控:
可以在body中加监控:将data-spy以及data-target等追加在body中,但导航条必须设置为顶部固定样式div.navbar+navbar-default+navbar-fixed-top

3. JS触发

  1. $(function(){
  2. $("#scrollspy").scrollspy({
  3. target: "#navbar-menu"
  4. });
  5. })

Bootstrap还提供了一个方法scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时,需要调用refresh方法:

  1. $(function(){
  2. $("[data-spy='scroll']").each(function(){
  3. var $spy=$(this).scrollspy("refresh");
  4. })
  5. })

需要注意的是,这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外,还提供了一个offset参数,此参数默认值为10。默认情况下,滚动内容距离滚动容器10px以内的话,就高一片面前显示所对应的菜单项。


五、选项卡Tab

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tab.js"></script>

1. 声明式触发

2. JS触发

在每个链接的单击事件中调用tab("show")方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的data-toggle="tab"data-toggle="pill"的属性,然后通过下面的脚本来调用:

  1. $(function(){
  2. $("#myTab a").click(function(e){
  3. e.preventDefault();
  4. $(this).tab("show");
  5. });
  6. })

六、提示框Tooltip

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tooltip.js"></script>

1. 声明式触发

HTML的data-设置提示框参数:
此处输入图片的描述

2. JS触发

Tooltip组件不能直接通过自定义的属性data-来触发;只支持JS触发。

  1. $(function(){
  2. $('[data-toggle="tooltip"]').tooltip();
  3. });

或者也可以单独指定一个元素,在该元素上调用提示框:

  1. $(function(){
  2. $('#myTooltip').tooltip({
  3. title:"我是一个提示框,我在顶部出现",
  4. placement:'top'
  5. });
  6. });

JS设置提示框参数:
此处输入图片的描述


七、弹出框Popover

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-popover.js"></script>

1. 简介

弹出框外表与提示框差不多,不同的是:弹出框除了有标题title以外还增加了内容content部分;样式风格上弹出框有边框、圆角、背景、阴影以及三角形等样式;提示框的默认触发事件是hover和focus,而弹出框是click。

同样使用<button><a>,但data-toggle="popover",且多出data-content="内容文本"

HTML的data-设置提示框参数:
此处输入图片的描述

2. JS触发

Popover同Tooltip,只支持JS触发:

  1. $(function(){
  2. $('[data-toggle="popover"]').popover();
  3. });

需用data-设置弹出框的属性。或者:

  1. $(function(){
  2. $('#myPopover').popover({
  3. title:"我是弹出框的标题",
  4. content:"我是弹出框的内容",
  5. placement:"top"
  6. });
  7. });

八、警告框Alert

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-alert.min.js"></script>

1. 简介

警告框插件是在警示框组件的基础上添加单击X号能关闭警告框的功能。

  1. <div class="alert alert-success" role="alert">
  2. <button class="close" data-dismiss="alert" type="button" >&times;</button>
  3. <p>恭喜您操作成功!</p>
  4. </div>

关闭按钮,不一定非要用X号,也可以是普通的按钮元素或者链接元素,只需要保证关闭元素带有自定义属性data-dismiss="alert"即可。

2. 声明式触发

操作关闭按钮时都是先查找data-target属性,再查找href属性,如果关闭按钮都没有定义这两个属性,就会操作其父元素。也就是说,关闭按钮不在div.alert容器内时,只要给关闭元素定义了data-target属性(如果是链接元素还可以通过href属性),而且属性值与div.alert容器的id一致,关闭元素放在容器外也可以关闭警告框。

3. JS触发

  1. $(function(){
  2. $("#close").on("click",function(){
  3. //取button的id
  4. $(this).alert("close");
  5. });
  6. });

九、按钮Button

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-button.min.js"></script>

1. 按钮加载状态

  1. <button class="btn btn-primary"
  2. id="loaddingBtn"
  3. data-loading-text="正在加载中,请稍等..."
  4. <!--data-loading-text放置加载中文本-->
  5. type="button" >
  6. 加载
  7. </button>

JS触发

  1. $(function(){
  2. $("#loaddingBtn").click(function () {
  3. $(this).button("loading");
  4. });
  5. });

2. 模拟单选按钮

div.btn-group[data-toggle="buttons"]>label>input[type="radio" name id]

3. 模拟复选按钮

同单选按钮,替换type="radio"type="checkbox"即可。

4. 按钮状态切换

声明式触发

button[data-toggle="button"]

JS触发


十、折叠Collapse

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-collapse.min.js"></script>

1. 简介

每个标题对应一个内容,这两个部分组合起来称为一个panel页板,多个panel页板就是一个面板组合panel-group,也就是手风琴折叠的结构。

2. 声明式触发

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

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-carousel.min.js"></script>

1. 简介

一个轮播图片主要包括三个部分:

  1. <a class="left carousel-control" href="" >
  2. <span class="glyphicon glyphicon-chevron-left"></span>
  3. </a>
  4. <a class="right carousel-control" href="">
  5. <span class="glyphicon glyphicon-chevron-right"></span>
  6. </a>

结构:
div#id.carousel.slide>
{[ol.carousel-indicators>(li(.active))]+
div.carousel-inner>div.item(.active)>a>img}

  1. <div class="carousel-caption">
  2. <h3>图片标题</h3>
  3. <p>描述内容...</p>
  4. </div>

2. 声明式触发

HTML的data-属性:

属性名称 类型 默认值 描述
data-interval number 5000 幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环
data-pause string hover 默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放
data-wrap 布尔值 true 轮播是否持续循环

示例:

  1. <div id="id" class="carousel slide" data-ride="carousel">
  2. <!-- .carousel层添加slide样式可使图片切换有平滑感 -->
  3. <!-- 设置图片轮播的顺序 -->
  4. <ol class="carousel-indicators">
  5. <li class="active" data-target="#slidershow" data-slide-to="0"></li>
  6. <li data-target="#slidershow" data-slide-to="1"></li>
  7. <li data-target="#slidershow" data-slide-to="2"></li>
  8. <li data-target="#slidershow" data-slide-to="3"></li>
  9. <li data-target="#slidershow" data-slide-to="4"></li>
  10. <li data-target="#slidershow" data-slide-to="5"></li>
  11. </ol>
  12. <!-- 设置轮播图片 -->
  13. <div class="carousel-inner">
  14. ...
  15. </div>
  16. <!-- 设置轮播图片控制器 -->
  17. <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
  18. <span class="glyphicon glyphicon-chevron-left"></span>
  19. </a>
  20. <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
  21. <span class="glyphicon glyphicon-chevron-right"></span>
  22. </a>
  23. </div>

3. JS触发

  1. $(".carousel/#id").carousel({
  2. ...//参数
  3. });

JS属性:

属性名称 类型 默认值 描述
interval number 5000 幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环
pause string hover 默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放
wrap 布尔值 true 轮播是否持续循环

特殊调用方法:


十二、固定定位Affix

0. 引入

  1. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-affix.js"></script>

1. 简介

Affix插件是从Bootstrap v2.1版本新增的一个插件,其主要功能就是通过插件给某个元素(需要固定的元素)添加或删除affix类名,实现元素在浏览器窗口中固定(元素带有affix类名固定)和不固定(元素不带有affix类名)的效果。

Affix 效果常见的有以下三种:

2. 声明式触发

Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性data来触发。其主要包括两个参数:

注意:在body需声明监控:<body data-spy="scroll" data-target="sidebarMenu">


十三、自定义配置

Bootstrap框架自定义配置
在线自定义设置主要包括三个部分:

组件设置提供了公共样式Common CSS,UI组件Components和JS组件JavaScript components三个部分。



添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注