Steps

Steps 提供兩種不同的方式,一個是簡易型的 .step-sm 以及完整的 .step。兩種 Step 至少要有一個 .active 項目。

Simple Steps

Simple Step 只需要一個 .step-sm 以及多個項目 .step-sm-item,預設第一個項目要加上 .active

  • 購物車
  • 確認訂單
  • 購買資訊
  • 付款設定
  • 完成購買
<ul class="step-sm">
    <li class="step-sm-item active">購物車</li>
    <li class="step-sm-item">確認訂單</li>
    <li class="step-sm-item">購買資訊</li>
    <li class="step-sm-item">付款設定</li>
    <li class="step-sm-item">完成購買</li>
</ul>

.active 不再是第一個時,.active 之前的項目會出現另一個樣式。

  • 購物車
  • 確認訂單
  • 購買資訊
  • 付款設定
  • 完成購買
<ul class="step-sm">
    <li class="step-sm-item">購物車</li>
    <li class="step-sm-item">確認訂單</li>
    <li class="step-sm-item active">購買資訊</li>
    <li class="step-sm-item">付款設定</li>
    <li class="step-sm-item">完成購買</li>
</ul>

Vertical Simple Steps

只要在 .step-sm 加上 .step-vertical,就能顯示垂直的 Steps。

  • 購物車
  • 確認訂單
  • 購買資訊
  • 付款設定
  • 完成購買
<ul class="step-sm step-vertical">~略~</ul>

Steps

Steps 能夠放置更多資訊,例如標題、文字以及圖示,能夠顯示更完整的資訊。

預設樣式

Steps 的結構與 Simple Steps 相似,但增加了標題用的 .step-title 以及 文字敘述的 .step-text

  • 購物車

    確認購物清單是否正確

  • 付款設定

    選擇您的付款方式

  • 完成購買

    恭喜您完成購物流程。

<ul class="step">
    <li class="step-item active">
        <h6 class="step-title">購物車</h6>
        <p class="step-text">確認購物清單是否正確</p>
    </li>
    <li class="step-item">
        <h6 class="step-title">付款設定</h6>
        <p class="step-text">選擇您的付款方式</p>
    </li>
    <li class="step-item">
        <h6 class="step-title">完成購買</h6>
        <p class="step-text">恭喜您完成購物流程。</p>
    </li>
</ul>

Vertical Steps

一樣加上 .step-vertical 即可。

  • 購物車

    確認購物清單是否正確

  • 付款設定

    選擇您的付款方式

  • 完成購買

    恭喜您完成購物流程。

<ul class="step step-vertical">~略~</ul>

Ordered Steps

讓 Steps 能夠產生順序編號,只要在 .step 加上 .step-ordered 即可。

  • 購物車

    確認購物清單是否正確

  • 付款設定

    選擇您的付款方式

  • 完成購買

    恭喜您完成購物流程。

<ul class="step step-ordered">~略~</ul>

Icons Steps

讓 Steps 能夠置入 Icon,只要在 .step 置入 <span class="step-icon"> 即可。

  • 購物車

    確認購物清單是否正確

  • 付款設定

    選擇您的付款方式

  • 完成購買

    恭喜您完成購物流程。

<ul class="step">
    <li class="step-item active">
        <span class="step-icon"></span>
        <h6 class="step-title">購物車</h6>
        <p class="step-text">確認購物清單是否正確</p>
    </li>
    <li class="step-item">
        <span class="step-icon"></span>
        <h6 class="step-title">付款設定</h6>
        <p class="step-text">選擇您的付款方式</p>
    </li>
    <li class="step-item">
        <span class="step-icon"></span>
        <h6 class="step-title">完成購買</h6>
        <p class="step-text">恭喜您完成購物流程。</p>
    </li>
</ul>