标签：boostrap插件 bootstrap js插件学习 bootstrap使用方法
飞最近做的一个小项目需要用到一个模态框和一个图片浏览插件，并把二者结合，刚好bootstrap有对应插件，以下是学习应用流程：
1. 引入js文件：
可以单个引入对应插件文件，或一次全部引入，飞是选择的后者，原因:引入bootstrap.min.js文件并不大。
2. 先看模态框的效果，然后查看如何使用动态实例，
使用方法很简单:
<1>直接复制动态实例的代码（当然要起码知道涉及到的一些类的作用，如.fade 类作用是弹出动画效果）
<2>根据我的需要修改样例的代码（去除了模态框的头部和尾部~~~）
<3>浏览效果还阔以~
3. 看Carousel的用法：
使用方法：
<1>同2的<1>
<2>修改图片路径，查看效果，可以使用就ok
4. 根据需求具体修改。发现引入的模态框会根据图片大小变换大小——据设计师说会影响体验效果，所以就加以修改：
固定了模态框的内容——浏览图片的Carousel高度（.carousel设置为height: 600px）
5. 最终效果（弹出框浏览图片，点击弹出框外面的地方，弹出框就消失）：
<!-- Modal -->
<div class="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="carousel-example-generic"class="carouselslide"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>
</ol>
<!-- Wrapper forslides -->
<div class="carousel-inner"role="listbox">
<div class="itemactive">
<img src="1.png">
</div>
<div class="item">
<img src="BG_1.png">
</div>
</div>
<!-- Controls-->
<a class="leftcarousel-control"href="#carousel-example-generic"role="button"data-slide="prev">
<span class="glyphiconglyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="rightcarousel-control"href="#carousel-example-generic"role="button"data-slide="next">
<span class="glyphiconglyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
参考网址：http://v3.bootcss.com/javascript/#carousel
飞的文章也会在本人的个人空间发布：
bootstrap学习——javascript插件篇,布布扣,bubuko.com
标签：boostrap插件 bootstrap js插件学习 bootstrap使用方法
原文地址：http://blog.csdn.net/u014761420/article/details/38316989
