程式設計師應有的程式技能-BootStrap輪播-前端技術

BootStarp4實做入門

15. 輪播（滑動圖）

一、輪播基本語法

1. 基本語法：

   <div id="carousel-bs4" class="carousel slide" data-ride="carousel">

   <ol class="carousel-indicators">

   <li data-target="#carousel-bs4" data-slide-to="0" class="active"></li>

   <li data-target="#carousel-bs4" data-slide-to="1"></li>

   <li data-target="#carousel-bs4" data-slide-to="2"></li>

   </ol>

   <div class="carousel-inner">

   <div class="carousel-item active">

   滑動內容1

   </div>

   <div class="carousel-item">

   滑動內容2

   </div>

   <div class="carousel-item">

   滑動內容3

   </div>

   </div>

   <a class="carousel-control-prev" href="#carousel-bs4" role="button" data-slide="prev">

   <span class="carousel-control-prev-icon" aria-hidden="true"></span>

   <span class="sr-only">Previous</span>

   </a>

   <a class="carousel-control-next" href="#carousel-bs4" role="button" data-slide="next">

   <span class="carousel-control-next-icon" aria-hidden="true"></span>

   <span class="sr-only">Next</span>

   </a>

   </div>

2. 滑動內容可以放任何東西，例如用媒體物件來做就蠻方便的。
3. 上方的<ol>是用來製作下方的指示器，拿掉亦可。
4. 下方的兩個<a>是用來做左右控制項，不用也行。
5. 詳情：http://bootstrap.hexschool.com/docs/4.0/components/carousel/

二、多一組輪播內容

1. 若要多一組輪播內容，上方的<ol>就要多一組<li>：

   <li data-target="#carousel-bs4" data-slide-to="3"></li>

2. 中間的 <div> 就要多一組對應設定：

   <div class="carousel-item">

   滑動內容4

   </div>

三、快速語法

在 Visual Studio Code 中輸入b4-carousel-caption按 Enter 可以快速產生 carousel 的語法

BootStarp4實做入門

15-1 讓輪播內容也自適應

1. 由於媒體物件無法自適應，所以，可以改用格線系統來做即可。
   view source
   

   print?

   <div class="row">

   <div class="col-sm-auto">

   <img src="http://fakeimg.pl/750x375/6ba85e/000">

   </div>

   <div class="col-sm">

   <h3>媒體物件 media object</h3>

   媒體物件有助於建立複雜和可重複元件，其中一些媒體可以不需要包覆在另一個上。此外，通過flexbox，只需要兩個 class 就可以完成這些工作。

   </div>

   </div>

   
   

後續內容省略......

【資料引用資訊】

google關鍵字:BootStarp4實做入門

網址:https://campus-xoops.tn.edu.tw/modules/tad_book3/html_all.php?tbsn=32