一、Bootstrap 的 JavaScript 插件
1.data属性
Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。例如：
$(".btn.danger").button("toggle").addClass("fat")
所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为），如下所示：
// 初始化为默认行为
$("#myModal").modal()
// 初始化为不支持键盘
$("#myModal").modal({ keyboard: false })
// 初始化并立即调用 show
$("#myModal").modal('show')
每个插件在 Constructor 属性上也暴露了其原始的构造函数：
$.fn.popover.Constructor。如果您想获取某个特定插件的实例，可以直接通过页面元素获取：
$('[rel=popover]').data('popover').
二、动画过渡
Bootstrap使用的动画过渡效果全部使用的时CSS3语法，所以IE6~IE8不能使用的时候可以单独引入trasition.js。不过在Bootstrap中一般不会直接使用动画过渡插件，而是把它的功能融入到其他插件中使用，例如：
1.模态框(Modal)的滑动的渐变效果，
2.选项卡(Tab)的渐变效果，
3.旋转轮播(Carousel)的滑动效果等。
三、模态框
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等(如果想要单独引用该插件的功能，那么需要引用 modal.js。或者可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
)。
image.png
image.png
image.png
image.png
image.png
image.png
三、选项卡
image.png
image.png
淡入淡出效果
如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="svn">...</div>
<div class="tab-pane fade" id="ios">...</div>
<div class="tab-pane fade" id="java">...</div>
</div>
方法
.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
.....
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
.....
</div>
<script>
('#myTab a:last').tab('show')
})
</script>
事件
下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。
image.png
四、旋转轮播
轮播图的具体结构：
div id="myCa" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<img src="image/img1.jpg" alt=""/>
</div>
<div class="item">
<img src="image/img2.jpg" alt=""/>
</div>
<div class="item">
<img src="image/img3.jpg" alt=""/>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#myCa" data-slide-to="0" class="active"></li>
<li data-target="#myCa" data-slide-to="1"></li>
<li data-target="#myCa" data-slide-to="2"></li>
</ol>
<a class="left carousel-control" href="#myCa" data-slide="prev">
</a>
<a class="right carousel-control" href="#myCa" data-slide="next">
</a>
</div>
五、滚动监听
实例代码
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 滚动监听（Scrollspy）插件</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<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>
</body>
</html>```
网友评论