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

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)

模态弹出框含modal、modal-dialog和modal-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-toggle和data-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>
  13.     <!-- 设置轮播图片 -->
  14.     <div class="carousel-inner">
  15.         ...
  16.     </div>
  18.     <!-- 设置轮播图片控制器 -->
  19.     <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
  20.         <span class="glyphicon glyphicon-chevron-left"></span>
  21.     </a>
  22.     <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
  23.         <span class="glyphicon glyphicon-chevron-right"></span>
  24.     </a>
  25. </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三个部分。

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