飛最近做的一個小項目需要用到一個模態框和一個圖片瀏覽插件，並把二者結合，剛好bootstrap有對應插件，以下是學習應用流程：
1. 引入js文件：
可以單個引入對應插件文件，或一次全部引入，飛是選擇的後者，原因:引入bootstrap.min.js文件並不大。
2. 先看模態框的效果，然後查看如何使用動態實例，
使用方法很簡單:
<1>直接複製動態實例的代碼（當然要起碼知道涉及到的一些類的作用，如.fade 類作用是彈出動畫效果）
<2>在你要點擊的元素上添加：data-toggle="modal" data-target="#myModal，之後點擊該元素就可以彈出模態框了。
<3>根據我的需要修改樣例的代碼（去除了模態框的頭部和尾部~~~）
<4>瀏覽效果還闊以~
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
飛的文章也會在本人的個人空間發佈：
http://flyingdream.sinaapp.com/