Bootstrap3.3.7全面解读和Bootstrap4.0全面分析----------003（JavaScript插件的使用）

这一节我们来讲述，最重要的JavaScript插件这些内容，这节内容我们需要引入jq和Bootstrap.js两个文件才能实现。

这一节包括：过度效果，模态框，下拉菜单，标签页，工具提示，弹出框，警告框，按钮，carousel等等。里面涉及的主要就是在script的标签中代码的书写规定。闲话不说，开始介绍：过度效果Bootstrap介绍的比较简单，我们先不去理会，先从模态框开始

㈠模态框：

<!--jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中-->
<h1>模态框：</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
看我七十二变
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<br /><br /><br />
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
我是小的提示框，看看我的表演吧
<p>好好学习这样的技能<
4000
/p>
</div>
</div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
我是大的提示框，看看我的表演吧
<p>我是不是很厉害</p>
</div>
</div>
</div>

结果如图：



㈡工具提示：

<h1>工具提示：</h1>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>这里我们需要在script标签中引入下面代码：
$(function () {
$('[data-toggle="tooltip"]').tooltip();//工具提示
})结果如下：



㈢弹出框：

<h1>弹出框：</h1>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 左侧
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 顶部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 底部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 右侧
</button>它的JavaScript代码如下：
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover();//弹出框
})

</script>

结果如下：



㈣Collapse的使用：主要用于框子的显示和隐藏、

<h1>Collapse:</h1>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
看我七十二变的显示和隐藏，怎么样还可以吧。
</div>
</div>结果如下：



㈤轮播的实现：

<h1>轮播效果</h1>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="第一张">
<div class="carousel-caption">
第一张图片
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="第二张图片">
<div class="carousel-caption">
第二张图片
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="第三张图片">
<div class="carousel-caption">
第三张图片
</div>
</div>
</div>

<!-- 两个按键 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>效果如图所示：



其实对于bootstrop的JavaScript插件这部分，我倒觉得学习只是简单会用就可以了，很多动态的实现，更多的是使用JavaScript原生的来实现，并不会借助于这样的方式去达到目的，所以这个环节介绍的就没有特别的详细。对于bootstrop很多还是通过class的实现，只能算是一个UI的框架设计。至少我是这样想的。下一节来讲讲bootstrop4.0的一些改变和特点。