bootstrap学习——javascript插件篇

飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件，并把二者结合，刚好bootstrap有相应插件，下面是学习应用流程：

1.    引入js文件：

能够单个引入相应插件文件，或一次所有引入。飞是选择的后者，原因:引入bootstrap.min.js文件并不大。

2.    先看模态框的效果，然后查看怎样使用动态实例。

用法非常easy:

<1>直接复制动态实例的代码（当然要起码知道涉及到的一些类的作用，如.fade 类作用是弹出动画效果）

<2>在你要点击的元素上加入：data-toggle="modal" data-target="#myModal，之后点击该元素就能够弹出模态框了。

<3>依据我的须要改动例子的代码（去除了模态框的头部和尾部~~~）

<4>浏览效果还阔以~

3. 看Carousel的使用方法：

用法：

<1>同2的<1>

<2>改动图片路径。查看效果，能够使用就ok

4. 依据需求详细改动。发现引入的模态框会依据图片大小变换大小——据设计师说会影响体验效果。所以就加以改动：

固定了模态框的内容——浏览图片的Carousel高度（.carousel设置为height: 600px）

5. 终于效果（弹出框浏览图片。点击弹出框外面的地方，弹出框就消失）：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDc2MTQyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="0" height="0" alt="">

相关代码：

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

飞的文章也会在本人的个人空间公布：

http://flyingdream.sinaapp.com/