各式按鈕

css名稱位於 modules > button.scss

預設的按鈕

按鈕可以使用<a> , <button><input>等元素,加入class btn--

立即結帳
<a class="btn btn--primary" href="#">立即結帳</a>
<input class="btn btn--primary" type="submit" value="立即結帳">
<button class="btn btn--primary">立即結帳</button>

按鈕的大小

按鈕變數 $btn--

按鈕大小 $btn--small , $btn--medium , $btn--large

<a class="btn btn--primary btn--small" href="#">small 按鈕</a>
<a class="btn btn--primary btn--medium" href="#">medium 按鈕</a>
<a class="btn btn--primary" href="#">預設 按鈕</a>
<a class="btn btn--primary btn--large" href="#">large 按鈕</a>

按鈕的其他狀態

按鈕變數 $btn--

按鈕大小 $btn--gray , $btn--darkgray , $btn--fb , $btn--disabled , $btn--note

不可點選 $btn--disabled , $btn--note

<a class="btn btn--gray" href="#">加入追蹤清單</a>
<a class="btn btn--darkgray" href="#">繼續購物</a>
<a class="btn btn--disabled" href="#">請先確認</a>

按鈕置中間距

加入 .btns-center

<div class="btns-center">
    <a class="btn btn--gray" href="#">回上一頁</a>
    <input class="btn btn--primary" type="submit" value="確認提交">
</div>

加入 .btns-gray-submit

<div class="btns-gray-submit">
    <a class="btn btn--gray" href="#">回上一頁</a>
    <input class="btn btn--primary" type="submit" value="確認提交">
</div>

各式表單

Scss名稱位於 modules > forms.scss

加入class form-

Input

<input type="text" class="form-control" placeholder="example input">

Select

<select name="" class="form-control"><option value="請選擇您的訂單序號">請選擇您的訂單序號</option></select>

Textarea

<textarea class="form-control" rows="5" cols="70" placeholder="example textarea"></textarea>

頁碼

頁碼

Scss名稱位於 modules > pagination.scss

點選其它頁面,出現”回上頁“和“回上十頁”

<div class="pagination">
    <div class="pagination__total"><strong>1</strong>件 ~ 第<strong>20</strong>件(共 <strong>2274</strong> 件商品)| </div>
    <div class="pagination__pages">
        <!-- 點選其它頁面,出現”回上頁“和“回上十頁” -->
        <a class="pagination__preten" href="javascript: void(0)" title="上十頁">&nbsp;</a>
        <a class="pagination__pre" href="javascript: void(0)" title="上一頁">&nbsp;</a> 
        <span class="pagination__page--active">1</span>
        <a class="pagination__page" href="javascript: void(0)" title="第2頁">2</a>
        <a class="pagination__page" href="javascript: void(0)" title="第3頁">3</a>
        <a class="pagination__page" href="javascript: void(0)" title="第4頁">4</a>
        <a class="pagination__page" href="javascript: void(0)" title="第5頁">5</a>
        <a class="pagination__page" href="javascript: void(0)" title="第6頁">6</a>
        <a class="pagination__page" href="javascript: void(0)" title="第7頁">7</a>
        <a class="pagination__page" href="javascript: void(0)" title="第8頁">8</a>
        <a class="pagination__page" href="javascript: void(0)" title="第9頁">9</a>
        <a class="pagination__page" href="javascript: void(0)" title="第10頁">10</a>
        <a class="pagination__next" href="javascript: void(0)" title="下一頁">&nbsp;</a>
        <a class="pagination__nextten" href="javascript: void(0)" title="下十頁">&nbsp;</a>
    </div>
</div>

步驟

購物車 步驟

css名稱位於 modules > steps.scss

STEP
1
確認商品資料
STEP
2
付款結帳
STEP
3
購物完成
<div class="steps">
    <div class="steps-items steps-items--active">
        <div class="steps-items__box">
            <div class="steps-items__step">STEP</div>
            <div class="steps-items__nmb">1</div>
            <div class="steps-items__txt">確認商品資料</div>
            <div class="steps-items__arrow"></div>
        </div>
    </div>
    <div class="steps-items">
        <div class="steps-items__box">
            <div class="steps-items__step">STEP</div>
            <div class="steps-items__nmb">2</div>
            <div class="steps-items__txt">付款結帳</div>
            <div class="steps-items__arrow"></div>
        </div>
    </div>
    <div class="steps-items">
        <div class="steps-items__box">
            <div class="steps-items__step">STEP</div>
            <div class="steps-items__nmb">3</div>
            <div class="steps-items__txt">購物完成</div>
        </div>
    </div>
</div>

各式表格

表格

css名稱位於 modules > tables.scss

加入class table

商品名稱 數量及規格 價格 小計
東森海洋冬季指定入住二日四人平日 數量 1 優惠價 $10,000
$9,800
東森海洋冬季指定入住二日四人平日 數量 1 優惠價 $10,000
$9,800
東森海洋冬季指定入住二日四人平日 數量 1 優惠價 $10,000
$9,800
<table class="table">
    <thead>
        <tr>
            <th>商品名稱</th>
            <th>數量及規格</th>
            <th>價格</th>
            <th>小計</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>東森海洋冬季指定入住二日四人平日</td>
            <td>數量 1</td>
            <td>優惠價 $10,000</td>
            <td><div class="prc-S4">$<span>9,800</span></div></td>
        </tr>
        <tr>
            <td>東森海洋冬季指定入住二日四人平日</td>
            <td>數量 1</td>
            <td>優惠價 $10,000</td>
            <td><div class="prc-S4">$<span>9,800</span></div></td>
        </tr>
        <tr>
            <td>東森海洋冬季指定入住二日四人平日</td>
            <td>數量 1</td>
            <td>優惠價 $10,000</td>
            <td><div class="prc-S4">$<span>9,800</span></div></td>
        </tr>
    </tbody>
</table>

各式頁籤 Tabs

購物車頁籤

css名稱位於 modules > tabs.scss

加入class tab-nav

<ul class="tab-nav">
    <li class="tab-nav__item tab-nav--current"><a href="#itemBox1" title="購物車(2)">購物車(2)</a></li>
    <li class="tab-nav__item"><a href="#itemBox2" title="追蹤清單(2)">追蹤清單(2)</a></li>
</ul>

各式標籤

加價購標籤

css名稱位於 modules > tags.scss

加入class tags-**

  • tags-addition
    加價購