BootStrap系列：BootStrap插件

時間 2020-06-09

標籤 bootstrap 系列插件欄目 Bootstarp 简体版

原文原文鏈接

BootStrap插件

1、data 屬性

你能夠僅僅經過 data 屬性 API 就能使用全部的 Bootstrap 插件，無需寫一行 JavaScript 代碼。
關閉：

$(document).off('.data-api')
如需關閉一個特定的插件，在 data-api 命名空間前加上該插件的名稱做爲命名空間$(document).off('.alert.data-api')

常見的Bootstrap中的data-屬性：data-toggle、data-target、data-dismiss、data-slide-to、data-slide、data-ride
針對某個特定的插件，只需在data-api前面添加那個插件的名稱做爲命名空間：$(document).off('.alert.data-api’)

2、過渡效果（Transition）

使用案例

幻燈片或淡入效果的模態對話框 (Modal 模態框彈出)
淡出效果的標籤頁 (Tab 選型卡)
淡出效果的警告框 (Alert 彈出框)
幻燈片效果的輪播板 (Carousel 輪播)

3、模態框（Modal）http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

用法

經過 data 屬性：在控制器元素（好比按鈕或者連接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）
經過 JavaScript：使用這種技術，您能夠經過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框：$('#identifier').modal(options)

 1 <h2>建立模態框（Modal）</h2>
 2 <!-- 按鈕觸發模態框 -->
 3 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
 4 <!-- 模態框（Modal） -->
 5 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 6     <div class="modal-dialog">
 7         <div class="modal-content">
 8             <div class="modal-header">
 9                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
10                 <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
11             </div>
12             <div class="modal-body">在這裏添加一些文本</div>
13             <div class="modal-footer">
14                 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
15                 <button type="button" class="btn btn-primary">提交更改</button>
16             </div>
17         </div><!-- /.modal-content -->
18     </div><!-- /.modal -->
19 </div>

代碼講解

使用模態窗口，您須要有某種觸發器。您可使用按鈕或連接。這裏咱們使用的是按鈕。
<button> 標籤中，data-target="#myModal" 是想要在頁面上加載的模態框的目標。能夠在頁面上建立多個模態框，而後爲每一個模態框建立不一樣的觸發器。如今，很明顯，不能在同一時間加載多個模塊，但能夠在頁面上建立多個在不一樣時間進行加載。
在模態框中須要注意兩點：① .modal，用來把 <div> 的內容識別爲模態框。② .fade class。當模態框被切換時，它會引發內容淡入淡出。
aria-labelledby="myModalLabel"，該屬性引用模態框的標題。
屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發爲止（好比點擊在相關的按鈕上）。
<div class="modal-header">，modal-header 是爲模態窗口的頭部定義樣式的類。
class="close"，close 是一個 CSS class，用於爲模態窗口的關閉按鈕設置樣式。
data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這裏它被用於關閉模態窗口。
class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的主體設置樣式。
class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的底部設置樣式。
data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。

4、輪播（Carousel）

 1 <div id="myCarousel" class="carousel slide">
 2     <!-- 輪播（Carousel）指標 -->
 3     <ol class="carousel-indicators">
 4         <li data-target="#myCarousel" data-slide-to="0" 
 5  class="active"></li>
 6         <li data-target="#myCarousel" data-slide-to="1"></li>
 7         <li data-target="#myCarousel" data-slide-to="2"></li>
 8     </ol>   
 9     <!-- 輪播（Carousel）項目 -->
10     <div class="carousel-inner">
11         <div class="item active">
12             <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
13         </div>
14         <div class="item">
15             <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
16         </div>
17         <div class="item">
18             <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
19         </div>
20     </div>
21     <!-- 輪播（Carousel）導航 -->
22         <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
23             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
24             <span class="sr-only">Previous</span>
25         </a>
26         <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
27             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
28             <span class="sr-only">Next</span>
29         </a>
30     <!-- 控制按鈕 -->
31     <div style="text-align:center;">
32         <input type="button" class="btn start-slide" value="Start">
33         <input type="button" class="btn pause-slide" value="Pause">
34         <input type="button" class="btn prev-slide" value="Previous Slide">
35         <input type="button" class="btn next-slide" value="Next Slide">
36         <input type="button" class="btn slide-one" value="Slide 1">
37         <input type="button" class="btn slide-two" value="Slide 2">            
38         <input type="button" class="btn slide-three" value="Slide 3">
39     </div>
40 </div> 
41 <script>
42 $(function(){ 43         // 初始化輪播
44  $(".start-slide").click(function(){ 45  $("#myCarousel").carousel('cycle'); 46  }); 47         // 中止輪播
48  $(".pause-slide").click(function(){ 49  $("#myCarousel").carousel('pause'); 50  }); 51         // 循環輪播到上一個項目
52  $(".prev-slide").click(function(){ 53  $("#myCarousel").carousel('prev'); 54  }); 55         // 循環輪播到下一個項目
56  $(".next-slide").click(function(){ 57  $("#myCarousel").carousel('next'); 58  }); 59         // 循環輪播到某個特定的幀 
60  $(".slide-one").click(function(){ 61  $("#myCarousel").carousel(0); 62  }); 63  $(".slide-two").click(function(){ 64  $("#myCarousel").carousel(1); 65  }); 66  $(".slide-three").click(function(){ 67  $("#myCarousel").carousel(2); 68  }); 69  }); 70 </script>