(2) Bootstrap 文字排版類的使用(Typography)

Ivy Ho

Published in

IvyCodeFive

6 min readMay 21, 2020

在Bootstrap 文件(Documentation)>內容(Content) > 文字排版(Typography)這個主題，我們可以看到標題及其他文字排版的使用方法。

本篇會依序介紹以下主題用法:

標題 (Headings)
顯示標題 (Display headings)
行內元素 (Inline text elements)
縮寫 (Abbreviations)
引用文字 (Blockquotes)
清單 (Lists)
描述行清單 (Description list alignment)

標題 (Headings)

這邊分為語意化的標籤以及不具語意的class用法。

語意化的標題標籤 :

我們可以使用<h1>~<h6>來撰寫標題，就像原本寫html一樣

📝小補充:

Bootstrap預設<h1>~<h6>標籤的

行高為1.2
font-weight: 500;
h1 預設文字大小為 2.5rem 也就是16px*2.5 = 40px
h2 預設文字大小為 2rem 也就是16px*2 = 32px
h3 預設文字大小為 1.75rem 也就是16px*1.75 = 28px
h4 預設文字大小為 1.5rem 也就是16px*1.5 = 24px
h5 預設文字大小為 1.25rem 也就是16px*1.25 = 20px
h6 預設文字大小為 1rem 也就是16px*1 = 16px

不具語意的標題class

當我們希望字體和標題一樣大，但不希望它具有標題標籤語意時，可以使用h1 ~ h6 class名稱，加在其他文字標籤的class中，如下圖

顯示標題 (Display headings)

如果我們需要字體更大的標題，可以使用 display-1~display-4 的 class 名稱

用法如下 :

📝小補充:

display-1~display -4 的 font-weight: 300; 行高為1.2。
display-1 預設文字大小為6 rem 也就是16px*6 = 96px
display-2 預設文字大小為 5.5rem 也就是16px*5.5 = 88px
display-3 預設文字大小為 4.5rem 也就是16px*4.5 = 72px
display-4 預設文字大小為 3.5rem 也就是16px*3.5 = 56px

行內元素 (Inline text elements)

有以下標籤可以使用

<mark> : highlight 效果

<del> : 被刪除的內容

<s> : 不準確的內容

<ins> : 補充的內容

<u> : 下底線效果

<small>: 文字大小會變成外容器文字的80%，font-weight: 400;

<strong> : 強調語意

<b> : 跟<strong>一樣是粗體，但單純只是突出顯示，不會增加語意重要性
<em> : 跟<i>長得一樣，但em只是單純斜體字，沒有語意化作用

<i> : 語音、技術用語

縮寫 (Abbreviations)

滑鼠移動到字上面，底下會有小標籤跑出來

引用文字 (Blockquotes)

以下是卡斯伯老師的可愛範例😆

<blockquote class="blockquote">
    <p class="mb-0">
        霹靂卡霹靂拉拉，波波力那貝貝魯多
    </p>
    <footer class="blockquote-footer">
        小魔女
        <cite title="Source Title">
            Do Re Mi
        </cite>
    </footer>
</blockquote>