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