bootstrap插件 -- (笔记四)

最新推荐文章于 2022-05-03 19:28:14 发布

有所执着

最新推荐文章于 2022-05-03 19:28:14 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/lljxk2008/article/details/83271847

版权

本文详细介绍了Bootstrap的各种插件，包括模态框、下拉菜单、滚动监听、标签页、提示工具、弹出框、警告框、按钮、折叠和图片轮播。重点讲解了各插件的使用方法、属性、事件以及如何通过数据API和JavaScript进行操作。

摘要由CSDN通过智能技术生成

bootstrap插件:

Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动

利用 Bootstrap 数据 API, 可以在不编写任何代码的情况被触发

引用bootstrap插件: 引入bootstrap.js 或bootstrap.min.js

因为bootstrap插件依赖jquery, 所以在引入bootstrap.js 或bootstrap.min.js前保证引入jquery

模态框插件:

模态框（Modal）是覆盖在父窗体上的子窗体

子窗体可提供信息, 交互等

用法

在目标元素上设置属性data-toggle="modal" 和 data-target="#id"(要切换的目标模态框元素)

使用js或jquery代码 $('#identifier').modal(options)

<!-- 按钮触发模态框 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">	开始演示模态框 </button>
	
<!-- 模态框（Modal） -->
<div class="modal" id="myModal" role="dialog">
	
  <div class="modal-dialog">
		
	<div class="modal-content">
			
	  <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
		<h4 class="modal-title" id="myModalLabel"> 模态框标题 </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>
  </div>
</div>

.modal 用来把 <div> 的内容识别为模态框, 它的效果是遮挡住全屏, 还得在它里面添加modal-dialog

.fade 当模态框被切换时，它会引起内容淡入淡出

.modal-dialog为一个模态对话框设定基本样式

.modal-content用于包裹模态框内容设置样式

.close 用于为模态窗口的关闭按钮设置样式

.modal-head用于为模态窗口的标题设置样式

.modal-body用于为模态窗口的主体设置样式

.modal-footer用于为模态窗口的底部设置样式

data-toggle="modal"，HTML5 自定义的 data 属性用于打开模态窗口

data-dismiss="modal"，HTML5 自定义的 data 属性用于关闭模态窗口

data-keyboard可以设置按esc键时关闭模态框(默认是true), 如果设置data-keyboard='false'则esc键不能关闭模态框

模态框事件

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

当点击关闭后, 会触发hide.bs.model事件

<script>
    $(function () { 
        $('#myModal').on('hide.bs.modal', function () {
            alert('嘿，我听说您喜欢关闭模态框...');
        })
	   
        $('#myModal').on('shown.bs.modal', function () {
            alert('嘿，我听说你喜欢打开模态框...');
        })
    });
</script>

这里需要清楚一点: 点关闭是data-dismiss='modal'的功能, 这个功能执行后, 也就触发上述的hidden.bs.modal事件

下拉菜单:

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

同模态框(data-toggle='modal')类似, 这里向目标元素添加 data-toggle="dropdown" 来切换下拉菜单

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

菜单栏中使用

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li> 
	
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown">
            Java <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Swing</a></li>
            <li><a href="#">jMeter</a></li>
            <li><a href="#">EJB</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
        </ul>
    </li>

    <li><a href="#">PHP</a></li>
</ul>

滚动监听插件:

其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active

向您想要监听的元素（可能是 body）添加 data-spy="scroll", 然后添加属性 data-target

<nav id="navbar-example" class="navbar navbar-default" 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">
                    <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>

删除某些滚动项

<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="#" class='del'>	&times; 删除该部分</a></small> </h4>
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统</p>
	</div>
    <div class="section">
        <h4 id="svn">SVN<small></small></h4>
        <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件</p>
    </div>
    <div class="section">
        <h4 id="jmeter">jMeter<small><a href="#" class='del'> &times; 删除该部分</a></small</h4>
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
    </div>
    <div class="section">
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构</p>                
    </div>
    <div class="section">
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一个开源的 Java 平台</p>
        <p>Spring 框架最初是由 Rod Johnson 编写的</p>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        $('.del').on('click', function(){
            $(this).parents('.section').remove();
        })
    });
</script>

定位当前浏览的位置

span是加上去的标签, 指示当前浏览的位置信息

<span style="color:red;" id="current-view"></span>
<script type="text/javascript">
    $(function(){
        $('.del').on('click', function(){
            $(this).parents('.section').remove();
        })
		
        $('#myScrollspy').on('activate.bs.scrollspy', function(){
            var current_item = $('nav li.active > a').text();
            $('#current-view').html("您目前正在浏览--" + current_item);
        })
    });
</script>

注: $("...").text()用于获取元素内容, 如果$("...")是多个元素, 则获取到的内容会拼接在一起

如上的下拉菜单, 由激活时(包含下拉项), 所以使用$("...").text()获取到的内容如下:

这样就相当于精准定位浏览的目标

垂直滚动

可以水平滚动, 也可以垂直滚动, 还可以对整个body滚动(很多页面都是对整个body滚动)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<div class="container">
    <div class="row">
        <nav class="col-sm-3" id="myScrollspy">
        <div class="container-fluid"> 
            <div class="container-fluid"> 
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><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>		
        </nav>

        <div class="col-sm-9">
            <div id="section1" style="height:200px;background-color:blue">    
                <h1>Section 1</h1>
            </div>
            <div id="section2" style="height:200px;background-color:red"> 
	            <h1>Section 2</h1>
            </div>        
            <div id="section3" style="height:200px;background-color:black">         
                <h1>Section 3</h1>
            </div>
            <div id="section41" style="height:200px;background-color:pink">         
                <h1>Section 4-1</h1>
            </div>      
            <div id="section42" style="height:200px;background-color:green">         
                <h1>Section 4-2</h1>
            </div>
        </div>
    </div>
</div>

</body>

标签页(菜单栏):

为要切换的元素添加 data-toggle="tab" 属性(切换时, 显示相应的内容)

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab"> 菜鸟教程</a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" 
            data-toggle="dropdown">Java <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>
            菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱    
            好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。
        </p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>
            iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod     
            Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑    
            上，iOS 是苹果的移动版本。
        </p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
	</div>
    <div class="tab-pane fade" id="ejb">
        <p>
            Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署        
            在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>

标签页中使用show显示指定项(也可以使用class='active'指定)

<script>
    $(function () {
        $('#myTab li:eq(1) a').tab('show');
    });
</script>

标签页事件

某标签页激活(显示)时, 触发 show.bs.tab 事件

如果有下拉菜单, 会具体到下拉菜单中的项

事件对象中的target表示当前被激活的标签项, relatedTarget表示当前激活项的前一个激活项

$(function(){
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // 获取当前标签页的内容
        var activeTab = $(e.target).text(); 
        // 获取前一个激活的标签页的内容
        var previousTab = $(e.relatedTarget).text(); 
        alert(activeTab);
        alert(previousTab);
    });
});
</script>

提示工具插件:

提示工具插件就是当用鼠标移到到元素上面时, 它显示提示文字

data-toggle='tooltip' 表示添加提示工具

title提示的内容

data-placement提示内容的方向(包括上下左右)

<body>
    <a href="#" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
    <a href="#" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">向左的 Tooltip</a>.
    <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">向上的 Tooltip</a>.
    <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">向下的 Tooltip</a>.
    <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">向的 Tooltip</a>
	
    <br>

    <button type="button" class="btn btn-default" data-toggle="tooltip"  title="默认的 Tooltip">
        默认的 Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">
        左侧的 Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">
        顶部的 Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">
        底部的 Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">
        右侧的 Tooltip
    </button>
    <script>
        $(function () { 
            $("[data-toggle='tooltip']").tooltip();
        });
    </script>

</body>

要使提示工具正常有效, 需要在脚本中使用tooltip函数(如上, 如下)

<script>
    $(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});
    });
</script>

show.bs.tooltip事件

当鼠标移入时触发, 前题是要先使提示工具正常有效( 即要使用tooltip函数 )

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

弹出框:

弹出框（Popover）与工具提示（Tooltip）类似，都提供一个扩展的视图

弹出框有两个上下两个部份(工具提示只有一个部份)

title包含的是上部份的内容, data-content包含的是下部份的内容

和工具提示一样(tooltip函数), 需要在脚本中使用popover函数

<div class="container" style="padding: 100px 50px 10px;" >
    <button type="button" class="btn btn-default" title="Popover title" data-toggle="popover" 
        data-placement="left" data-content="左侧的 Popover 中的一些内容">
        左侧的 Popover
    </button>
    <button type="button" class="btn btn-primary" title="Popover title" data-toggle="popover" 
        data-placement="top" data-content="顶部的 Popover 中的一些内容">
        顶部的 Popover
    </button>
    <button type="button" class="btn btn-success" title="Popover title" data-toggle="popover"
        data-placement="bottom" data-content="底部的 Popover 中的一些内容">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning" title="Popover title" data-toggle="popover" 
        data-placement="right" data-content="右侧的 Popover 中的一些内容">
        右侧的 Popover
    </button>
</div>
<script>
$(function () { 
    $("[data-toggle='popover']").popover();
});
</script>

</body>

相应的隐藏 / 显示函数

<script>
    $(function () { 
        $('.popover-show').popover('show');
    });
    $(function () { 
        $('.popover-hide').popover('hide');
    });	
    $(function () { 
        $('.popover-destroy').popover('destroy');
    });
    $(function () { 
        $('.popover-toggle').popover('toggle');
    });
    $(function () { 
        $(".popover-options a").popover({html : true });
    });
</script>

弹出框事件(shown.bs.popover)

<script>
    $(function () { 
    $('.popover-show').popover('show');
    });
    $(function () { 
        $('.popover-show').on('shown.bs.popover', function () {
            alert("当显示时警告消息");
        })
    });
</script>

警告框:

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

可以向所有的警告框消息添加可取消（dismiss）功能

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

可以在脚本中使用函数关闭警告框(带上close参数)

$(function(){
    $(".close").click(function(){
        $("#myAlert").alert('close');
        $("#myAlert2").alert('close');
    });
});
</script>

警告框事件

当关闭警告框时, 触发事件closed.bs.alert

<script type="text/javascript">
$(function(){
    $("#myAlert").bind('closed.bs.alert', function () {
        alert("警告消息框被关闭。");
    });
});
</script>

按钮插件:

按钮的加载状态

只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性

在脚本中对其使用button函数, 参数为loading

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 
    加载状态
</button>
<script>
    $(function() {
        $(".btn").click(function(){
            $(this).button('loading');
        });
    });  
</script>

切换函数

button('toggle')按压与松开的状态

button('loading')加载状态

button('reset')恢复状态

button('complate')完成状态

<script type="text/javascript">
    $(function () {
        $("#myButtons1 .btn").click(function(){
            $(this).button('toggle');
        });
    });
    
    $(function() { 
        $("#myButtons2 .btn").click(function(){
            $(this).button('loading').delay(1000).queue(function() {
            });        
        });
    });   
	
    $(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>

折叠插件:

data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。

href 或 data-target 属性添加目标组件的 id。

data-parent 属性可以互斥其它的折叠效果(即要把折叠指示到同一个元素)

<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 部分
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-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-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    点击我进行展开，再次点击我进行折叠。第 2 部分
                </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>

简单的折叠组件(没属性data-parent="#accordion" )

<body>
    <button type="button" class="btn btn-primary" data-toggle="collapse" 
        data-target="#demo">
        简单的可折叠组件
    </button>

    <div id="demo" class="collapse in">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
    </div>
</body>

折叠动作函数

<script type="text/javascript">
    $(function () { 
        $('#collapseFour').collapse({toggle: false});
        $('#collapseTwo').collapse('show');
        $('#collapseThree').collapse('toggle');
        $('#collapseOne').collapse('hide');
    });
</script>

事件

show.bs.collapse, shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse

<script type="text/javascript">
    $(function () { 
        $('#collapseexample').on('show.bs.collapse', function () {
            alert('嘿，当您展开时会提示本警告');
        })
    });
</script>

图片轮播:

<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>
    </ol>   
	
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
	
    <!-- 轮播（Carousel）左右导航 -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <!-- 字体图标(向左) -->
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <!-- 字体图标(向右) -->
        <span class="glyphicon glyphicon-chevron-right"></span>	
    </a>
</div>

幻灯片标题

通过 .item 内的 .carousel-caption 元素向幻灯片添加标题

只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化

<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
	<div class="item active">
		<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
		<div class="carousel-caption">标题 1</div>
	</div>
	<div class="item">
		<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
		<div class="carousel-caption">标题 2</div>
	</div>
	<div class="item">
		<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
		<div class="carousel-caption">标题 3</div>
	</div>
</div>

属性

data-interval 自动循环每个项目之间延迟的时间量, 默认值5000毫秒

data-ride="carousel"页面加载后自动轮播

<div id="myCarousel" class="carousel slide"  data-interval='100' data-ride="carousel">

函数(可通过按钮控制轮播图)

<script>
    $(function(){
        // 初始化轮播
        $(".start-slide").click(function(){
            $("#myCarousel").carousel('cycle');
        });
        // 停止轮播
        $(".pause-slide").click(function(){
            $("#myCarousel").carousel('pause');
        });
        // 循环轮播到上一个项目
        $(".prev-slide").click(function(){
            $("#myCarousel").carousel('prev');
        });
        // 循环轮播到下一个项目
        $(".next-slide").click(function(){
            $("#myCarousel").carousel('next');
        });
        // 循环轮播到某个特定的帧 
        $(".slide-one").click(function(){
            $("#myCarousel").carousel(0);
        });
        $(".slide-two").click(function(){
            $("#myCarousel").carousel(1);
        });
        $(".slide-three").click(function(){
            $("#myCarousel").carousel(2);
        });
    });
</script>

轮播事件(切换图片时触发)

slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件

slide.bs.carousel 当调用 slide 实例方法时立即触发该事件

<script>
    $(function(){
        $('#myCarousel').on('slide.bs.carousel', function () {
            alert("当调用 slide 实例方法时立即触发该事件。");
        });
    });
</script>

附加导航:

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

只需要向需要监听的元素添加 data-spy="affix"

使用偏移来定义何时切换元素的锁定和移动 (如下ul元素的data-offset-top)

<body data-spy="scroll" data-target="#myScrollspy">
    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap Affix</h1>
        </div>
        <div class="row">
            <div class="col-xs-3" id="myScrollspy">
                <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                    <li class="active"><a href="#section-1">第一部分</a></li>
                    <li><a href="#section-2">第二部分</a></li>
                    <li><a href="#section-3">第三部分</a></li>
                    <li><a href="#section-4">第四部分</a></li>
                    <li><a href="#section-5">第五部分</a></li>
                </ul>
            </div>
            <div class="col-xs-9">
                ...
            </div>
        </div>
    </div>
</body>

可以通过 JavaScript 手动为某个元素添加附加导航

$('#myAffix').affix({
    offset: {
        top: 100, 
        bottom: function () {
            return (this.bottom = $('.bs-footer').outerHeight(true));
        }
    }
})