Components

Alert

提示訊息：通用樣式

預設

資訊提示

提醒

成功

警示

灰底

深底白字

使用「alert-sm」間距縮小、字級改為13px

<p class="alert alert-default">預設</p>
<p class="alert alert-info">資訊提示</p>
<p class="alert alert-warning">提醒</p>
<p class="alert alert-success">成功</p>
<p class="alert alert-danger">警示</p>
<p class="alert alert-muted">灰底</p>
<p class="alert alert-inverted">深底白字</p>
<p class="alert alert-inverted alert-sm">使用「alert-sm」間距縮小、字級改為13px</p>

特定訊息：信用卡授權處理狀態

本站採用 SSL 256 bits 安全加密機制

授權處理中，請勿關閉視窗或重整頁面

<div class="alert alert-verify">
  <i class="icon icon-lock"></i>
  <p>本站採用 SSL 256 bits 安全加密機制</p>
  <p class="focus">授權處理中，請勿關閉視窗或重整頁面</p>
</div>

Badges

「純數字」專用標籤（通常被設為連結使用）

商品A 9 項　 商品B 9 項　 商品C 9 項　 商品D 9 項　 商品E 9 項　 商品E 9 項　 商品E 99 項　 
商品A <a href="" class="badge badge-default">9</a> 項　
商品B <a href="" class="badge badge-primary">9</a> 項　
商品C <a href="" class="badge badge-secondary">9</a> 項　
商品D <a href="" class="badge badge-info">9</a> 項　
商品E <a href="" class="badge badge-success">9</a> 項　
商品E <a href="" class="badge badge-warning">9</a> 項　
商品E <a href="" class="badge badge-danger">99</a> 項　

圓型 / 橢圓型

商品 8 項　 
商品 <a href="" class="badge badge-danger circle">8</a> 項　

Breadcrumbs

一般文字路徑

<ul class="breadcrumbs">
  <li><a href="">首頁</a></li>
  <li><a href="">第一層分類</a></li>
  <li><a href="">第二層分類</a></li>
  <li><a href="">第三層分類</a></li>
  <li><a href="">商品名稱</a></li>
</ul>

下拉式選單路徑

<ul class="breadcrumbs">
  <li><a href="/mockup/home.html">首頁</a></li>
  <li class="dropdown">
    <a href="" data-toggle="dropdown" class="dropdown-toggle">第一層分類</a>
    <div class="dropdown-menu">
      <a href="" class="nav-link">第一層分類</a>
      <a href="" class="nav-link">第一層分類</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="" data-toggle="dropdown" class="dropdown-toggle">第二層分類</a>
    <div class="dropdown-menu">
      <a href="" class="nav-link">第二層分類</a>
      <a href="" class="nav-link">第二層分類</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="" data-toggle="dropdown" class="dropdown-toggle">第三層分類</a>
    <div class="dropdown-menu">
      <a href="" class="nav-link">第三層分類</a>
      <a href="" class="nav-link">第三層分類</a>
    </div>
  </li>
  <li><a href="">商品名稱</a></li>
</ul>

Buttons

通用樣式 A：底色白字

<button class="btn btn-default">預設</button>
<button class="btn btn-primary">主要</button>
<button class="btn btn-secondary">次要</button>
<button class="btn btn-query">查詢</button>
<button class="btn btn-share">分享</button>
<button class="btn btn-danger">警示</button>
<button class="btn btn-inverted">黑白</button>
<button class="btn btn-disabled" disabled>鎖定</button>

通用樣式 B：純線框

<button class="btn btn-primary-outline">主要</button>
<button class="btn btn-secondary-outline">次要</button>
<button class="btn btn-query-outline">查詢</button>
<button class="btn btn-inverted-outline">黑白</button>
<button class="btn btn-danger-outline">警示</button>
<button class="btn btn-favorite-outline">收藏</button>
<button class="btn btn-link">仿連結按鈕</button>

特定頁面：隱形賣場登入/註冊

<button class="btn btn-signin">登入</button>
<button class="btn btn-signup">註冊</button>

Button Size

<button class="btn btn-default btn-lg">字級 24px</button>
<button class="btn btn-default btn-md">字級 18px</button>
<button class="btn btn-default btn-sm">字級 13px</button>
<button class="btn btn-default btn-mini">字級 12px</button>

Button Group

基本樣式 'btn-group'（預設為置中樣式）

立即購買 加入購物車 確認取消 
<div class="btn-group">
  <a href="" class="btn btn-primary">立即購買</a>
  <a href="" class="btn btn-secondary">加入購物車</a>
  <a href="" class="btn btn-default">確認取消</a>
</div>

垂直樣式 'btn-group-vertical'

<div class="btn-group-vertical">
  <a href="" class="btn btn-signin">登入</a>
  <a href="" class="btn btn-signup">註冊</a>
</div>

addClass 'pills'

<div class="btn-group pills">
  <button class="btn btn-query">依上架日期</button>
  <button class="btn btn-query-outline">價格由高到低</button>
  <button class="btn btn-query-outline">價格由低到高</button>
</div>
<div class="btn-group pills">
  <button class="btn btn-query btn-sm">依上架日期</button>
  <button class="btn btn-query-outline btn-sm">價格由高到低</button>
  <button class="btn btn-query-outline btn-sm">價格由低到高</button>
</div>
<div class="btn-group-vertical pills">
  <a href="" class="btn btn-signin">登入</a>
  <a href="" class="btn btn-signup">註冊</a>
</div>

特定樣式：活動專區篩選（addClass 'pills' + 'news-tabs'）

'news-tabs' 為寬度限制設定，選單最多可新增至 7 項

全部活動 熱門活動 會員專屬活動 
<div class="btn-group pills news-tabs">
  <a href="" class="btn btn-danger">全部活動</a>
  <a href="" class="btn btn-default">熱門活動</a>
  <a href="" class="btn btn-default">會員專屬活動</a>
</div>

Cards

基本欄位為：圖片 / 標題 / 摘要 / 時間 / 標籤

addClass 'quarter' 設定一列顯示四項。（詳細範本請參考「神腦買情報」首頁）

文章圖片

文章標題一

文章摘要

標籤 標籤
文章圖片

文章標題二

文章摘要

標籤 標籤 
<div class="card-group">
  <!-- 1 -->
  <section class="card quarter">
    <div class="card-img">
      <img alt="文章圖片" src="img-post.png">
    </div>
    <div class="card-content">
      <h1 class="title">文章標題一</h1>
      <p class="desc">文章摘要</p>
      <div class="info">
        <time datetime="2011/10/10 11:59" class="date">
          <i class="icon icon-clock"></i>2011/10/10 11:59
        </time>
        <div class="tags-group">
          <a href="" class="tag-text-primary"><i class="icon icon-tag"></i>標籤</a>
          <a href="" class="tag-text-primary"><i class="icon icon-tag"></i>標籤</a>
        </div>
      </div>
    </div>
  </section>
  <!-- 2 -->
  <section class="card quarter">
    <div class="card-img">
      <img alt="文章圖片" src="img-post.png">
    </div>
    <div class="card-content">
      <h1 class="title">文章標題二</h1>
      <p class="desc">文章摘要</p>
      <div class="info">
        <time datetime="2011/10/10 11:59" class="date">
          <i class="icon icon-clock"></i>2011/10/10 11:59
        </time>
        <div class="tags-group">
          <a href="" class="tag-text-primary"><i class="icon icon-tag"></i>標籤</a>
          <a href="" class="tag-text-primary"><i class="icon icon-tag"></i>標籤</a>
        </div>
      </div>
    </div>
  </section>
</div>

特定頁面：會員福利（addClass 'grid-3by3' + 'purview-list'）

'grid-3by3' 設定寬度為33.33%, 'purview-list' 指定顏色樣式。（詳細範本請參考「會員福利」首頁）

驚喜優惠

不定時提供
專屬驚喜優惠

驚喜優惠

不定時提供
專屬驚喜優惠

驚喜優惠

不定時提供
專屬驚喜優惠

<div class="card-group grid-3by3 purview-list">
  <!-- 1 -->
  <section class="card">
      <div class="icon-circle">
        <i class="icon icon-purview-a"></i>
      </div>
      <div class="word">
        <h1>驚喜優惠</h1>
        <p>不定時提供<br>專屬驚喜優惠</p>
      </div>
  </section>
  <!-- 2 -->
  <section class="card">
      <div class="icon-circle">
        <i class="icon icon-purview-b"></i>
      </div>
      <div class="word">
        <h1>驚喜優惠</h1>
        <p>不定時提供<br>專屬驚喜優惠</p>
      </div>
  </section>
  <!-- 3 -->
  <section class="card">
      <div class="icon-circle">
        <i class="icon icon-purview-c"></i>
      </div>
      <div class="word">
        <h1>驚喜優惠</h1>
        <p>不定時提供<br>專屬驚喜優惠</p>
      </div>
  </section>
</div>

Credit Card

信用卡樣式

範例：購物車結帳

•••
•••• •••• •••• ••••
••/••
•••
•••• •••• •••• ••••
••/••
•••
•••• •••• •••• ••••
••/••
•••
•••• •••• •••• ••••
••/••
•••
•••• •••• •••• ••••
••/•• 
<div class="row">
  <!-- 預設狀態 -->
  <div class="sn-card-container spacing rb">
    <div class="sn-card">
      <div class="sn-card-front">
        <div class="sn-card-logo sn-card-visa"></div>
        <div class="sn-card-logo sn-card-mastercard"></div>
        <div class="sn-card-logo sn-card-jcb"></div>
        <div class="sn-card-lower">
          <div class="sn-card-cvc sn-card-display">•••</div>
          <div class="sn-card-number sn-card-display">•••• •••• •••• ••••</div>
          <div data-before="month/year" data-after="valid thru" class="sn-card-expiry sn-card-display">••/••</div>
        </div>
      </div>
    </div>
  </div>
  <!-- VISA -->
  <div class="sn-card-container spacing rb">
    <div class="sn-card sn-card-identified sn-card-visa">
      <div class="sn-card-front">
        <div class="sn-card-logo sn-card-visa"></div>
        <div class="sn-card-logo sn-card-mastercard"></div>
        <div class="sn-card-logo sn-card-jcb"></div>
        <div class="sn-card-lower">
          <div class="sn-card-cvc sn-card-display">•••</div>
          <div class="sn-card-number sn-card-display">•••• •••• •••• ••••</div>
          <div data-before="month/year" data-after="valid thru" class="sn-card-expiry sn-card-display">••/••</div>
        </div>
      </div>
    </div>
  </div>
  <!-- Master -->
  <div class="sn-card-container spacing rb">
    <div class="sn-card sn-card-identified sn-card-mastercard">
      <div class="sn-card-front">
        <div class="sn-card-logo sn-card-visa"></div>
        <div class="sn-card-logo sn-card-mastercard"></div>
        <div class="sn-card-logo sn-card-jcb"></div>
        <div class="sn-card-lower">
          <div class="sn-card-cvc sn-card-display">•••</div>
          <div class="sn-card-number sn-card-display">•••• •••• •••• ••••</div>
          <div data-before="month/year" data-after="valid thru" class="sn-card-expiry sn-card-display">••/••</div>
        </div>
      </div>
    </div>
  </div>
  <!-- JCB -->
  <div class="sn-card-container spacing rb">
    <div class="sn-card sn-card-identified sn-card-jcb">
      <div class="sn-card-front">
        <div class="sn-card-logo sn-card-visa"></div>
        <div class="sn-card-logo sn-card-mastercard"></div>
        <div class="sn-card-logo sn-card-jcb"></div>
        <div class="sn-card-lower">
          <div class="sn-card-cvc sn-card-display">•••</div>
          <div class="sn-card-number sn-card-display">•••• •••• •••• ••••</div>
          <div data-before="month/year" data-after="valid thru" class="sn-card-expiry sn-card-display">••/••</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 其他類型 -->
  <div class="sn-card-container spacing rb">
    <div class="sn-card sn-card-unknown">
      <div class="sn-card-front">
        <div class="sn-card-logo sn-card-visa"></div>
        <div class="sn-card-logo sn-card-mastercard"></div>
        <div class="sn-card-logo sn-card-jcb"></div>
        <div class="sn-card-lower">
          <div class="sn-card-cvc sn-card-display">•••</div>
          <div class="sn-card-number sn-card-display">•••• •••• •••• ••••</div>
          <div data-before="month/year" data-after="valid thru" class="sn-card-expiry sn-card-display">••/••</div>
        </div>
      </div>
    </div>
  </div>
</div>

Forms

表單

這是表單標題
帳號
密碼
電話
信箱
搜尋
網址
日期
時間
數量
<fieldset>
  <legend>這是表單標題</legend>
  <!-- Input -->
  <div class="css-table pure middle">
    <div class="css-tr">
      <div class="css-th w-f2 text-right">帳號</div>
      <div class="css-td"><input type="text" placeholder="請輸入帳號" /></div>
    </div>
    <div class="css-tr">
      <div class="css-th w-f2 text-right">密碼</div>
      <div class="css-td"><input type="password" /></div>
    </div>
    <div class="css-tr">
      <div class="css-th w-f2 text-right">電話</div>
      <div class="css-td"><input type="tel" /></div>
    </div>
    <div class="css-tr">
      <div class="css-th w-f2 text-right">信箱</div>
      <div class="css-td"><input type="email" /></div>
    </div>
    <div class="css-tr">
      <div class="css-th w-f2 text-right">搜尋</div>
      <div class="css-td"><input type="search" /></div>
    </div>
    <div class="css-tr">
      <div class="css-th w-f2 text-right">網址</div>
      <div class="css-td"><input type="url" /></div>
    </div>
    <div class="css-tr">
      <div class="css-th w-f2 text-right">日期</div>
      <div class="css-td"><input type="date" /></div>
    </div>
    <div class="css-tr">
      <div class="css-th w-f2 text-right">時間</div>
      <div class="css-td"><input type="time" /></div>
    </div>
    <div class="css-tr">
      <div class="css-th w-f2 text-right">數量</div>
      <div class="css-td"><input type="number" /></div>
    </div>
  </div>
  <!-- Select : Base -->
  <select name="">
    <option selected="selected" value="最近一個月">最近一個月</option>
    <option value="最近三個月">最近三個月</option>
    <option value="最近六個月">最近六個月</option>
    <option value="一年內">一年內</option>
  </select>
  <!-- Select : Small -->
  <select name="" class="select-sm">
    <option selected="selected" value="最近一個月">最近一個月</option>
    <option value="最近三個月">最近三個月</option>
    <option value="最近六個月">最近六個月</option>
    <option value="一年內">一年內</option>
  </select>
  <!-- Select : Disabled -->
  <select name="" class="select-sm" disabled>
    <option selected="selected" value="最近一個月">最近一個月</option>
    <option value="最近三個月">最近三個月</option>
    <option value="最近六個月">最近六個月</option>
    <option value="一年內">一年內</option>
  </select>
</fieldset>

密碼隱碼/顯碼切換

<div class="input-password">
  <input type="password" placeholder="請輸入新密碼" class="input-lg showPassword-view">
  <a href="#0" class="hide-password"><i class="icon icon-eye-hide"></i></a>
</div>

自訂 checkbox 樣式

<input> 加入 '.checkbox' ， <label> 加入 '.checkbox-label'

　 
<input id="check1" type="checkbox" class="checkbox">
<label for="check1" class="checkbox-label">未選取</label>　
<input id="check2" type="checkbox" class="checkbox" checked>
<label for="check2" class="checkbox-label">選取中</label>

Input-group

當一個 '.input' 加一個 '.button' 時，才使用 '.input-group' 包覆 

<!-- Base -->
<div class="input-group">
  <input placeholder="請輸入訂單編號查詢" type="text">
  <button class="btn btn-query">查詢</button>
</div>
<!-- Small -->
<div class="input-group input-group-sm">
  <input placeholder="請輸入訂單編號查詢" type="text" class="input-sm">
  <button class="btn btn-query btn-sm">查詢</button>
</div>

Number-group

商品數量增減

<div class="number-group">
  <button class="number-less"><i class="icon icon-minus"></i></button>
  <input type="number" value="1" max="10" min="1" maxlength="2" class="number-view">
  <button class="number-plus"><i class="icon icon-plus"></i></button>
</div>

Images

左右側浮動小型廣告

下載APP 天天刮天天抽

 
<div class="adbox adbox-rail">
  <!-- Close Button -->
  <div class="clearfix"><a href="" class="btn-close"><i class="icon icon-close"></i></a></div>
  <!-- AD -->
  <figure>
    <a href=""><p class="figure-title">下載APP 天天刮天天抽</p><img src="/public/images/app-download-qrcode.svg" alt="" class="figure-img"></a>
  </figure>
</div>

List Group

基本樣式

  • 商品圖片
    iPhone6 Plus 犀牛盾防摔保護殼
    $29,900
  • 商品圖片
    iPhone6 Plus 犀牛盾防摔保護殼
    $29,900
<ul class="list-group">
  <li class="item">
    <img alt="商品圖片" src="/public/images/demo/index_hot_1.jpg" class="image thumbnail small">
    <div class="content">
      <h5 class="title">iPhone6 Plus 犀牛盾防摔保護殼</h5>
      <div class="price">$29,900</div>
    </div>
  </li>
  <li class="item">
    <img alt="商品圖片" src="/public/images/demo/index_hot_1.jpg" class="image thumbnail small">
    <div class="content">
      <h5 class="title">iPhone6 Plus 犀牛盾防摔保護殼</h5>
      <div class="price">$29,900</div>
    </div>
  </li>
</ul>

特殊樣式：商品加購

範例：商品詳細頁

商品加購

<!-- 列表標題 -->
<h4 class="list-group-title">商品加購</h4>
<!-- 列表品項 -->
<ul class="list-group product-plus flex">
  <li class="item product-view">
    <div class="checkbox-group pull-left">
      <input id="prd-0" type="checkbox" name="check" disabled="" class="checkbox">
      <label for="prd-0" class="checkbox-label"></label>
    </div>
    <a href="javascript:;" class="pull-left"><img alt="商品圖" src="/public/images/demo/p1_f1_1.jpg" class="image thumbnail small"></a>
    <div class="content">
      <a href="javascript:;" class="title">SONY Xperia X Performance (XP) 5吋防水雙卡雙待機</a>
      <div class="price"><b>$22,900</b><b class="fn-sm spacing left mini">(已售完)</b></div>
    </div>
  </li>
  <li class="item product-view">
    <div class="checkbox-group pull-left">
      <input id="prd-1" type="checkbox" name="check" class="checkbox">
      <label for="prd-1" class="checkbox-label"></label>
    </div>
    <a href="javascript:;" class="pull-left"><img alt="商品圖" src="/public/images/demo/p1_f1_2.jpg" class="image thumbnail small"></a>
    <div class="content">
      <a href="javascript:;" class="title">Samsung Galaxy Note 5 64G 5.7吋八核心智慧手機</a>
      <div class="price"><b>$19,990</b></div>
    </div>
  </li>
  <li class="item product-view">
    <div class="checkbox-group pull-left">
      <input id="prd-2" type="checkbox" name="check" class="checkbox">
      <label for="prd-2" class="checkbox-label"></label>
    </div>
    <a href="javascript:;" class="pull-left"><img alt="商品圖" src="/public/images/demo/p1_f1_3.jpg" class="image thumbnail small"></a>
    <div class="content">
      <a href="javascript:;" class="title">Apple iPhone SE 64G 4吋智慧型手機</a>
      <div class="price"><b>$19,490</b></div>
    </div>
  </li>
  <li class="item product-view">
    <div class="checkbox-group pull-left">
      <input id="prd-3" type="checkbox" name="check" class="checkbox">
      <label for="prd-3" class="checkbox-label"></label>
    </div>
    <a href="javascript:;" class="pull-left"><img alt="商品圖" src="/public/images/demo/p1_f1_3.jpg" class="image thumbnail small"></a>
    <div class="content">
      <a href="javascript:;" class="title">Apple iPhone SE 64G 4吋智慧型手機</a>
      <div class="price"><b>$19,490</b></div>
    </div>
  </li>
  <li class="item product-view">
    <div class="checkbox-group pull-left">
      <input id="prd-4" type="checkbox" name="check" class="checkbox">
      <label for="prd-4" class="checkbox-label"></label>
    </div>
    <a href="javascript:;" class="pull-left"><img alt="商品圖" src="/public/images/demo/p1_f1_3.jpg" class="image thumbnail small"></a>
    <div class="content">
      <a href="javascript:;" class="title">Apple iPhone SE 64G 4吋智慧型手機</a>
      <div class="price"><b>$19,490</b></div>
    </div>
  </li>
  <li class="item product-view">
    <div class="checkbox-group pull-left">
      <input id="prd-5" type="checkbox" name="check" class="checkbox">
      <label for="prd-5" class="checkbox-label"></label>
    </div>
    <a href="javascript:;" class="pull-left"><img alt="商品圖" src="/public/images/demo/p1_f1_3.jpg" class="image thumbnail small"></a>
    <div class="content">
      <a href="javascript:;" class="title">Apple iPhone SE 64G 4吋智慧型手機</a>
      <div class="price"><b>$19,490</b></div>
    </div>
  </li>
</ul>

Message

範例：客服聯絡紀錄

提問者頭像
提問者：王大同
商品已付款，可以確定出貨日嗎？
客服頭像
客服回覆
商品將於1-2個工作天內由物流業者送達。請保持手機暢通並注意代收收到出貨通知24小時後可至訂單查詢了解配送狀況。非常感謝您的訂購。
<!-- 會員 -->
<div class="message message-user">
  <!-- 頭像 -->
  <img alt="提問者頭像" src="/public/images/icons/icon-avatar-user.svg" class="message-avatar has-inline">
  <!-- 訊息內容 -->
  <div class="message-content">
    <div class="message-arrow"></div>
    <div class="info">
      <span class="name">提問者：王大同</span>
      <time class="date">2016/03/29 18:19</time>
    </div>
    <div class="text">商品已付款，可以確定出貨日嗎？</div>
  </div>
</div>
<!-- 客服 -->
<div class="message message-service">
  <img alt="客服頭像" src="/public/images/icons/icon-avatar-headset.svg" class="message-avatar has-inline">
  <div class="message-content">
    <div class="message-arrow"></div>
    <div class="info">
      <span class="name">客服回覆</span>
      <time class="date">2016/03/30 10:22</time>
    </div>
    <div class="text">商品將於1-2個工作天內由物流業者送達。請保持手機暢通並注意代收收到出貨通知24小時後可至訂單查詢了解配送狀況。非常感謝您的訂購。</div>
  </div>
</div>

Nav

範例：全商品分類 

<ul class="nav-inline rainbow">
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-a"></i>超神優惠專區</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-b"></i>手機、平板</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-c"></i>穿戴、相機、配件</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-d"></i>電腦、遊戲、周邊</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-e"></i>電視、影音</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-f"></i>生活家電</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-g"></i>車用百貨</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-h"></i>保健、保養</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-i"></i>食品、票券</a></li>
  <li><a href="#0" class="cate-name"><i class="icon icon-cate-j"></i>生活、日用、設計</a></li>
</ul>

Pagination

<div class="pagination">
  <ul class="pagination-nav has-inline">
    <li class="first disabled" title="第一頁"><a href="#"><i class="icon icon-arrow-first"></i></a></li>
    <li class="prev disabled" title="上一頁"><a href="#"><i class="icon icon-arrow-left"></i></a></li>
    <li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li>
    <li><a href="#">4</a></li><li><a href="#">5</a></li>
    <li><a href="#">6</a></li><li><a href="#">7</a></li>
    <li><a href="#">8</a></li><li><a href="#">9</a></li>
    <li class="next" title="下一頁"><a href="#"><i class="icon icon-arrow-right"></i></a></li>
    <li class="last" title="最後一頁"><a href="#"><i class="icon icon-arrow-last"></i></a></li>
  </ul>
  <span class="pagination-goto">共<span class="number">52</span>頁，前往<input type="text" class="input-mini">頁</span>
</div>

Panel

基本樣式

標題
內容
標題
內容
<div class="panel panel-primary">
  <div class="panel-head">標題</div>
  <div class="panel-body">內容</div>
</div>
<div class="panel panel-secondary">
  <div class="panel-head">標題</div>
  <div class="panel-body">內容</div>
</div>

線條樣式

文章分類
手機話題 發燒3C 獨家優惠 精彩生活 
<div class="panel panel-outline">
  <div class="panel-head">文章分類</div>
  <div class="panel-body">
    <div class="tags-group">
      <a href="" class="tag tag-outline radius">手機話題</a>
      <a href="" class="tag tag-outline radius">發燒3C</a>
      <a href="" class="tag tag-outline radius">獨家優惠</a>
      <a href="" class="tag tag-outline radius">精彩生活</a>
    </div>
  </div>
</div>

「購物車結帳」專用面版

標題
<div class="panel panel-default cart-form">
  <div class="panel-head">標題</div>
  <div class="panel-body">
    <ul class="has-pay-select clearfix">
      <li class="active"><label for="" class="radio-inline spacing right"><input type="radio" checked="checked">付款一</label></li>
      <li><label for="" class="radio-inline spacing right"><input type="radio">付款二</label></li>
      <li><label for="" class="radio-inline spacing right"><input type="radio">付款三</label></li>
      <li><label for="" class="radio-inline spacing right"><input type="radio">付款四</label></li>
      <li><label for="" class="radio-inline spacing right"><input type="radio">付款五</label></li>
    </ul>
  </div>
</div>

「我的帳戶」選單面版

我的帳戶
訂單中心
購物車
<!-- 標題 -->
<div class="panel panel-caption stackable">
  <a href="">我的帳戶</a>
</div>
<!-- 選單一 -->
<div class="panel panel-default stackable">
  <div class="panel-head none-underline">訂單中心</div>
  <div class="panel-body">
    <ul class="has-type-caret fn-sm">
      <li><a href="">訂單查詢<b class="fn-mini warning spacing sm"></b></a></li>
      <li><a href="">電子票券<b class="fn-mini warning spacing sm"></b></a></li>
      <li><a href="">商品收藏<b class="fn-mini warning spacing sm"></b></a></li>
    </ul>
  </div>
</div>
<!-- 選單二 -->
<div class="panel panel-default stackable">
  <div class="panel-head none-underline">購物車</div>
  <div class="panel-body">
    <ul class="has-type-caret fn-sm">
      <li><a href="">一般宅配<b class="fn-mini warning spacing sm">(3)</b></a></li>
      <li><a href="">限神腦門市<b class="fn-mini warning spacing sm">(1)</b></a></li>
      <li><a href="">限宅配<b class="fn-mini warning spacing sm">(2)</b></a></li>
      <li><a href="">電子票券<b class="fn-mini warning spacing sm">(12)</b></a></li>
    </ul>
  </div>
</div>

「客服FAQ」選單面版

客服FAQ
會員服務
<!-- 標題 -->
<div class="panel panel-inverted stackable">客服FAQ</div>
<!-- 選單 -->
<div class="panel panel-primary shrink stackable">
  <div class="panel-head">會員服務</div>
  <div class="panel-body">
    <ul class="has-type-disc">
      <li><a href="">會員/網頁/系統問題</a></li>
      <li><a href="">查詢行銷活動</a></li>
      <li><a href="">會員紅利查詢</a></li>
      <li><a href="">紅利點數使用說明</a></li>
      <li><a href="">折價券使用辦法</a></li>
    </ul>
  </div>
</div>

其他內容面版

本周強打
1 / 4
活動廣告
優惠活動更多活動
商品圖片 商品圖片 商品圖片
熱門商品
1 / 4 
<div class="row">
  <!-- Widget.Default -->
  <div class="widget widget-default col-md-6 spacing right">
    <!-- 標題 -->
    <div class="widget-title">
      <span>本周強打</span>
      <div class="btn-group pills pull-right">
        <span class="divider fn-sm">1 / 4</span>
        <button class="btn btn-default btn-mini"><i class="icon icon-arrow-left"></i></button>
        <button class="btn btn-default btn-mini"><i class="icon icon-arrow-right"></i></button>
      </div>
    </div>
    <!-- 內容 -->
    <div class="widget-content">
      <a href=""><img src="/public/images/demo/category_1_236.jpg" alt="活動廣告"></a>
    </div>
  </div><!-- End.Widget.Default -->

  <!-- Widget.Primary -->
  <div class="widget widget-primary col-md-6 spacing right">
    <!-- 標題 -->
    <div class="widget-title">優惠活動<a href="" class="pull-right">更多活動<i class="icon icon-arrow-right"></i></a></div>
    <!-- 內容 -->
    <div class="widget-content">
      <a href=""><img src="/public/images/demo/index_event_1.jpg" alt="商品圖片"></a>
      <a href=""><img src="/public/images/demo/index_event_2.jpg" alt="商品圖片"></a>
      <a href=""><img src="/public/images/demo/index_event_3.jpg" alt="商品圖片"></a>
    </div>
  </div><!-- End.Widget.Primary -->

  <!-- Widget.Secondary -->
  <div class="widget widget-secondary col-md-6 spacing right">
    <!-- 標題 -->
    <div class="widget-title">
      <span>熱門商品</span>
      <div class="btn-group pills pull-right">
        <span class="divider fn-sm js-product-slider-mini-pages">1 / 4</span>
        <button class="btn btn-default btn-mini"><i class="icon icon-arrow-left"></i></button>
        <button class="btn btn-default btn-mini"><i class="icon icon-arrow-right"></i></button>
      </div>
    </div>
    <!-- 內容 -->
    <div class="widget-content">
      <div class="group-pages">
        <ul class="list-group">
          <li class="item">
            <a href="">
              <img alt="商品圖片" src="/public/images/demo/index_hot_1.jpg" class="image thumbnail small">
              <div class="content">
                <h5 class="title">iPhone6 Plus 犀牛盾防摔保護殼</h5>
                <div class="price">$29,900</div>
              </div>
            </a>
          </li>
          <li class="item">
            <a href="">
              <img alt="商品圖片" src="/public/images/demo/index_hot_1.jpg" class="image thumbnail small">
              <div class="content">
                <h5 class="title">iPhone6 Plus 犀牛盾防摔保護殼</h5>
                <div class="price">$29,900</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div><!-- End.Widget.Secondary -->
</div>

Progress

<progress value="25" max="100" class="progress progress-success"></progress>
<progress value="50" max="100" class="progress progress-info"></progress>
<progress value="75" max="100" class="progress progress-warning"></progress>
<progress value="100" max="100" class="progress progress-danger"></progress>

Steps

結帳流程

範例：結帳流程

  • 1購物車明細
  • 2填寫訂購資訊
  • 3訂單送出
<div class="steps has-count">
  <ul class="steps-list">
    <li class="steps-item active"><span class="number">1</span><span class="label">購物車明細</span></li>
    <li class="steps-item"><span class="number">2</span><span class="label">填寫訂購資訊</span></li>
    <li class="steps-item"><span class="number">3</span><span class="label">訂單送出</span></li>
  </ul>
</div>
  • 1購物車明細
  • 2填寫訂購資訊
  • 3訂單送出
<div class="steps border">
  <ul class="steps-list">
    <li class="steps-item active"><span class="number">1</span><span class="label">購物車明細</span></li>
    <li class="steps-item"><span class="number">2</span><span class="label">填寫訂購資訊</span></li>
    <li class="steps-item"><span class="number">3</span><span class="label">訂單送出</span></li>
  </ul>
</div>

門市繳費流程

範例：結帳訂單送出

<ul class="steps has-ccr-flow">
  <li class="steps-item"><i class="icon icon-store"></i><span class="text">前往<a href="/mockup/service/location.html" target="_blank" class="underline">神腦特約服務中心</a></span></li>
  <li class="steps-item tooltip-hover"><i class="icon icon-phone-scan"></i><span class="text">出示「<a href="javascript:;" data-toggle="modal" data-target="#storePayModal" class="underline spacing sm">神腦生活APP繳費條碼</a>」或「繳費簡訊」</span></li>
  <li class="steps-item"><i class="icon icon-money"></i><span class="text">完成繳費</span></li>
</ul>

訂單狀態

範例：訂單查詢

  • 訂購成功 06/13 10:34
  • 付款完成 --
  • 已出票 --

  • 退貨申請 04/10 10:34
  • 退款處理中 04/10 15:21
  • 已退款 依銀行退款日

  • 訂購成功 04/10 10:34
  • 付款完成 --
  • 已出貨 --
  • 已送達 --

  • 訂購成功 04/10 10:34
  • 付款完成 04/10 15:21
  • 已出貨 04/11 11:12
  • 貨到門市 04/12 09:24
  • 已取件 -- 
<!-- 電子票券流程 -->
<div class="steps has-cart">
  <ul class="steps-list">
    <li class="steps-item active">
      <span class="label">訂購成功</span>
      <i class="icon icon-cart"></i>
      <span class="date">06/13 10:34</span>
    </li>
    <li class="steps-item">
      <span class="label">付款完成</span>
      <i class="icon icon-money"></i>
      <span class="date">--</span>
    </li>
    <li class="steps-item">
      <span class="label">已出票</span>
      <i class="icon icon-ticket"></i>
      <span class="date">--</span>
    </li>
  </ul>
</div>
<br>
<!-- 退款流程 -->
<div class="steps has-cart">
  <ul class="steps-list">
    <li class="steps-item active">
      <span class="label">退貨申請</span>
      <i class="icon icon-box"></i>
      <span class="date">04/10 10:34</span>
    </li>
    <li class="steps-item active">
      <span class="label">退款處理中</span>
      <i class="icon icon-money"></i>
      <span class="date">04/10 15:21</span>
    </li>
    <li class="steps-item active">
      <span class="label">已退款</span>
      <i class="icon icon-purse"></i>
      <span class="date">依銀行退款日</span>
    </li>
  </ul>
</div>
<br>
<!-- 宅配流程 -->
<div class="steps has-cart">
  <ul class="steps-list">
    <li class="steps-item active">
      <span class="label">訂購成功</span>
      <i class="icon icon-cart"></i>
      <span class="date">04/10 10:34</span>
    </li>
    <li class="steps-item">
      <span class="label">付款完成</span>
      <i class="icon icon-money"></i>
      <span class="date">--</span>
    </li>
    <li class="steps-item">
      <span class="label">已出貨</span>
      <i class="icon icon-truck"></i>
      <span class="date">--</span>
    </li>
    <li class="steps-item">
      <span class="label">已送達</span>
      <i class="icon icon-box"></i>
      <span class="date">--</span>
    </li>
  </ul>
</div>
<br>
<!-- 門市取貨流程 -->
<div class="steps has-cart">
  <ul class="steps-list">
    <li class="steps-item active">
      <span class="label">訂購成功</span>
      <i class="icon icon-cart"></i>
      <span class="date">04/10 10:34</span>
    </li>
    <li class="steps-item active">
      <span class="label">付款完成</span>
      <i class="icon icon-money"></i>
      <span class="date">04/10 15:21</span>
    </li>
    <li class="steps-item active">
      <span class="label">已出貨</span>
      <i class="icon icon-truck"></i>
      <span class="date">04/11 11:12</span>
    </li>
    <li class="steps-item active">
      <span class="label">貨到門市</span>
      <i class="icon icon-box"></i>
      <span class="date">04/12 09:24</span>
    </li>
    <li class="steps-item">
      <span class="label">已取件</span>
      <i class="icon icon-store"></i>
      <span class="date">--</span>
    </li>
  </ul>
</div>

Tab

預設樣式

<!-- 置左 -->
<div class="nav-tabs">
  <ul class="nav-tabs-list">
    <li class="nav-tabs-item active"><a href="">開館大放送</a></li>
    <li class="nav-tabs-item"><a href="">ASUS新品限量購</a></li>
    <li class="nav-tabs-item"><a href="">自拍神器</a></li>
  </ul>
</div>
<!-- 置中 -->
<div class="nav-tabs">
  <ul class="nav-tabs-list align center">
    <li class="nav-tabs-item"><a href="">開館大放送</a></li>
    <li class="nav-tabs-item active"><a href="">ASUS新品限量購</a></li>
    <li class="nav-tabs-item"><a href="">自拍神器</a></li>
  </ul>
</div>
<!-- 置右 -->
<div class="nav-tabs">
  <ul class="nav-tabs-list align right">
    <li class="nav-tabs-item"><a href="">開館大放送</a></li>
    <li class="nav-tabs-item"><a href="">ASUS新品限量購</a></li>
    <li class="nav-tabs-item active"><a href="">自拍神器</a></li>
  </ul>
</div>

購物車選單專用

範例：購物車明細 

<div class="nav-tabs nav-tabs-cart">
  <ul class="nav-tabs-list">
    <li class="nav-tabs-title">購物車明細</li>
    <li class="nav-tabs-item active"><a href="" class="nav-link">一般配送<span class="value spacing left mini">(4)</span></a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">限神腦門市<span class="value spacing left mini">(1)</span></a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">限宅配<span class="value spacing left mini">(3)</span></a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">電子票券<span class="value spacing left mini">(12)</span></a></li>
  </ul>
</div>

[舊] 會員中心選單專用

範例：會員中心[舊版]

<div class="nav-tabs nav-tabs-member">
  <ul class="nav-tabs-list">
    <li class="nav-tabs-item active"><a href="" class="nav-link">會員中心</a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">會員資料</a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">訂單紀錄</a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">個人訊息</a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">紅利點數</a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">優惠券</a></li>
    <li class="nav-tabs-item"><a href="" class="nav-link">商品收藏</a></li>
  </ul>
</div>

商品詳細頁專用

範例：商品詳細頁

<div class="nav-tabs nav-tabs-product">
  <ul class="nav-tabs-list align center">
    <li class="nav-tabs-item active"><a href="javascript:;" class="nav-link">商品介紹</a></li>
    <li class="nav-tabs-item"><a href="javascript:;" class="nav-link">規格</a></li>
    <li class="nav-tabs-item"><a href="javascript:;" class="nav-link">配送與退貨說明</a></li>
  </ul>
</div>

商品收藏/瀏覽記錄

旗艦新機 
<div class="nav-tabs nav-tabs-underline">
  <span class="nav-tabs-title">旗艦新機</span>
  <ul class="nav-tabs-list align right">
    <li class="nav-tabs-item active"><a href="javascript:;">熱銷稀品</a></li>
    <li class="nav-tabs-item"><a href="javascript:;">現貨熱銷</a></li>
    <li class="nav-tabs-item"><a href="javascript:;">APPLE品牌日</a></li>
  </ul>
</div>

Tables

基本樣式

CPU處理器
64 位元處理器
CPU處理器
iOS 9
CPU處理器
64 位元處理器
CPU處理器
iOS 9
CPU處理器
64 位元處理器
CPU處理器
iOS 9
CPU處理器
64 位元處理器
CPU處理器
iOS 9
CPU處理器
64 位元處理器
CPU處理器
iOS 9
<!-- Base -->
<div class="css-table">
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器</div>
  </div>
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9</div>
  </div>
</div>
<!-- Bordered -->
<div class="css-table table-bordered">
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器</div>
  </div>
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9</div>
  </div>
</div>
<!-- Blue -->
<div class="css-table blue">
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器</div>
  </div>
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9</div>
  </div>
</div>
<!-- Green -->
<div class="css-table green">
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器</div>
  </div>
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9</div>
  </div>
</div>
<!-- None Border -->
<div class="css-table pure">
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器</div>
  </div>
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9</div>
  </div>
</div>

進階樣式

CPU處理器
64 位元處理器
64 位元處理器
CPU處理器
iOS 9
iOS 9
CPU處理器
64 位元處理器
CPU處理器
64 位元處理器
CPU處理器
iOS 9
CPU處理器
iOS 9
發送日期
信件主旨
狀態
刪除
2016/04/01 09:23
訂單取消回補點數
未讀取
2016/02/13 10:44
發票開立通知函
已讀取

系統效能

CPU處理器
64 位元處理器
CPU處理器
iOS 9
<!-- 垂直罝中 -->
<div class="css-table middle">
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器<br>64 位元處理器</div>
  </div>
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9<br>iOS 9</div>
  </div>
</div>
<!-- 水平置中 -->
<div class="css-table text-center">
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器</div>
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器</div>
  </div>
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9</div>
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9</div>
  </div>
</div>
<!-- 縮小字級(13px) '.fn-sm'，並加入 <checkbox> -->
<div class="css-table middle fn-sm">
  <div class="css-tr">
    <div class="css-th w-f1">
      <div class="checkbox-group">
        <input id="prd-all" type="checkbox" name="check" class="checkbox">
        <label for="prd-all" class="checkbox-label"></label>
      </div>
    </div>
    <div class="css-th w-f8">發送日期</div>
    <div class="css-th">信件主旨</div>
    <div class="css-th w-f4">狀態</div>
    <div class="css-th text-center w-f3">刪除</div>
  </div>
  <div class="css-tr">
    <div class="css-td w-f1">
      <div class="checkbox-group">
        <input id="prd-1" type="checkbox" name="check" class="checkbox">
        <label for="prd-1" class="checkbox-label"></label>
      </div>
    </div>
    <div class="css-td w-f8">2016/04/01 09:23</div>
    <div class="css-td"><a href="#0" class="underline">訂單取消回補點數</a></div>
    <div class="css-td w-f4"><b class="notice">未讀取</b></div>
    <div class="css-td text-center w-f3"><a href="" class="icon icon-delete"></a></div>
  </div>
  <div class="css-tr">
    <div class="css-td w-f1">
      <div class="checkbox-group">
        <input id="prd-2" type="checkbox" name="check" class="checkbox">
        <label for="prd-2" class="checkbox-label"></label>
      </div>
    </div>
    <div class="css-td w-f8">2016/02/13 10:44</div>
    <div class="css-td"><a href="#0" class="underline">發票開立通知函</a></div>
    <div class="css-td w-f4">已讀取</div>
    <div class="css-td text-center w-f3"><a href="" class="icon icon-delete"></a></div>
  </div>
</div>
<!-- 加表單標題 '.css-table-caption' -->
<h4 class="css-table-caption default"><span class="inner-title">系統效能</span></h4>
<div class="css-table">
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">64 位元處理器</div>
  </div>
  <div class="css-tr">
    <div class="css-th w-f9">CPU處理器</div>
    <div class="css-td">iOS 9</div>
  </div>
</div>

Tags

通用樣式 A：底色白字

獨家販售 獨家販售 獨家販售 獨家販售 獨家販售 獨家販售 
<span class="tag tag-default">獨家販售</span>
<span class="tag tag-primary">獨家販售</span>
<span class="tag tag-secondary">獨家販售</span>
<span class="tag tag-extra">獨家販售</span>
<span class="tag tag-danger">獨家販售</span>
<span class="tag tag-red">獨家販售</span>

通用樣式 B：純線框

獨家販售 獨家販售 獨家販售 獨家販售 獨家販售 獨家販售 獨家販售 獨家販售 
<span class="tag tag-default-outline">獨家販售</span>
<span class="tag tag-inverted-outline">獨家販售</span>
<span class="tag tag-primary-outline">獨家販售</span>
<span class="tag tag-secondary-outline">獨家販售</span>
<span class="tag tag-extra-outline">獨家販售</span>
<span class="tag tag-danger-outline">獨家販售</span>
<span class="tag tag-red-outline">獨家販售</span>

通用樣式 C：純文字

獨家販售 獨家販售 獨家販售 獨家販售 獨家販售 獨家販售 
<span class="tag tag-text-default">獨家販售</span>
<span class="tag tag-text-primary">獨家販售</span>
<span class="tag tag-text-secondary">獨家販售</span>
<span class="tag tag-text-extra">獨家販售</span>
<span class="tag tag-text-danger">獨家販售</span>
<span class="tag tag-text-red">獨家販售</span>

Tag Size

字級24px 字級15px 字級12px 
<span class="tag tag-primary tag-lg">字級24px</span>
<span class="tag tag-secondary tag-md">字級15px</span>
<span class="tag tag-extra tag-mini">字級12px</span>
TOP