Bootstrap 摺疊和輪播外掛
阿新 • • 發佈:2019-02-18
一、摺疊外掛
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 點選我進行展開,再次點選我進行摺疊。第 1 部分 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div>
程式碼解釋:
- data-toggle="collapse" 新增到您想要展開或摺疊的元件的連結上。
- href 或 data-target 屬性新增到父元件,它的值是子元件的 id。
- data-parent 屬性把摺疊面板(accordion)的 id 新增到要展開或摺疊的元件的連結上。當可摺疊專案顯示時,指定父元素下的所有可摺疊的元素將被關閉。
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> 簡單的可摺疊元件 </button> <div id="demo" class="collapse in"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div>
二、輪播外掛
Bootstrap 輪播外掛是一種靈活的響應式的向站點新增滑塊的方式。另外,內容也是足夠靈活的,可以是影象、內嵌框架、視訊或者其他您想要放置的任何型別的內容。
<div id="myCarousel" class="carousel slide"> <!-- 輪播(Carousel)指標 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 輪播(Carousel)專案 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">標題 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">標題 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">標題 3</div> </div> </div> <!-- 輪播(Carousel)導航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">› </a> </div>
1. 用法
(1)通過 data 屬性:使用 data 屬性可以很容易控制輪播的位置。
- 屬性 data-slide 接受關鍵字 prev 或 next,用來改變幻燈片相對於當前位置的位置。
- 使用 data-slide-to 來向輪播傳遞一個原始滑動索引,data-slide-to="2" 將把滑塊移動到一個特定的索引,索引從 0 開始計數。
- data-ride="carousel" 屬性用於標記輪播在頁面載入時就開始動畫播放。
$('.carousel').carousel()
2. 選項
選項名稱 | 型別/預設值 | Data 屬性名稱 | 描述 |
---|---|---|---|
interval |
number 預設值:5000 |
data-interval | 自動迴圈每個專案之間延遲的時間量。如果為 false,輪播將不會自動迴圈。 |
pause |
string 預設值:"hover" |
data-pause | 滑鼠進入時暫停輪播迴圈,滑鼠離開時恢復輪播迴圈。 |
wrap |
boolean 預設值:true |
data-wrap | 輪播是否連續迴圈。 |
3. 方法
方法 | 描述 | 例項 |
---|---|---|
.carousel(options) | 初始化輪播為可選的 options 物件,並開始迴圈專案。 |
$('#identifier').carousel({ interval: 2000 }) |
.carousel('cycle') | 從左到右迴圈輪播專案。 |
$('#identifier').carousel('cycle') |
.carousel('pause') | 停止輪播迴圈專案。 |
$('#identifier').carousel('pause') |
.carousel(number) | 迴圈輪播到某個特定的幀(從 0 開始計數,與陣列類似)。 |
$('#identifier').carousel(number) |
.carousel('prev') | 迴圈輪播到上一個專案。 |
$('#identifier').carousel('prev') |
.carousel('next') | 迴圈輪播到下一個專案。 |
$('#identifier').carousel('next') |
4. 事件
事件 | 描述 | 例項 |
---|---|---|
slide.bs.carousel | 當呼叫 slide 例項方法時立即觸發該事件。 |
$('#identifier').on('slide.bs.carousel', function () { // 執行一些動作... }) |
slid.bs.carousel | 當輪播完成幻燈片過渡效果時觸發該事件。 |
$('#identifier').on('slid.bs.carousel', function () { // 執行一些動作... }) |