Bootstrap提供了強大的排版（Typography）工具，讓我們可以輕鬆地設計出優雅的文字內容。在這篇文章中，我會介紹如何使用 Bootstrap 來幫助做好自己的的網站文字排版。
在介紹排版（Typography）之前，我來講一下bootstrap非常常用的單位， rem，rem 是一種相對於根元素（通常是 <html> 標籤，body也可以是）的字型大小單位。主要用於排版(padding、margin、top等)和元素尺寸(width、height,font-size等)的設定。
相對於 px（像素）這種絕對單位，rem 則較有靈活性。怎麼說?
首先，rem具有繼承性，如果根元素調整字型大小，所有套用rem的元素的自行都會跟著改變。
再來，rem適合用在(RWD)響應式設計，可以根據不同螢幕大小調整根元素的字型大小，從而自動調整整個網站的排版。
範例:
body {
font-size: 16px; /* 設根元素字型大小為 16px */
}
.box {
font-size: 1.5rem; /* 1.5 倍根元素字型大小，即 24px */
padding: 1rem; /* 上下左右各 1 倍根元素字型大小的 padding，即 16px */
}
rem只會看根元素大小，不管外面有多少層父元素都是如此。
可以看這個CodePen rem 範例
而另外還有一個叫em的單位，它也是相對單位，但根rem不同的是，em是相對父元素的單位，如果疊了好幾層都用em，最裡面那層就是每一層的倍數相乘。
可以看這個CodePen em 範例
下面表格是常見網頁設計的大小單位，方便做比較。
| 單位 | 描述 | 相對性 | 基準 |
|---|---|---|---|
| px | 絕對單位，每個「點」 | 無 | 螢幕 |
| em | 相對單位，子元素「倍數」 | 父元素 | 父元素的字型大小 |
| rem | 相對單位，元素「倍數」 | 根元素 | 根元素的字型大小 |
| % | 相對單位，子元素「百分比」 | 父元素 | 父元素的尺寸或值的百分比 |
這裡bootstrap文件的介紹主要是能幫助朋朋們更容易、快速理解它的官方文件，因此建議搭配文件服用。
官方文件 Typography 那一頁
.h1 到 .h6 的類別。.h1 到 .h6還不夠大，我們還可以添加.display-1到.display-6類別。.lead加在段落中可以讓文字更大、更顯眼，可以用來做前導主題。Bootstrap 行內文本使用 HTML5 元素的格式，有助更好地呈現文本內容，凸顯重要信息，調整文本大小和樣式，以及引用引文和注釋。可以提高文本的可讀性和可理解性。
以下是整理表格:
| 元素 | 效果 |
|---|---|
<mark> |
黃色螢光筆。 |
<small> |
顯示為較小的字型。 |
<strong> |
加粗字體以突出強調重要性。 |
<em> |
斜體文本以突出強調情感或強調性。 |
<abbr> |
用於定義縮寫或縮略詞，當鼠標懸停時顯示完整解釋。 |
<blockquote> |
用於引用大塊文本，通常包含作者和引用來源信息。 |
<q> |
用於引用短文本，通常包含在雙引號中。 |
<cite> |
用於標示引文的作者或來源。 |
<del> 、<s> |
刪除線。 |
<ins> 、<u> |
下劃線標示。 |
改變文字對齊、變換、樣式、字重、行高、裝飾線和顏色可以透過 文本通用類別 和 顏色通用類別 ，之後篇章會進行說明。
這裡先講bootstrap 的 左、右 會分別用 start 與 end 表示，例如原本的margin-right 在bootstrap 就是me；而原本的margin-left 在bootstrap 就是ms表示。
.text-center, .text-end (就是 text-align:right), 而甚麼都沒加預設上就是 text-align: left了。ul添加.list-unstyled，而如果你的列表是巢狀列表(例如ul中又有包ul)，內層ul還要加一次.list-unstyled。margin，可分別在ul與li加上.list-inline 和 .list-inline-item。最後就來個小練習，這個CodePen有一些小題目請大家填空，可以加深對於知識點的印象。p.s.解答可以直接看官方文件。
大家下篇見囉~
iThome鐵人賽
看影片追技術