Bootstrap插件

作者: 墨马 | 来源:发表于2017-09-27 01:01 被阅读147次

插件概览

引用 Bootstrap 插件的两种方式

单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。使用前先确保弄清插件之间的依赖关系。
编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。
data属性
可以通过 data 属性 API 就能使用所有的 Bootstrap 插件，这是 Bootstrap 中的一等 API。
关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件

$(document).off('.data-api')
//关闭一个特定的插件，只需要在 data-api 命名空间前加上该插件的名称作为命名空间即可
$(document).off('.alert.data-api')

编程方式的API
所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为）

// 初始化为默认行为
$("#myModal").modal()    
 // 初始化为不支持键盘               
$("#myModal").modal({ keyboard: false })  
// 初始化并立即调用 show
$("#myModal").modal('show')

避免命名空间冲突
Bootstrap 插件可能需要与其他 UI 框架一起使用，如果不幸发生命名空间冲突，可以通过调用插件的 .noConflict 方法恢复其原始值。

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能                           
$.fn.bootstrapBtn = bootstrapButton

事件
Bootstrap 为大多数插件的独特行为提供了自定义事件。这些事件有两种形式：

动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
  if (!data) return e.preventDefault() 
})

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等（modal.js）

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                在这里添加一些文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
</button>

.modal，用来把 <div> 的内容识别为模态框
.fade class。当模态框被切换时，它会引起内容淡入淡出
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#myModal" 或 href="#myModal" 来指定要切换的特定的模态框（带有 id="myModal"）。

选项名称	类型/默认值	Data属性名称	描述
backdrop	boolean 或 string 'static' 默认值：true	data-backdrop	指定一个静态的背景，当用户点击模态框外部时不会关闭模态框
keyboard	boolean默认值：true	data-keyboard	当按下 escape 键时关闭模态框，设置为 false 时则按键无效
show	boolean默认值：true	data-show	当初始化时显示模态框

modal() 使用方法

$('#identifier').modal({
keyboard: false
})

$('#identifier').modal('hide')

事件

事件	描述
show.bs.modal	在调用 show 方法后触发
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
hide.bs.modal	当调用 hide 实例方法时触发
hidden.bs.modal	当模态框完全对用户隐藏时触发

$('#identifier').on('show.bs.modal', function () {
   // 执行一些动作...
   alert('hello');
})

下拉菜单插件

使用下拉菜单（Dropdown）插件，可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。（dropdown.js）

通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单
通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：

$('.dropdown-toggle').dropdown()

滚动监听

自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标（scrollspy.js）
添加监听

通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在

<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>

通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数

$('body').scrollspy({ target: '.navbar-example' })

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" 
                    data-target=".bs-js-navbar-scrollspy">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">教程名称</a>
        </div>
        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li><a href="#ios">iOS</a></li>
                <li><a href="#svn">SVN</a></li>
                <li class="dropdown">
                    <a href="#" id="navbarDrop1" class="dropdown-toggle" 
                       data-toggle="dropdown">Java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" 
                        aria-labelledby="navbarDrop1">
                        <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                        <li><a href="#ejb" tabindex="-1">ejb</a></li>
                        <li class="divider"></li>
                        <li><a href="#spring" tabindex="-1">spring</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
        TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
    </p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
    </p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
    </p>
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
    </p>
    <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
    </p>
</div>

方法
.scrollspy('refresh')：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。下面是使用该方法的语法

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

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" 
                    data-target=".bs-js-navbar-scrollspy">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">教程名称</a>
        </div>
        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#ios">iOS</a></li>
                <li><a href="#svn">SVN</a></li>
                <li class="dropdown">
                    <a href="#" id="navbarDrop1" class="dropdown-toggle" 
                       data-toggle="dropdown">
                        Java <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" 
                        aria-labelledby="navbarDrop1">
                        <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                        <li><a href="#ejb" tabindex="-1">ejb</a></li>
                        <li class="divider"></li>
                        <li><a href="#spring" tabindex="-1">spring</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
     style="height:200px;overflow:auto; position: relative;">
    <div class="section">
        <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
            × 删除该部分</a></small>
        </h4>
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
    </div>
    <div class="section">
        <h4 id="svn">SVN<small></small></h4>
        <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p>
    </div>
    <div class="section">
        <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
            × 删除该部分</a></small>
        </h4>
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
    </div>
    <div class="section">
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
    </div>
    <div class="section">
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p>
        <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p>
    </div>
</div>
<span id="activeitem" style="color:red;"></span>
<script type="text/javascript">
    $(function(){
        removeSection = function(e) {
            $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
                });
        }
        $("#myScrollspy").scrollspy();
        $('#myScrollspy').on('activate.bs.scrollspy', function () {
            var currentItem = $(".nav li.active > a").text();
            $("#activeitem").html("目前您正在查看 - " + currentItem);
        })
});
</script>

事件
activate.bs.scrollspy，每当一个新项目被滚动监听激活时，触发该事件

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

offset ；类型：number ；默认值：10；data属性data-offset；当计算滚动位置时，距离顶部的偏移像素。

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
            </button>
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><a href="#section1">Section 1</a></li>
                    <li><a href="#section2">Section 2</a></li>
                    <li><a href="#section3">Section 3</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#section41">Section 4-1</a></li>
                            <li><a href="#section42">Section 4-2</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>    

<div id="section1" class="container-fluid">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section2" class="container-fluid">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section3" class="container-fluid">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section41" class="container-fluid">
        <h1>Section 4 Submenu 1</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section42" class="container-fluid">
        <h1>Section 4 Submenu 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

标签页

把内容放置在标签页甚至是下拉菜单标签页中需要引用 tab.js

通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。
添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
</ul>

使用 Javscript 来启用标签页
标签页需要一个指向 DOM 中容器节点的 href

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

// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')

// 选取第一个标签页
$('#myTab a:first').tab('show')

// 选取最后一个标签页
$('#myTab a:last').tab('show')

// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')

淡入淡出效果
添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
             test1
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">test2</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" 
           data-toggle="dropdown">test3
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">1</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">2</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>test1内容</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>test2内容</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>test3-1内容</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>test3-2内容</p>
    </div>
</div>

事件	描述
show.bs.tab	该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页
shown.bs.tab	该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        // 获取已激活的标签页的名称
        var activeTab = $(e.target).text(); 
        // 获取前一个激活的标签页的名称
        var previousTab = $(e.relatedTarget).text(); 
    });

提示工具

用 CSS 实现动画效果，用 data 属性存储标题信息需要引用 tooltip.js

通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）

$('#identifier').tooltip(options)

如需使用该插件，必须使用 jquery 激活它
$(function () { $("[data-toggle='tooltip']").tooltip(); });

选项名称	类型	默认值	Data属性名称	描述
animation	boolean	默认值：true	data-animation	提示工具使用 CSS 渐变滤镜效果
html	boolean	默认值：false	data-html	向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text
placement	string/function	默认值：top	data-placement	规定如何定位提示工具（即 top/bottom/left/right/auto）。当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
*selector	string	默认值：false	data-selector	如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title	string/function	默认值：""	data-title	如果未指定 title 属性，则 title 选项是默认的 title 值
trigger	string	默认值：'hover focus'	data-trigger	定义如何触发提示工具： click/hover/focus/manual。您可以传递多个触发器，每个触发器之间用空格分隔。
content	string/function	默认值：'""	data-content	如果未指定 data-content 属性，则使用默认的 content 值
delay	number/object	默认值：0	data-delay	延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构delay:{ show: 500, hide: 100 }
*container	string /false	默认值：false	data-container	向指定元素追加提示工具。

方法

$(function () { $('.tooltip-show').tooltip('show');});
        $(function () { $('.tooltip-hide').tooltip('hide');});
        $(function () { $('.tooltip-destroy').tooltip('destroy');});
        $(function () { $('.tooltip-toggle').tooltip('toggle');});
        $(function () { $(".tooltip-options a").tooltip({html : true });
        });

事件

事件	描述
show.bs.tooltip	当调用 show 实例方法时立即触发该事件
shown.bs.tooltip	当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
hide.bs.tooltip	当调用 hide 实例方法时立即触发该事件
hidden.bs.tooltip	当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$(function () { $('.tooltip-show').tooltip('show');});
    $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
        alert("Alert message on show");
    })
});

弹出框

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图需要引用 popover.js，它依赖于工具提示（Tooltip）插件

通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部
通过 JavaScript：通过 JavaScript 启用弹出框(popover)
弹出框必须使用 jquery 激活它$(function () { $("[data-toggle='popover']").popover(); });

选项名称	类型	默认值	描述
animation	boolean	true	向弹出框应用 CSS 褪色过渡效果
html	boolean	false	向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text
placement	stringf/unction	top	规定如何定位弹出框（即 top/bottom/left/right/auto）当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边
selector	string	false	如果提供了一个选择器，弹出框对象将被委派到指定的目标
title	stringfun/ction	""	如果未指定 title 属性，则 title 选项是默认的 title 值
trigger	string	'hover focus'	定义如何触发弹出框： click/hover/focus/manual。您可以传递多个触发器，每个触发器之间用空格分隔
delay	number/object	0	延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。 delay:{ show: 500, hide: 100 }
container	string/false	false	向指定元素追加弹出框

 <button type="button" class="btn btn-warning" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="right"
            data-content="右侧的 Popover 中的一些内容">
        右侧的 Popover
    </button>

事件	描述	实例
show.bs.popover	当调用 show 实例方法时立即触发该事件	$('#mypopover').on('show.bs.popover', function () { // 执行一些动作...})
shown.bs.popover	当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）	$('#mypopover').on('shown.bs.popover', function () { // 执行一些动作...})
hide.bs.popover	当调用 hide 实例方法时立即触发该事件	$('#mypopover').on('hide.bs.popover', function () {// 执行一些动作...})
hidden.bs.popover	当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）	$('#mypopover').on('hidden.bs.popover', function () { // 执行一些动作...})

方法

事件

事件	描述	实例
show.bs.popover	当调用 show 实例方法时立即触发该事件	$('#mypopover').on('show.bs.popover', function () { // 执行一些动作...})
shown.bs.popover	当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）	$('#mypopover').on('shown.bs.popover', function () { // 执行一些动作...})
hide.bs.popover	当调用 hide 实例方法时立即触发该事件	$('#mypopover').on('hide.bs.popover', function () {// 执行一些动作...})
hidden.bs.popover	当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）	$('#mypopover').on('hidden.bs.popover', function () { // 执行一些动作...})

警告框

警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息

通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能
通过 JavaScript：通过 JavaScript 添加可取消功能$(".alert").alert()

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">
        &times;
    </a>
    <strong>警告！</strong>您的网络连接有问题。
</div>

方法	描述	实例
.alert()	该方法让所有的警告框都带有关闭功能	$('#identifier').alert();
.alert('close')	关闭所有的警告框	$('#identifier').alert('close');

方法

方法	描述	实例
.alert()	该方法让所有的警告框都带有关闭功能	$('#identifier').alert();
.alert('close')	关闭所有的警告框	$('#identifier').alert('close');

事件	描述	实例
close.bs.alert	当调用 close 实例方法时立即触发该事件	$('#myalert').bind('close.bs.alert', function () {// 执行一些动作...})
closed.bs.alert	当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。	$('#myalert').bind('closed.bs.alert', function () { // 执行一些动作...})

事件

事件	描述	实例
close.bs.alert	当调用 close 实例方法时立即触发该事件	$('#myalert').bind('close.bs.alert', function () {// 执行一些动作...})
closed.bs.alert	当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。	$('#myalert').bind('closed.bs.alert', function () { // 执行一些动作...})

按钮

引用 button.js
复选框

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 3
    </label>
</div>

单选按钮

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

加载状态
向 button 元素添加 data-loading-text="Loading..." 作为其属性
方法

方法	描述	实例
.button('loading')	当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值	$().button('loading')
.button('reset')	重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用	$().button('reset')
.button(string)	该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容	$().button(string)

<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
    <button type="button" class="btn btn-primary" 
            data-loading-text="Loading...">原始
    </button>
</div>
<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4" 
    data-complete-text="Loading finished">请点击我
</button>
<script type="text/javascript"> 
    $(function() { 
        $("#myButtons3 .btn").click(function(){
            $(this).button('loading').delay(1000).queue(function() {
                $(this).button('reset');
            });        
        });
    });  
    $(function() { 
        $("#myButton4").click(function(){
            $(this).button('loading').delay(1000).queue(function() {
                $(this).button('complete');
            });        
        });
    }); 
</script>

折叠

折叠（Collapse）插件可以很容易地让页面区域折叠起来需要引用 collapse.js

data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id。
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭

<button type="button" class="btn btn-primary" data-toggle="collapse"  data-target="#demo">
    简单的可折叠组件
</button>    
//.collapse隐藏内容。
//.collapse.in显示内容。
//.collapsing 当过渡效果开始时被添加，当过渡效果完成时被移除。
<div id="demo" class="collapse">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
    vice lomo.
</div>

方法	描述	实例
.collapse('toggle')	切换显示/隐藏可折叠元素	$('#identifier').collapse('toggle')
.collapse('show')	显示可折叠元素	$('#identifier').collapse('show')
.collapse('hide')	隐藏可折叠元素	$('#identifier').collapse('hide')

方法

方法	描述	实例
.collapse('toggle')	切换显示/隐藏可折叠元素	$('#identifier').collapse('toggle')
.collapse('show')	显示可折叠元素	$('#identifier').collapse('show')
.collapse('hide')	隐藏可折叠元素	$('#identifier').collapse('hide')

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
                lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo">
                点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
                lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseThree">
                点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
                lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseFour">
                点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
                </a>
            </h4>
        </div>
        <div id="collapseFour" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
                lomo.
            </div>
        </div>
    </div>
</div>
<script>
$(function () { $('#collapseFour').collapse({
        toggle: false
    })});
    $(function () { $('#collapseTwo').collapse('show')});
    $(function () { $('#collapseThree').collapse('toggle')});
    $(function () { $('#collapseOne').collapse('hide')});
</script>

事件	描述	实例
show.bs.collapse	在调用 show 方法后触发该事件	$('#identifier').on('show.bs.collapse', function () { // 执行一些动作...})
shown.bs.collapse	当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）	$('#identifier').on('shown.bs.collapse', function () { // 执行一些动作...})
hide.bs.collapse	当调用 hide 实例方法时立即触发该事件	$('#identifier').on('hide.bs.collapse', function () { // 执行一些动作...})
hidden.bs.collapse	当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）	$('#identifier').on('hidden.bs.collapse', function () { // 执行一些动作...})

轮播

轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式需要引用 carousel.js

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        //data-slide-to="0" 表示从左向右的 索引  
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            ![First slide](/wp-content/uploads/2014/07/slide1.png)
            <div class="carousel-caption">标题 1</div>
        </div>
        <div class="item">
            ![Second slide](/wp-content/uploads/2014/07/slide2.png)
            <div class="carousel-caption">标题 2</div>
        </div>
        <div class="item">
            ![Third slide](/wp-content/uploads/2014/07/slide3.png)
            <div class="carousel-caption">标题 3</div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" 
        data-slide="prev">&lsaquo;
    </a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next">&rsaquo;
       //  data-slide改变幻灯片相对于当前位置的位置
    </a>
</div>

选项名	类型	默认值	描述
interval	number	5000	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环
pause	string	hover	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环
wrap	boolean	true	轮播是否连续循环

选项

选项名	类型	默认值	描述
interval	number	5000	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环
pause	string	hover	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环
wrap	boolean	true	轮播是否连续循环

方法

方法	描述	实例
.carousel('cycle')	从左到右循环轮播项目	$('#identifier').carousel('cycle')
.carousel('pause')	停止轮播循环项目	$('#identifier').carousel('pause')
.carousel(number)	循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。	$('#identifier').carousel(number)
.carousel('prev')	循环轮播到上一个项目	$('#identifier').carousel('prev')
.carousel('next')	循环轮播到下一个项目	$('#identifier').carousel('next')

事件

事件	描述	实例
slide.bs.carousel	当调用 slide 实例方法时立即触发该事件	$('#identifier').on('slide.bs.carousel', function () {// 执行一些动作...})
slid.bs.carousel	当轮播完成幻灯片过渡效果时触发该事件	$('#identifier').on('slid.bs.carousel', function () {// 执行一些动作...})

附加导航

附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置引用 affix.js

通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动
*通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix）
通过CSS定位
附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态： .affix、.affix-top 和 .affix-bottom
在开始时，插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位
当滚动经过添加了附加导航（Affix）的元素时，应触发实际的附加导航（Affix）。此时 .affix 会替代 .affix-top，同时设置 position: fixed;
如果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为 .affix-bottom。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加 position: absolute

选项名：offset
类型：number /function
描述：当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数

Bootstrap插件

插件概览

模态框

下拉菜单插件

滚动监听

标签页

提示工具

弹出框

警告框

按钮

折叠

轮播

附加导航

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端开发

Bootstrap文集

Web前端之路

让前端飞

程序员

Web 前端开发

我爱编程