bootstrap學習——javascript外掛程式篇，bootstrap外掛程式

bootstrap學習——javascript外掛程式篇，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

飛的文章也會在本人的個人空間發布：

http://flyingdream.sinaapp.com/

bootstrap內建的javascript外掛程式，運行不出效果，指教

1，查看文法有無錯誤
2，查看console裡面有沒有錯誤提示
3，查看檔案引用路徑是否正確
 
bootstrap該怎學習，一般按什步驟，我看到它的網站感覺有點亂，還有很多相關的開源架構？

建議一般先學會排版布局吧。這個是最最有用的。從最基本的bootstrap架構開始學習。首頁上的其他一些都是擴充性的架構可以先不學。等完全瞭解了bootstrap基本的一些排版布局以及樣式，學習其他的也就不難了。其實bootstrap學習起來還是很簡單的吧。布局的話就是百分比布局和柵欄式布局為主。其他的類似 按鈕 .btn 報錯提示 .alert-block 都是利用了組合式的class如 。.btn .btn-success就是綠色按鈕。.btn+尾碼（其實就是一個色系）。個人任為bootstrap最強大的一點就是組合式class，隨心搭配。從排版布局到css最後到bootstrap.js（個人認為使用的幾率不大，相容性和實用性並不是最好。js初學者用用很不錯。常用的也就那幾個，畢竟萬惡的ie在國內還是根深蒂固的）按照這個步驟看完，再自己做一些小的demo很快上手的。祝你學習順利。