字體

Result HTML
大字型 - 她透過窗戶目不轉睛地仰望著星星。
中字型 - 她透過窗戶目不轉睛地仰望著星星。
小字型 - 她透過窗戶目不轉睛地仰望著星星。
極小字型 - 她透過窗戶目不轉睛地仰望著星星。
刪除線
+100
-100

類型0 - 總共是 NT$1,000
類型1 - 發票號碼是 MH-12345678
類型2 - 料號是 88180101-010
類型3 - 撿貨編號是 婉婷全九
類型4 - 火箭快遞單號是 439944

primary
secondary
success
warning
danger
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="txt-demo-box">
  <div class="txt-lg">大字型 - 她透過窗戶目不轉睛地仰望著星星。</div>
  <div class="txt-md">中字型 - 她透過窗戶目不轉睛地仰望著星星。</div>
  <div class="txt-sm">小字型 - 她透過窗戶目不轉睛地仰望著星星。</div>
  <div class="txt-ex-sm">極小字型 - 她透過窗戶目不轉睛地仰望著星星。</div>
  <div class="txt-strikethrough">刪除線</div>
  <div class="txt-positive">+100</div>
  <div class="txt-negative">-100</div>
  <br />
  <div class="txt-type0">類型0 - 總共是 NT$1,000</div>
  <div class="txt-type1">類型1 - 發票號碼是 MH-12345678</div>
  <div class="txt-type2">類型2 - 料號是 88180101-010</div>
  <div class="txt-type3">類型3 - 撿貨編號是 婉婷全九</div>
  <div class="txt-type4">類型4 - 火箭快遞單號是 439944</div>
  <br />
  <div class="txt-primary">primary</div>
  <div class="txt-secondary">secondary</div>
  <div class="txt-success">success</div>
  <div class="txt-warn">warning</div>
  <div class="txt-danger">danger</div>
</div>

文字排版 - Typography

標題層級

Result HTML

千里之行，始於足下

千里之行，始於足下

千里之行，始於足下

千里之行，始於足下

千里之行，始於足下
千里之行，始於足下
1
2
3
4
5
6

<h1>千里之行，始於足下</h1>
<h2>千里之行，始於足下</h2>
<h3>千里之行，始於足下</h3>
<h4>千里之行，始於足下</h4>
<h5>千里之行，始於足下</h5>
<h6>千里之行，始於足下</h6>
Result HTML

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
1
2
3
4
5
6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

內文

們太間了相用，創一同問流我？ 後童感，飛實我絕結學識風、舞然意的目。美起直多有，的情術公當小銀當算角成廣，要臺寶理、一但團母要孩處難論老過這，物通一性進開後：要來英長界。 觀到這向鄉推紅言統、大神的著？到其過需當的的行自謝明，力條成國天手要倒一爾，出臉情臺，且候動賽大條家意，重們林聲生未；整和自不請定計完道洋約才都月與題帶安又他電效可飯如再？神起員，們聽作育實子認大直面由少在命的了體大、影至因母亮見護我年連因，遊氣年相受一器者高利長、先子及都否民手是文部下人，意學連帶的紅只展同親上後國體……物社們？這以看空天常力重會統客室灣身裡樣有化都、驗然留沒成了力所頭高，此那應去說作倒們海。我術不走至起得司給們。 教全我間成遊打禮出民起寫用境力進驗史等什策觀目吸家你女化家間半的人金情玩它如便龍孩素通基東辦能一居業比？工子境關地自坡達！內銀上還感備館規創代古業了會紅家車在家知時的的甚備上可標我，藝係實，際童福；怕絕謝明的實青舉候走提果國原增。

表格文字

Result HTML
標題
這是大標題
這是小標題
這是標籤
這是超連結
這是大標題
這是小標題
這是標籤
這是超連結
訂單編號 SP12345678
托運單號 1002-6790-5721
發票號碼 MH-12345678
火箭快遞 439944
便利貼暱稱 eddie's avatar eddie
金額 NT$1,000
收件人 黃宏成
IP 115.43.250.18
料號 88180101-010
撿貨編號 婉婷全九 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<table class="table">
  <tr>
    <th>
      標題
      <div class="title">這是大標題</div>
      <div class="sub">這是小標題</div>
      <span class="tag">這是標籤</span>
      <br>
      <a class="link">這是超連結</a>
    </th>
    <td>
      <div class="title">這是大標題</div>
      <div class="sub">這是小標題</div>
      <span class="tag">這是標籤</span>
      <br>
      <a class="link">這是超連結</a>
    </td>
    <td></td>
  </tr>
  <tr>
    <th>訂單編號</th>
    <td>SP12345678</td>
    <td></td>
  </tr>
  <tr>
    <th>托運單號</th>
    <td>1002-6790-5721</td>
    <td></td>
  </tr>
  <tr>
    <th>發票號碼</th>
    <td class="txt-type1">MH-12345678</td>
    <td></td>
  </tr>
  <tr>
    <th>火箭快遞</th>
    <td class="txt-type4">439944</td>
    <td></td>
  </tr>
  <tr>
    <th>便利貼暱稱</th>
    <td class="txt-avatar">
      <img class="avatar avatar-sm avatar-eddie"
           src="/beyond/assets/img/avatar-eddie.jpg"
           alt="eddie's avatar" />
      eddie
    </td>
    <td></td>
  </tr>
  <tr>
    <th>金額</th>
    <td class="txt-type0">NT$1,000</td>
    <td></td>
  </tr>
  <tr>
    <th>收件人</th>
    <td>黃宏成</td>
    <td></td>
  </tr>
  <tr>
    <th>IP</th>
    <td>115.43.250.18</td>
    <td></td>
  </tr>
  <tr>
    <th>料號</th>
    <td class="txt-type2">88180101-010</td>
    <td></td>
  </tr>
  <tr>
    <th>撿貨編號</th>
    <td class="txt-type3">婉婷全九</td>
    <td></td>
  </tr>
</table>

disabled 背景與內文

Result HTML
標籤
主要 次要 成功 危險 警告 資訊 光明 黑暗 非常危險
type0 type1 type2 type3 type4
訂單編號 SP12345678
托運單號 1002-6790-5721
發票號碼 MH-12345678
火箭快遞 439944
便利貼暱稱 eddie's avatar eddie
金額 NT$1,000
收件人 黃宏成
IP 115.43.250.18
料號 88180101-010
撿貨編號 婉婷全九 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<table class="table table-fonts bg-disabled content-disabled">
  <tr>
    <th>標籤</th>
    <td>
      <div>
        <span class="tag tag-primary">主要</span>
        <span class="tag tag-secondary">次要</span>
        <span class="tag tag-success">成功</span>
        <span class="tag tag-danger">危險</span>
        <span class="tag tag-warn">警告</span>
        <span class="tag tag-info">資訊</span>
        <span class="tag tag-light">光明</span>
        <span class="tag tag-dark">黑暗</span>
        <span class="tag tag-danger-ex">非常危險</span>
      </div>
      <div>
        <span class="tag tag-type0">type0</span>
        <span class="tag tag-type1">type1</span>
        <span class="tag tag-type2">type2</span>
        <span class="tag tag-type3">type3</span>
        <span class="tag tag-type4">type4</span>
      </div>
    </td>
    <td></td>
  </tr>
  <tr>
    <th>訂單編號</th>
    <td>SP12345678</td>
    <td></td>
  </tr>
  <tr>
    <th>托運單號</th>
    <td>1002-6790-5721</td>
    <td></td>
  </tr>
  <tr>
    <th>發票號碼</th>
    <td class="txt-type1">MH-12345678</td>
    <td></td>
  </tr>
  <tr>
    <th>火箭快遞</th>
    <td class="txt-type4">439944</td>
    <td></td>
  </tr>
  <tr>
    <th>便利貼暱稱</th>
    <td class="txt-avatar">
      <img class="avatar avatar-sm avatar-eddie"
           src="/beyond/assets/img/avatar-eddie.jpg"
           alt="eddie's avatar" />
      eddie
    </td>
    <td></td>
  </tr>
  <tr>
    <th>金額</th>
    <td class="txt-type0">NT$1,000</td>
    <td></td>
  </tr>
  <tr>
    <th>收件人</th>
    <td>黃宏成</td>
    <td></td>
  </tr>
  <tr>
    <th>IP</th>
    <td>115.43.250.18</td>
    <td></td>
  </tr>
  <tr>
    <th>料號</th>
    <td class="txt-type2">88180101-010</td>
    <td></td>
  </tr>
  <tr>
    <th>撿貨編號</th>
    <td class="txt-type3">婉婷全九</td>
    <td></td>
  </tr>
</table>