XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

### 一、輪播基本語法

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>
    ```
 
### 三、快速語法

<div class="alert alert-info">在 Visual Studio Code 中輸入`b4-carousel-caption`按 <kbd>Enter</kbd> 可以快速產生 carousel 的語法</div>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D948

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器