Utilities

Colors

官方標準色

  • $brand-blue

    #0090D4

  • $brand-deepblue

    #005097

  • $brand-green

    #CBD300

  • $brand-pink

    #E64894

  • $brand-yellow

    #FAC109

  • $brand-gray

    #B5B5B6

<!-- ＊此程式碼僅用於色碼展示用 -->
<ul class="demo-palettes">
  <!-- $brand-blue -->
  <li>
    <i class="colorPaper demo-brandBlue"></i>
    <p class="colorValue">$brand-blue</p>
    <p class="colorCode">#0090D4</p>
  </li>
  <!-- $brand-deepblue -->
  <li>
    <i class="colorPaper demo-brandDeepblue"></i>
    <p class="colorValue">$brand-deepblue</p>
    <p class="colorCode">#005097</p>
  </li>
  <!-- $brand-green -->
  <li>
    <i class="colorPaper demo-brandGreen"></i>
    <p class="colorValue">$brand-green</p>
    <p class="colorCode">#CBD300</p>
  </li>
  <!-- $brand-pink -->
  <li>
    <i class="colorPaper demo-brandPink"></i>
    <p class="colorValue">$brand-pink</p>
    <p class="colorCode">#E64894</p>
  </li>
  <!-- $brand-yellow -->
  <li>
    <i class="colorPaper demo-brandYellow"></i>
    <p class="colorValue">$brand-yellow</p>
    <p class="colorCode">#FAC109</p>
  </li>
  <!-- $brand-gray -->
  <li>
    <i class="colorPaper demo-brandGray"></i>
    <p class="colorValue">$brand-gray</p>
    <p class="colorCode">#B5B5B6</p>
  </li>
</ul>

Navigation

  • $nav-red

    #B81C22

  • $nav-darkblue

    #004D98

  • $nav-yellow

    #EEA35C

  • $nav-pink

    #DC4690

  • $nav-cornflower

    #889DFF

  • $nav-coral

    #FF8B9B

  • $nav-purple

    #BA4AE7

  • $nav-green

    #45B035

  • $nav-pumpkin

    #FF6800

  • $nav-darkcyan

    #889DFF

  • $nav-blue

    #0089C0

  • $nav-indigo

    #433783

<!-- ＊此程式碼僅用於色碼展示用 -->
<ul class="demo-palettes">
  <!-- $nav-red -->
  <li>
    <i class="colorPaper demo-navRed"></i>
    <p class="colorValue">$nav-red</p>
    <p class="colorCode">#B81C22</p>
  </li>
  <!-- $nav-darkblue -->
  <li>
    <i class="colorPaper demo-navDarkBlue"></i>
    <p class="colorValue">$nav-darkblue</p>
    <p class="colorCode">#004D98</p>
  </li>
  <!-- $nav-yellow -->
  <li>
    <i class="colorPaper demo-navYellow"></i>
    <p class="colorValue">$nav-yellow</p>
    <p class="colorCode">#EEA35C</p>
  </li>
  <!-- $nav-pink -->
  <li>
    <i class="colorPaper demo-navPink"></i>
    <p class="colorValue">$nav-pink</p>
    <p class="colorCode">#DC4690</p>
  </li>
  <!-- $nav-cornflower -->
  <li>
    <i class="colorPaper demo-navCornflower"></i>
    <p class="colorValue">$nav-cornflower</p>
    <p class="colorCode">#889DFF</p>
  </li>
  <!-- $nav-coral -->
  <li>
    <i class="colorPaper demo-navCoral"></i>
    <p class="colorValue">$nav-coral</p>
    <p class="colorCode">#FF8B9B</p>
  </li>
  <!-- $nav-purple -->
  <li>
    <i class="colorPaper demo-navPurple"></i>
    <p class="colorValue">$nav-purple</p>
    <p class="colorCode">#BA4AE7</p>
  </li>
  <!-- $nav-green -->
  <li>
    <i class="colorPaper demo-navGreen"></i>
    <p class="colorValue">$nav-green</p>
    <p class="colorCode">#45B035</p>
  </li>
  <!-- $nav-pumpkin -->
  <li>
    <i class="colorPaper demo-navPumpkin"></i>
    <p class="colorValue">$nav-pumpkin</p>
    <p class="colorCode">#FF6800</p>
  </li>
  <!-- $nav-darkcyan -->
  <li>
    <i class="colorPaper demo-navDarkCyan"></i>
    <p class="colorValue">$nav-darkcyan</p>
    <p class="colorCode">#889DFF</p>
  </li>
  <!-- $nav-blue -->
  <li>
    <i class="colorPaper demo-navBlue"></i>
    <p class="colorValue">$nav-blue</p>
    <p class="colorCode">#0089C0</p>
  </li>
  <!-- $nav-indigo -->
  <li>
    <i class="colorPaper demo-navIndigo"></i>
    <p class="colorValue">$nav-indigo</p>
    <p class="colorCode">#433783</p>
  </li>
</ul>

首頁樓層區塊

  • $nav-red

    #B81C22

  • $nav-darkblue

    #004D98

  • $nav-green

    #45B035

  • $nav-pink

    #DC4690

  • $nav-cornflower

    #889DFF

  • $nav-coral

    #FF8B9B

<!-- ＊此程式碼僅用於色碼展示用 -->
<ul class="demo-palettes">
  <!-- $nav-red -->
  <li>
    <i class="colorPaper demo-navRed"></i>
    <p class="colorValue">$nav-red</p>
    <p class="colorCode">#B81C22</p>
  </li>
  <!-- $nav-darkblue -->
  <li>
    <i class="colorPaper demo-navDarkBlue"></i>
    <p class="colorValue">$nav-darkblue</p>
    <p class="colorCode">#004D98</p>
  </li>
  <!-- $nav-green -->
  <li>
    <i class="colorPaper demo-navGreen"></i>
    <p class="colorValue">$nav-green</p>
    <p class="colorCode">#45B035</p>
  </li>
  <!-- $nav-pink -->
  <li>
    <i class="colorPaper demo-navPink"></i>
    <p class="colorValue">$nav-pink</p>
    <p class="colorCode">#DC4690</p>
  </li>
  <!-- $nav-cornflower -->
  <li>
    <i class="colorPaper demo-navCornflower"></i>
    <p class="colorValue">$nav-cornflower</p>
    <p class="colorCode">#889DFF</p>
  </li>
  <!-- $nav-coral -->
  <li>
    <i class="colorPaper demo-navCoral"></i>
    <p class="colorValue">$nav-coral</p>
    <p class="colorCode">#FF8B9B</p>
  </li>
</ul>

Button

  • $btn-primary-bg

    #C8D100

  • $btn-secondary-bg

    #ED9E02

  • $btn-query-bg

    #0090D4

  • $btn-disabled-bg

    #DCDDDE

  • $btn-share-bg

    #3B5998

  • $btn-favorite-bg

    #E64894

<!-- ＊此程式碼僅用於色碼展示用 -->
<ul class="demo-palettes">
  <!-- $btn-primary-bg :: 主要按鈕 -->
  <li>
    <i class="colorPaper demo-baseYellowGreen"></i>
    <p class="colorValue">$btn-primary-bg</p>
    <p class="colorCode">#C8D100</p>
  </li>
  <!-- $btn-secondary-bg :: 次要按鈕 -->
  <li>
    <i class="colorPaper demo-baseOrange"></i>
    <p class="colorValue">$btn-secondary-bg</p>
    <p class="colorCode">#ED9E02</p>
  </li>
  <!-- $btn-query-bg :: 查詢按鈕 -->
  <li>
    <i class="colorPaper demo-baseBlue"></i>
    <p class="colorValue">$btn-query-bg</p>
    <p class="colorCode">#0090D4</p>
  </li>
  <!-- $btn-disabled-bg :: 禁止點擊 -->
  <li>
    <i class="colorPaper demo-baseGrayLight"></i>
    <p class="colorValue">$btn-disabled-bg</p>
    <p class="colorCode">#DCDDDE</p>
  </li>
  <!-- $btn-share-bg :: FB分享 -->
  <li>
    <i class="colorPaper demo-baseShare"></i>
    <p class="colorValue">$btn-share-bg</p>
    <p class="colorCode">#3B5998</p>
  </li>
  <!-- $btn-favorite-bg :: 收藏 -->
  <li>
    <i class="colorPaper demo-baseLike"></i>
    <p class="colorValue">$btn-favorite-bg</p>
    <p class="colorCode">#E64894</p>
  </li>
</ul>

Message

  • $alert-info-bg

    #E8F7FD

  • $alert-success-bg

    #4CB648

  • $alert-warning-bg

    #FCC72C

  • $alert-danger-bg

    #F61A13

<!-- ＊僅用於此頁色碼展示 -->
<ul class="demo-palettes">
  <!-- $alert-info-bg :: Info -->
  <li>
    <i class="colorPaper demo-baseBlueLight"></i>
    <p class="colorValue">$alert-info-bg</p>
    <p class="colorCode">#E8F7FD</p>
  </li>
  <!-- $alert-success-bg :: Success -->
  <li>
    <i class="colorPaper demo-baseGreen"></i>
    <p class="colorValue">$alert-success-bg</p>
    <p class="colorCode">#4CB648</p>
  </li>
  <!-- $alert-warning-bg :: Warning -->
  <li>
    <i class="colorPaper demo-baseGold"></i>
    <p class="colorValue">$alert-warning-bg</p>
    <p class="colorCode">#FCC72C</p>
  </li>
  <!-- $alert-danger-bg :: Danger -->
  <li>
    <i class="colorPaper demo-baseVermillion"></i>
    <p class="colorValue">$alert-danger-bg</p>
    <p class="colorCode">#F61A13</p>
  </li>
</ul>

其他通用色票

  • $black

    #000000

  • $white

    #FFFFFF

  • $dark

    #1B1C1D

  • $gray

    #6F7274

  • $gray-light

    #DCDDDE

  • $silver

    #F3F4F5

  • $silver-light

    #FAFAFA

  • $vermillion

    #F61A13

  • $pumpkin

    #F17200

  • $yellow

    #F8E71C

  • $deeppink

    #EF337B

<!-- ＊此程式碼僅用於色碼展示用 -->
<ul class="demo-palettes">
  <!-- $black -->
  <li>
    <i class="colorPaper demo-baseBlack"></i>
    <p class="colorValue">$black</p>
    <p class="colorCode">#000000</p>
  </li>
  <!-- $white -->
  <li>
    <i class="colorPaper demo-baseWhite"></i>
    <p class="colorValue">$white</p>
    <p class="colorCode">#FFFFFF</p>
  </li>
  <!-- $dark :: 標題 -->
  <li>
    <i class="colorPaper demo-baseDark"></i>
    <p class="colorValue">$dark</p>
    <p class="colorCode">#1B1C1D</p>
  </li>
  <!-- $gray :: 文字預設 -->
  <li>
    <i class="colorPaper demo-baseGray"></i>
    <p class="colorValue">$gray</p>
    <p class="colorCode">#6F7274</p>
  </li>
  <!-- $gray-light :: 框線 -->
  <li>
    <i class="colorPaper demo-baseGrayLight"></i>
    <p class="colorValue">$gray-light</p>
    <p class="colorCode">#DCDDDE</p>
  </li>
  <!-- $silver :: 背景色 / 區塊底色 -->
  <li>
    <i class="colorPaper demo-baseSilver"></i>
    <p class="colorValue">$silver</p>
    <p class="colorCode">#F3F4F5</p>
  </li>
  <!-- $vermillion :: 重點紅字 -->
  <li>
    <i class="colorPaper demo-baseVermillion"></i>
    <p class="colorValue">$vermillion</p>
    <p class="colorCode">#F61A13</p>
  </li>
  <!-- $pumpkin :: 優惠券底色 -->
  <li>
    <i class="colorPaper demo-basePumpkin"></i>
    <p class="colorValue">$pumpkin</p>
    <p class="colorCode">#F17200</p>
  </li>
  <!-- $yellow :: 隱形賣場第一項商品金額  -->
  <li>
    <i class="colorPaper demo-baseYellow"></i>
    <p class="colorValue">$yellow</p>
    <p class="colorCode">#F8E71C</p>
  </li>
  <!-- $deeppink :: 價格 / 數量 / 重點文字 -->
  <li>
    <i class="colorPaper demo-baseDeeppink"></i>
    <p class="colorValue">$deeppink</p>
    <p class="colorCode">#EF337B</p>
  </li>
</ul>

Grid

格線共 24 欄，間距為 0px

使用格線時，必須用 <div class="row"> 包覆。而 Class 命名為 "col-md-" + "1~24" 之間的數值，且欄位總合必等於"24"。(範例如下)

col-md-3
col-md-21
col-md-4
col-md-20
col-md-5
col-md-19
col-md-6
col-md-18
col-md-7
col-md-17
col-md-8
col-md-16
col-md-9
col-md-15
col-md-10
col-md-14
col-md-11
col-md-13
col-md-12
col-md-12
<div class="row demo-grid">
  <div class="col-md-3 demo-baseGrayLight">col-md-3</div>
  <div class="col-md-21 demo-baseBlueLight">col-md-21</div>
</div>
<div class="row demo-grid">
  <div class="col-md-4 demo-baseGrayLight">col-md-4</div>
  <div class="col-md-20 demo-baseBlueLight">col-md-20</div>
</div>
<div class="row demo-grid">
  <div class="col-md-5 demo-baseGrayLight">col-md-5</div>
  <div class="col-md-19 demo-baseBlueLight">col-md-19</div>
</div>
<div class="row demo-grid">
  <div class="col-md-6 demo-baseGrayLight">col-md-6</div>
  <div class="col-md-18 demo-baseBlueLight">col-md-18</div>
</div>
<div class="row demo-grid">
  <div class="col-md-7 demo-baseGrayLight">col-md-7</div>
  <div class="col-md-17 demo-baseBlueLight">col-md-17</div>
</div>
<div class="row demo-grid">
  <div class="col-md-8 demo-baseGrayLight">col-md-8</div>
  <div class="col-md-16 demo-baseBlueLight">col-md-16</div>
</div>
<div class="row demo-grid">
  <div class="col-md-9 demo-baseGrayLight">col-md-9</div>
  <div class="col-md-15 demo-baseBlueLight">col-md-15</div>
</div>
<div class="row demo-grid">
  <div class="col-md-10 demo-baseGrayLight">col-md-10</div>
  <div class="col-md-14 demo-baseBlueLight">col-md-14</div>
</div>
<div class="row demo-grid">
  <div class="col-md-11 demo-baseGrayLight">col-md-11</div>
  <div class="col-md-13 demo-baseBlueLight">col-md-13</div>
</div>
<div class="row demo-grid">
  <div class="col-md-12 demo-baseGrayLight">col-md-12</div>
  <div class="col-md-12 demo-baseBlueLight">col-md-12</div>
</div>

Icons

全商品分類

<i class="icon icon-cate-a"></i>
<i class="icon icon-cate-b"></i>
<i class="icon icon-cate-c"></i>
<i class="icon icon-cate-d"></i>
<i class="icon icon-cate-e"></i>
<i class="icon icon-cate-f"></i>
<i class="icon icon-cate-g"></i>
<i class="icon icon-cate-h"></i>
<i class="icon icon-cate-i"></i>
<i class="icon icon-cate-j"></i>

Footer

<i class="icon icon-footer-free"></i>
<i class="icon icon-footer-truck"></i>
<i class="icon icon-footer-good"></i>
<i class="icon icon-footer-share"></i>

會員權益

<i class="icon icon-purview-a"></i>
<i class="icon icon-purview-b"></i>
<i class="icon icon-purview-c"></i>
<i class="icon icon-purview-d"></i>
<i class="icon icon-purview-e"></i>
<i class="icon icon-purview-f"></i>

箭頭符號 & 加減符號

　 　 　 　 　 　 　 　 　 　 　 　 　 　 
<!-- 箭頭符號 -->
<i class="icon icon-arrow-first"></i>　
<i class="icon icon-arrow-left"></i>　
<i class="icon icon-arrow-right"></i>　
<i class="icon icon-arrow-last"></i>　
<i class="icon icon-arrow-down"></i>　
<i class="icon icon-arrow-up"></i>　
<i class="icon icon-arrow-circle"></i>　
<i class="icon icon-arrow-circle green"></i>　
<i class="icon icon-caret-down"></i>　
<!-- 加減符號 -->
<i class="icon icon-plus"></i>　
<i class="icon icon-minus"></i>　
<i class="icon icon-plus-square"></i>　
<i class="icon icon-minus-square"></i>　
<i class="icon icon-plus-circle"></i>　

通用圖示

<i class="icon icon-cart"></i>
<i class="icon icon-search"></i>
<i class="icon icon-user"></i>
<i class="icon icon-avatar"></i>
<i class="icon icon-avatar-user"></i>
<i class="icon icon-avatar-headset"></i>
<i class="icon icon-delete"></i>
<i class="icon icon-error"></i>
<i class="icon icon-check"></i>
<i class="icon icon-check green"></i>
<i class="icon icon-check-circle"></i>
<i class="icon icon-checkbox-off"></i>
<i class="icon icon-checkbox-on"></i>
<i class="icon icon-eye-show"></i>
<i class="icon icon-eye-hide"></i>
<i class="icon icon-close"></i>
<i class="icon icon-home"></i>
<i class="icon icon-home blue"></i>
<i class="icon icon-store"></i>
<i class="icon icon-truck"></i>
<i class="icon icon-truck blue"></i>
<i class="icon icon-truck light"></i>
<i class="icon icon-camera"></i>
<i class="icon icon-exclamation-triangle"></i>
<i class="icon icon-exclamation-triangle error"></i>
<i class="icon icon-attention-circle"></i>
<i class="icon icon-help"></i>
<i class="icon icon-info-circle"></i>
<i class="icon icon-folder-plus"></i>
<i class="icon icon-box"></i>
<i class="icon icon-box blue"></i>
<i class="icon icon-phone"></i>
<i class="icon icon-phone-scan"></i>
<i class="icon icon-location"></i>
<i class="icon icon-location red"></i>
<i class="icon icon-location green"></i>
<i class="icon icon-location blue"></i>
<i class="icon icon-location yellow"></i>
<i class="icon icon-bag"></i>
<i class="icon icon-gift"></i>
<i class="icon icon-thumbs-up"></i>
<i class="icon icon-megaphone"></i>
<i class="icon icon-horn"></i>
<i class="icon icon-mail"></i>
<i class="icon icon-ticket"></i>
<i class="icon icon-money"></i>
<i class="icon icon-money blue"></i>
<i class="icon icon-purse"></i>
<i class="icon icon-purse blue"></i>
<i class="icon icon-free"></i>
<i class="icon icon-free blue"></i>
<i class="icon icon-clock"></i>
<i class="icon icon-clock blue"></i>
<i class="icon icon-calendar"></i>
<i class="icon icon-calendar blue"></i>
<i class="icon icon-lock"></i>
<i class="icon icon-lock blue"></i>
<i class="icon icon-refresh"></i>
<i class="icon icon-tag"></i>
<i class="icon icon-tag blue"></i>
<i class="icon icon-print"></i>
<i class="icon icon-download"></i>
<i class="icon icon-card"></i>
<i class="icon icon-visa"></i>
<i class="icon icon-master-card"></i>
<i class="icon icon-jcb"></i>
<i class="icon icon-share"></i>
<i class="icon icon-share blue"></i>
<i class="icon icon-share-fb"></i>
<i class="icon icon-google-map"></i>

瀏覽器

<i class="icon icon-ie"></i>
<i class="icon icon-chrome"></i>
<i class="icon icon-firefox"></i>

Icon Size

　 　 　 　 　 　 
<i class="icon icon-cart" title="16px(預設)"></i>　
<i class="icon icon-cart icon-sm" title="12px"></i>　
<i class="icon icon-cart icon-md" title="24px"></i>　
<i class="icon icon-cart icon-lg" title="32px"></i>　
<i class="icon icon-cart icon-xl" title="48px"></i>　
<i class="icon icon-cart icon-xxl" title="112px"></i>　

Typography

H1 ～ H6, P

36/48, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】

30/40, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】

24/34, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】

18/28, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】

15/24, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】
13/22, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】

15/24, 2256萬超高像素相機 Snapdragon™ 821 性能版

<h1>36/48, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】</h1><!-- font-size: 36px, line-height: 48px -->
<h2>30/40, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】</h2><!-- font-size: 30px, line-height: 40px -->
<h3>24/34, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】</h3><!-- font-size: 24px, line-height: 34px -->
<h4>18/28, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】</h4><!-- font-size: 18px, line-height: 28px -->
<h5>15/24, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】</h5><!-- font-size: 15px, line-height: 24px -->
<h6>13/22, HTC One A9(A9u)-32G【下殺↘$3910加送原廠皮套】</h6><!-- font-size: 13px, line-height: 22px -->
<p>15/24, 2256萬超高像素相機 Snapdragon™ 821 性能版</p><!-- font-size: 15px, line-height: 24px -->

字級大小

15px(預設)

12px

13px

18px

24px

30px

36px

64px

<p>15px(預設)</p>
<p class="fn-mini">12px</p>
<p class="fn-sm">13px</p>
<p class="fn-md">18px</p>
<p class="fn-lg">24px</p>
<p class="fn-xl">30px</p>
<p class="fn-xxl">36px</p>
<p class="fn-super">64px</p>

文字顏色指定

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

密碼強度：高

密碼強度：普通

密碼強度：低

$159,820

每筆訂單滿$490元以上(含)即免收運費

每筆訂單滿$490元以上(含)即免收運費

每筆訂單滿$490元以上(含)即免收運費

<!-- 一般文字狀態 -->
<p class="success">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="warning">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="info">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="danger">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="dark">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="disabled">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<!-- 表單回報狀態 -->
<p class="status-success">密碼強度：高</p>
<p class="status-warning">密碼強度：普通</p>
<p class="status-danger">密碼強度：低</p>
<!-- 價格 -->
<p class="price">$159,820</p>
<!-- 註解 -->
<p class="text-muted">每筆訂單滿$490元以上(含)即免收運費</p>
<p class="sub">每筆訂單滿$490元以上(含)即免收運費</p>
<!-- 加底線 -->
<p class="underline">每筆訂單滿$490元以上(含)即免收運費</p>

其他文字樣式

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

小型字體

粗體

刪除

螢光筆

聯絡地址

英文全小寫, ASUS ZenFone Zoom(ZX551ML Z3580) 4G/64G

英文全大寫, ASUS ZenFone Zoom(ZX551ML Z3580) 4G/64G

商品配送至您指定的神腦門市後，門市將保管七天，如果不在期限內完成取貨，您的訂單將會被取消，除了影響您使用商品的時間，也會影響您未來訂購權益喔！

<!-- 標準/粗體/斜體 -->
<p class="font-normal">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="font-bold">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="font-italic">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<!-- 其他文字標籤 -->
<p><small>小型字體</small></p>
<p><b>粗體</b></p>
<p><del>刪除</del></p>
<p><mark>螢光筆</mark></p>
<p><address>聯絡地址</address></p>
<!-- 英文大小寫 -->
<p class="text-lowercase">英文全小寫, ASUS ZenFone Zoom(ZX551ML Z3580) 4G/64G</p>
<p class="text-uppercase">英文全大寫, ASUS ZenFone Zoom(ZX551ML Z3580) 4G/64G</p>
<!-- 文字超過一行改成「...」 -->
<p class="text-truncate">商品配送至您指定的神腦門市後，門市將保管七天，如果不在期限內完成取貨，您的訂單將會被取消，除了影響您使用商品的時間，也會影響您未來訂購權益喔！</p>

文字對齊

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

2256萬超高像素相機 Snapdragon™ 821 性能版

<!-- 水平對齊 -->
<p class="text-left">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="text-right">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="text-center">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<!-- 垂直對齊 -->
<p class="text-top">2256萬超高像素相機 Snapdragon™ 821 性能版</p>
<p class="text-middle">2256萬超高像素相機 Snapdragon™ 821 性能版</p>

List Style

  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
  • 雙曲面的美，源自對螢幕科技的不斷探索。
<!-- 阿拉伯數字 -->
<ul class="has-type-decimal">
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
</ul>
<!-- 空心圓 -->
<ul class="has-type-circle">
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
</ul>
<!-- 點 -->
<ul class="has-type-disc">
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
</ul>
<!-- 箭頭 -->
<ul class="has-type-caret">
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
  <li>雙曲面的美，源自對螢幕科技的不斷探索。</li>
</ul>

Definition List

藝術品般的雙曲面 背後是創新的柔性螢幕科技
雙曲面的美，源自對螢幕科技的不斷探索。
採用柔性 OLED，一塊可以彎曲的螢幕*，貼合於藝術品般的 3D 曲面玻璃，讓纖薄的機身擁有更大的顯示面積。
藝術品般的雙曲面 背後是創新的柔性螢幕科技
雙曲面的美，源自對螢幕科技的不斷探索。
採用柔性 OLED，一塊可以彎曲的螢幕*，貼合於藝術品般的 3D 曲面玻璃，讓纖薄的機身擁有更大的顯示面積。
換貨說明

因考量換貨作業時間冗長，影響您的使用權益，神腦生活未提供換貨服務，如收到商品不符需求或有瑕疵、缺件問題，請於7日鑑賞期內申請退貨後重新上網選購。

換貨說明

因考量換貨作業時間冗長，影響您的使用權益，神腦生活未提供換貨服務，如收到商品不符需求或有瑕疵、缺件問題，請於7日鑑賞期內申請退貨後重新上網選購。

<!-- 樣式一：用於服務說明頁，例如關於神腦生活、配送取貨等 -->
<dl class="manual">
  <dt>藝術品般的雙曲面 背後是創新的柔性螢幕科技</dt>
  <dd>
    雙曲面的美，源自對螢幕科技的不斷探索。<br>
    採用柔性 OLED，一塊可以彎曲的螢幕*，貼合於藝術品般的 3D 曲面玻璃，讓纖薄的機身擁有更大的顯示面積。
  </dd>
  <dt>藝術品般的雙曲面 背後是創新的柔性螢幕科技</dt>
  <dd>
    雙曲面的美，源自對螢幕科技的不斷探索。<br>
    採用柔性 OLED，一塊可以彎曲的螢幕*，貼合於藝術品般的 3D 曲面玻璃，讓纖薄的機身擁有更大的顯示面積。
  </dd>
</dl>
<!-- 樣式二：用於商品詳細頁「配送換貨說明」 -->
<dl class="prd-manual">
  <dt><span class="inner-title">換貨說明</span></dt>
  <dd>
    <p>因考量換貨作業時間冗長，影響您的使用權益，神腦生活未提供換貨服務，如收到商品不符需求或有瑕疵、缺件問題，請於7日鑑賞期內申請退貨後重新上網選購。</p>
  </dd>
  <dt><span class="inner-title">換貨說明</span></dt>
  <dd>
    <p>因考量換貨作業時間冗長，影響您的使用權益，神腦生活未提供換貨服務，如收到商品不符需求或有瑕疵、缺件問題，請於7日鑑賞期內申請退貨後重新上網選購。</p>
  </dd>
</dl>

Utilities

Float

建議使用 float 屬性時，請用 <div class="row"></div> 包覆。 (範例如下)

區塊置左 區塊置右
區塊置中 
<!-- 區塊置左/置右（不建議跟區塊置中混用） -->
<div class="row">
  <span class="pull-left">區塊置左</span>
  <span class="pull-right">區塊置右</span>
</div>
<!-- 區塊置中：需指定寬度，置中效果才會有用（不建議跟區塊置左/置右混用） -->
<div class="row">
  <span class="pull-center w-f4">區塊置中</span>
</div>

Position

元素位置設定包含： '.relative' 相對位置， '.absolute' 絕對位置， '.fixed' 固定位置

Spacing

通常用於「字詞」的左右留白
Class包含： '.left', '.right', '.top', '.bottom'

左右邊間距 8px 左右邊間距 4px


左邊間距 16px 左邊間距 4px 左邊間距 8px 左邊間距 24px 左邊間距 32px 左邊間距 48px


右邊間距 16px 右邊間距 4px 右邊間距 8px 右邊間距 24px 右邊間距 32px 右邊間距 48px


上方間距 16px 上方間距 4px 上方間距 8px 上方間距 24px 上方間距 32px 上方間距 48px


下方間距 16px 下方間距 4px 下方間距 8px 下方間距 24px 下方間距 32px 下方間距 48px 

<!-- Base: Left + Right -->
<p class="border">
  <span class="spacing">左右邊間距 8px</span>
  <span class="spacing sm">左右邊間距 4px</span>
</p><br>
<!-- Left -->
<p class="border left">
  <span class="spacing left">左邊間距 16px</span>
  <span class="spacing left mini">左邊間距 4px</span>
  <span class="spacing left sm">左邊間距 8px</span>
  <span class="spacing left md">左邊間距 24px</span>
  <span class="spacing left lg">左邊間距 32px</span>
  <span class="spacing left xl">左邊間距 48px</span>
</p><br>
<!-- Right -->
<p class="border right text-right">
  <span class="spacing right">右邊間距 16px</span>
  <span class="spacing right mini">右邊間距 4px</span>
  <span class="spacing right sm">右邊間距 8px</span>
  <span class="spacing right md">右邊間距 24px</span>
  <span class="spacing right lg">右邊間距 32px</span>
  <span class="spacing right xl">右邊間距 48px</span>
</p><br>
<!-- Top -->
<p class="border top">
  <span class="spacing top">上方間距 16px</span>
  <span class="spacing top mini">上方間距 4px</span>
  <span class="spacing top sm">上方間距 8px</span>
  <span class="spacing top md">上方間距 24px</span>
  <span class="spacing top lg">上方間距 32px</span>
  <span class="spacing top xl">上方間距 48px</span>
</p><br>
<!-- Bottom -->
<p class="border bottom">
  <span class="spacing bottom">下方間距 16px</span>
  <span class="spacing bottom mini">下方間距 4px</span>
  <span class="spacing bottom sm">下方間距 8px</span>
  <span class="spacing bottom md">下方間距 24px</span>
  <span class="spacing bottom lg">下方間距 32px</span>
  <span class="spacing bottom xl">下方間距 48px</span>
</p>

Divider

通常用於「段落」的前後留白，預設為左右間距 8px
addClass '.horizontal' 則變更為上下間距 16px，並移除左右間距

預設左右間距 8px

變更為上下間距 16px，並移除左右間距

<p class="divider border bottom">預設左右間距 8px</p>
<p class="divider horizontal border bottom">變更為上下間距 16px，並移除左右間距</p>

Border

該區塊加入上方實線

該區塊加入上方虛線

該區塊加入上方點線

該區塊加入下方實線

該區塊加入下方虛線

該區塊加入下方點線

該區塊加入左方實線

該區塊加入右方實線

<p class="border top">該區塊加入上方實線</p>
<p class="border top dashed">該區塊加入上方虛線</p>
<p class="border top dotted">該區塊加入上方點線</p>
<p class="border bottom">該區塊加入下方實線</p>
<p class="border bottom dashed">該區塊加入下方虛線</p>
<p class="border bottom dotted">該區塊加入下方點線</p>
<p class="border left">該區塊加入左方實線</p>
<p class="border right">該區塊加入右方實線</p>

Bar

上下間距 16px & 左右間距 64px 之內容區塊

(共 8 碼，限數字與大寫英文，以 "/" 開頭)
若您發現收不到新密碼簡訊，可能的原因
  • 1、手機設置拒接商業簡訊，請洽電信商
  • 2、手機安裝過濾程式，導致無法收到簡訊
  • 3、因手機收訊品質，影響手機簡訊收發速度
<!-- Gray -->
<div class="bar gray">
  <label for="">請輸入手機條碼：</label>
  <input type="text" class="input-lg"><span class="sub spacing">(共 8 碼，限數字與大寫英文，以 "/" 開頭)</span>
</div>
<!-- Blue -->
<div class="bar blue">
  <h5>若您發現收不到新密碼簡訊，可能的原因</h5>
  <ul>
    <li>1、手機設置拒接商業簡訊，請洽電信商</li>
    <li>2、手機安裝過濾程式，導致無法收到簡訊</li>
    <li>3、因手機收訊品質，影響手機簡訊收發速度</li>
  </ul>
</div>

Toolbar

將頁面功能元件群組。功能通常包含：新增 / 刪除 / 篩選 / 查詢 / 頁籤切換

優惠券查詢： 查詢
訂單日期： 或
篩選條件： 50~20,000 金色
1 / 12 
<div class="toolbar">
  <span class="middle fn-sm">優惠券查詢：</span>
  <select name="" class="select-sm w-f10">
    <option selected="selected" value="最近一個月">最近一個月</option>
    <option value="最近三個月">最近三個月</option>
    <option value="最近六個月">最近六個月</option>
    <option value="一年內">一年內</option>
  </select>
  <select name="" class="select-sm w-f8">
    <option selected="selected" value="全部">全部</option>
    <option value="未使用">未使用</option>
    <option value="已使用">已使用</option>
  </select><a href="" class="btn btn-query btn-sm">查詢</a>
</div>
<div class="toolbar">
  <span class="middle fn-sm">訂單日期：</span>
  <select name="" class="select-sm">
    <option selected="selected" value="最近一個月">最近一個月</option>
    <option value="最近三個月">最近三個月</option>
    <option value="最近六個月">最近六個月</option>
    <option value="一年內">一年內</option>
  </select><span class="divider fn-sm">或</span>
  <div class="input-group input-group-sm">
    <input placeholder="請輸入訂單編號查詢" type="text" class="input-sm">
    <button class="btn btn-query btn-sm">查詢</button>
  </div>
</div>
<div class="toolbar">
  <span class="middle fn-sm">篩選條件：</span>
  <span class="tag tag-outline">50~20,000<i class="icon icon-close"></i></span>
  <span class="tag tag-outline">金色<i class="icon icon-close"></i></span>
</div>
<div class="toolbar">
  <button data-toggle="modal" data-target="#addModal" class="btn btn-default btn-sm pull-left"><i class="icon icon-folder-plus"></i>新增收件人資訊</button>
</div>
<div class="toolbar">
  <button class="btn btn-default btn-sm pull-left"><i class="icon icon-delete"></i>刪除</button>
  <div class="btn-group pills pull-right">
    <span class="fn-sm spacing right"><b class="spacing sm">1</b> / 12</span>
    <button class="btn btn-default btn-sm"><i class="icon icon-arrow-left"></i></button>
    <button class="btn btn-default btn-sm"><i class="icon icon-arrow-right"></i></button>
  </div>
</div>
TOP