Bootstrap 手册 07 - JS 组件篇

1. 动画过渡 Transition

Bootstrap 对一些组件默认使用过渡动画效果，这种效果是由 CSS3 实现，故不支持 IE 6-8。

• 模态弹窗 (Modal) 的滑动和渐变效果；
• 选项卡 (Tab) 的渐变效果；
• 警告框 (Alert) 的渐变效果；
• 图片轮播 (Carousel) 的滑动效果；

2. 模态弹窗 Modal

Bootstrap 模态弹窗通常有以下表现——

• 点击某按钮后弹窗，弹窗内容为文件描述、图片等，也可带有按钮操作；

• 模态弹窗固定在浏览器中；

• 模态弹窗宽度自适应，且 .modal-dialog 水平居中；

• 当渲染视界宽度大于 768px 时，模态弹出窗的宽度为 600px；

• 窗体弹出时，底部有一层透明的黑色蒙版效果；

• .modal>.modal-dialog>.modal-content>(.modal-header+.modal-body+.modal-footer)

2.1. 弹窗结构

模态弹窗的真正内容都放置在 .modal-content 中，其主要设置了弹窗的边框、边距、背景色和阴影等样式。包括三个部分——

• 弹出框头部 .modal-header：主要包括标题和关闭按钮；
• 弹出框主体 .modal-body：弹出框的主要内容；
• 弹出框脚部 .modal-footer：主要放置操作按钮；

其中，.modal-footer 通常用来放置按钮，已对其包含的按钮做了一定的样式处理。

2.2. 弹窗尺寸

• .modal-dialog.modal-lg；
• .modal-dialog.modal-sm；

2.3. 弹窗动画

• .modal.fade 模态弹窗将有一个过渡动画效果；

2.4. 弹窗触发

1) 通过属性触发弹窗

1. 为触发按钮设置 [data-toggle="modal" data-target]；
2. 其中 data-target 属性指定为模态弹窗 .modal 的 ID 或者 CSS 选择符；
3. 若使用 a 元素作为触发模态弹窗的按钮，则可用 href 属性替代 data-target；

弹窗属性触发 data- 参数设置一览表

2) 通过 JS 触发弹窗

a. 属性设置

弹窗 JS 触发属性一览表

• 示例：

$(function(){
    $('.btn').click(function () {
        $('#mymodal‘’).modal({
            keyboard: false
        });
    });
});

b. 参数设置

参数	使用方法	描述
toggle	$('#mymodal').modal('toggle')	触发时，反转模态弹窗的状态。若模态弹窗显示，则关闭；反之则显示
show	$('#mymodal').modal('show')	触发时，显示模态弹窗
hide	$('#mymodal').modal('hide')	触发时，关闭模态弹窗

c. 事件设置

事件类型	描述
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) {
        // 处理代码...
    }
)

---

3. 下拉菜单 Dropdown

下拉菜单一般出现在导航条中。

• ul.nav.navbar-nav>li.dropdown>(a[data-toggle="dropdown" data-target="#"]>b.caret+ul.dropdown-menu>li>a)

3.1. 下拉菜单触发

1) 通过属性触发下拉菜单

• 对菜单项链接或按钮添加 data-toggle="dropdown" 属性；
• 为避免点击链接导致页面跳到顶部，可用 data-target="#" 替代
  href="#"；

2) 通过 JS 触发下拉菜单

• dropdown() 方法：单击按钮后弹出菜单，再次单击时收起菜单：

$(function(){
  $('.dropdown-toggle').dropdown();
})

• 使用 toggle 参数：当菜单隐藏时，单击后显示菜单；反之，当菜单显示时，单击后隐藏菜单。

$('.dropdown-toggle').one('click',function(){
  $(this).dropdown('toggle');
})

---

4. 滚动监视 Scrollspy

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

4.1. 滚动监视触发

1) 通过属性触发滚动监视

1. 导航区设置：ul.nav#nav>(li.active>a[href="#id0"])+(li>a[href="#id1"])+...；
2. 监控区设置：[data-target="#nav" data-spy="scroll" data-offset="60"]>#id0+#id1+...；
3. 监控区 data-target 属性需与导航区 .nav 的 ID 一致，监控区子项的 ID 则需与导航区子项中的 href 属性一一对应；
4. 定义监控区样式，设置容器以产生垂直滚动条：

.scrollspy {
  height: 500px;
  font-size: 20px;
  overflow: auto;
}

• 可在 body 中加监控：将 data-spy、data-target 等追加在 body 中，但导航条必须设置为顶部固定样式 .navbar.navbar-default.navbar-fixed-top；

2) 通过 JS 触发滚动监视

• 直接触发：

$(function(){
  $('#scrollspy').scrollspy({
    target: '#nav'
  });
})

• scrollspy() 除 target 参数外，还有一个 offset 参数，其默认值为
  10；
• 滚动监控所作用的 DOM 有增删页面元素的操作时，需要调用
  scrollspy('refresh') 方法：

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

需要注意的是，该方法只对属性触发有效。

---

5. 选项卡 Tab

5.1. 选项卡触发

1) 通过属性触发选项卡

• 与菜单结合的选项卡：ul.nav.nav-tabs>li(.active)>a[data-toggle="tab" href="#id"]；
• 胶囊式导航 .nav-pill 也有选项卡的功能：ul.nav.nav-pills>li(.active)>a[data-toggle="pill" href="#id"]；
• 底部的可切换面板：.tab-content>#id.tab-pane.fade(.in.active)
• 添加 fade 类名可使面板的隐藏与显示在切换的过程效果更流畅，产生渐入的效果；在添加 fade 类名的元素要追加 in 类名才会显示；

2) 通过 JS 触发选项卡

在选项的单击事件中调用 tab('show') 方法，显示对应的标签面板内容。（此方法不再需要 data-toggle="tab" 或 data-toggle="pill" 自定义属性）——

$(function(){
  $('#myTab a').click(function (ev) {
    ev.preventDefault();
    $(this).tab('show');
  });
})

---

6. 提示框 Tooltip

6.1. 提示框触发

Bootstrap 提示框不能直接由自定义属性触发，需要通过 JS 触发。

1) 设置提示框属性

1. 常用 a 或 button：[data-toggle="tooltip"]；
2. 设置 data-original-title 或 title 用于存放提示信息（若同时设置，则 data-original-title 优先级高于 title）；
3. 设置 data-placement 控制提示信息框的四种位置：top、right、bottom 和 left；

提示框属性触发 data- 参数设置一览表

2) 通过 JS 触发提示框

• 指定属性周全的元素触发——

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

• 指定元素，追加参数后触发——

$(function(){
  $('#myTooltip').tooltip({
    title: '我是一个提示框，我在顶部出现',
    placement: 'top'
  });
});

弹窗 JS 触发属性一览表

---

7. 弹出框 Popover

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

7.1. 弹出框触发

与提示框一样，弹出框也只能通过 JS 触发。

1) 设置弹出框属性

1. 常用 a 或 button：[data-toggle="popover" data-original-title="提示信息" data-placement=""]；
2. 比提示框多出 data-content="提示内容" 属性；

弹出框属性触发 data- 参数设置一览表

2) 通过 JS 触发弹出框

• 指定属性周全的元素触发——

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

• 指定元素，追加参数后触发——

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

---

8. 警告框 Alert

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

8.1. 通过属性关闭警告框

<div class="alert alert-success" role="alert">
  <button class="close" data-dismiss="alert" type="button" data-target>×</button>
  <p>恭喜您操作成功！</p>
</div>

• 关闭按钮，不一定非要用 X，可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有 data-dismiss="alert" 属性即可。
• 关闭按钮时，首先会查找 data-target 属性，再查找 href 属性，如果关闭按钮都没有定义这两个属性，就会操作其父元素。即，关闭按钮不在
  .alert 容器内时，只要关闭按钮的 data-target（或者 a 元素的
  href）属性值与 .alert 容器 ID 一致，则关闭元素放在容器外也可以关闭警告框。

8.2. 通过 JS 关闭警告框

$(function(){
  $('#close').on('click', function(){
    $(this).alert('close');
  });
});

---

9. 按钮 Button

9.1. 按钮加载状态

a) 通过属性提供单击加载状态

<button
  class="btn btn-primary"
  id="loaddingBtn"
  data-loading-text="正在加载中,请稍等..."
  type="button" >
    加载
</button>

b) 通过 JS 提供单击加载状态

$(function(){
  $('#loaddingBtn').click(function () {
    $(this).button('loading');
  });
});

9.2. 单选按钮

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

9.3. 复选按钮

• .btn-group[data-toggle="buttons"]>label>input#id[type="checkbox" name]

9.4. 按钮状态切换

a) 通过属性切换按钮状态

• button[data-toggle="button"]

b) 通过 JS 切换按钮状态

• 切换按钮状态（得到焦点）：

$('#myButton').button('toggle');

• 重新恢复按钮：

$('#myButton').button('reset');

• 任意参数：

$('#myButton').button('任意字符参数名');

可替换 data-任意字符参数名-text 的属性值为「按钮上显示的文本值」。

---

10. 折叠 Collapse

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

10.1. 声明式触发

• #accordion.panel-group>.panel.panel-accordion.panel-default>(.panel-heading>hn.panel-title>a[href="#id" / data-target="#id" data-toggle="collapse" data-parent="#accordion"])+(#id.panel-collapse>.panel-body)
• .panel-collapse 一级追加 collapse 类名后可使之不可视，按需追加；默认打开的项则再追加 in 类名；

---

11. 图片轮播 Carousel

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

• 轮播图片
• 轮播图片计数器
• 轮播图片控制器

• #id.carousel.slide>{[ol.carousel-indicators>(li(.active))]+
  .carousel-inner>.item(.active)>a>img}
• 若要添加图片文字说明，可在 img 后添加：

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

• 前后控制器代码（放置在最后）：

<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>

11.2. 通过属性触发图片轮播

• data-ride="carousel"；
• data-target="#id"：取值 carousel 定义的 ID 名或者其他样式识别符；
• data-slide="prev/next"：该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href="#id"，取值为容器 carousel 的 ID 名或其他样式识别符；
• data-slide-to：用来传递某个帧的下标，取数值，可直接跳转到这个指定的帧（下标从 0 开始计）。
• 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>

11.3. 通过 JS 触发图片轮播

$('.carousel/#id').carousel({
  ...// 参数
});

• JS 属性一览表：

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

• 特殊调用方法：
  • .carousel('cycle')：从左向右循环播放；
  • .carousel('pause')：停止循环播放；
  • .carousel('number')：循环到指定的帧，下标从 0 开始；
  • .carousel('prev')：返回到上一帧；
  • .carousel('next')：下一帧；

---

12. 固定定位 Affix

Affix 的主要功能是使某个需要固定的元素在浏览器窗口中固定（元素带有 affix 类名固定）和不固定（元素不带有 affix 类名）的效果。

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

• 顶部固定
• 侧边栏固定
• 底部固定

12.1. 通过属性触发固定定位

• data-spy="affix"：表示元素固定不变的；
• data-offset="整数值"：表示元素 top 和 bottom 的值都是该数值，其包括两种方式——data-offset-top 和 data-offset-bottom，可单独以这两种方式表现；
• 注意：需声明监控：

<body data-spy="scroll" data-target="sidebarMenu">

---

13. 自定义配置

Bootstrap 框架自定义配置主要包括三个部分——

• Bootstrap 组件
• Bootstrap 插件
• Bootstrap 的 LESS 版本变量设置

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

---