Bootstrap - 排版

歡迎,未來的網頁開發者們!今天,我們將進入Bootstrap排版的精彩世界。作為你們親切的鄰居電腦老師,我會帶領你們踏上這段旅程,提供大量的範例、解釋,或許還有一兩個爸爸笑話。那麼,我們開始吧!

Bootstrap - Typography

Bootstrap 預設 / 全局設定

Bootstrap 伴有一些預設的排版設定,讓你的文字一開始就好看。這就像為你的網站請了一位個人造型師!

以下是如何使用Bootstrap樣式文字的基本範例:

<p>這是一段由Bootstrap樣式化的文字。</p>

你可能會想,「這看起來就像普通文字!」沒錯!但Bootstrap做了一些微妙的改進。它設置了一個默認的字體家族(通常是無襯線字體),舒適的字體大小和令人愉悅的行高。正是這些小細節使Bootstrap如此強大。

標題

Bootstrap中的標題就像你喜歡的咖啡館裡不同尺寸的咖啡 - 有六種口味,從h1到h6。

<h1>這是一個標題1</h1>
<h2>這是一個標題2</h2>
<h3>這是一個標題3</h3>
<h4>這是一個標題4</h4>
<h5>這是一個標題5</h5>
<h6>這是一個標題6</h6>

每個標題都有自己的大小和粗細,為你的內容創造了一個清晰的層次結構。這就像整理你的衣櫥 - 每樣東西都有它自己的位置!

自定義標題

但如果你想要使用標題樣式而不實際使用標題標籤呢?Bootstrap為你提供了.h1.h6的類別。

<p class="h1">這段文字看起來像標題1</p>
<span class="h3">這個span看起來像標題3</span>

這在你想讓文字看起來像標題但沒有語義意義時非常好用。這就像穿著燕尾服T恤 - 正式,但不是太正式。

顯示標題

當普通標題不足以應付時,Bootstrap提供了「顯示」標題。這些就像超級模特兒的標題 - 大膽、粗體、引人注目。

<h1 class="display-1">顯示1</h1>
<h1 class="display-2">顯示2</h1>
<h1 class="display-3">顯示3</h1>
<h1 class="display-4">顯示4</h1>

這些顯示標題在需要大聲說話時非常完美。但要謹慎使用 - 太多會讓你的頁面開始尖叫!

主導文字

.lead類別是Bootstrap讓一段文字脫穎而出的方式。這就像給你的文字一個擴音器。

<p class="lead">這是一段主導文字。它脫穎而出,與普通段落不同。</p>

用這個來介紹性文字或你想突出的重要信息。

缩寫

Bootstrap為縮寫和首字母縮略詞提供了帶有點狀下劃線的樣式。這就像給你的讀者一個秘密解碼器!

<p>世界衛生組織(<abbr title="World Health Organization">WHO</abbr>)成立於1948年。</p>

將鼠標悬停於縮寫上,你會看到完整術語出現。

引用

Bootstrap中的引用被樣式化以脫穎而出。它們就像段落世界中的酷孩子。

<blockquote class="blockquote">
<p>兩件事是無窮的:宇宙和人的愚蠢;我不確定宇宙是不是。</p>
</blockquote>

總結來源

你可以使用<footer>標籤加上blockquote-footer類別為你的引用添加來源。

<blockquote class="blockquote">
<p>兩件事是無窮的:宇宙和人的愚蠢;我不確定宇宙是不是。</p>
<footer class="blockquote-footer">愛因斯坦</footer>
</blockquote>

這就像給予應得的榮耀,但更有風格!

對齊

Bootstrap讓你可以輕鬆對齊你的文字。這就像教你的文字跳舞 - 左,中,右!

<p class="text-left">左對齊文字。</p>
<p class="text-center">居中對齊文字。</p>
<p class="text-right">右對齊文字。</p>

內聯文字元素

Bootstrap為各種內聯文字元素提供了樣式。這就像文字的瑞士軍刀!

以下是一些常見的內聯文字元素表格:

元素 描述
<mark> 高亮文字
<del> 刪除文字
<s> 刪除線文字
<ins> 插入文字
<u> 底線文字
<small> 小型文字
<strong> 粗體文字
<em> 斜體文字

範例:


<p>你可以使用這些元素來<mark>高亮</mark>、<del>刪除</del>、<s>刪除線</s>

Credits: Image by storyset