Bootstrap教程筆記(三)------文字排版

1.標題:Bootstrap4中定義了h1到h6共六種標題樣式,h1到h6標題字大小從大到小排序。


2.Display標題類:Bootstrap還提供了四個標題類,分別是.display-1, .display-2, .display-3, .display-4,大小也是從大到小排序,Display標題類比h1-h6更大更粗。使用方法<h1 class="display-1">abcdef</h1>,以此類推。

3.幾種文本標籤:

(1)<small>:用於創建字號更小的顏色更淺的文本,例如<h1>標題<small>副標題</small></h1>,其實顏色更淺這一點不是很明顯就是了。

(2)<mark>:定義文本背景爲黃色且具有一定的內邊距。是一種高亮效果。例如<p>普通文本<mark>高亮文本</mark></p>。

(3)<abbr>:縮寫,樣式爲將一條虛線顯示在文本底部,鼠標懸浮時顯示title標籤的文本。例如<p>the <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>。

(4)<blockquote>:引用,註明文本是引用自別處。<blockquote>標籤可以添加.blockquote類,<footer>用於註明出處。例如<blockquote class="blockquote">引用文本<footer class="blockquote-footer">出處</footer></blockquote>

(5)<dl>:description list,描述列表,內部可以包含<dt>(description title), <dd>(definition description)兩種標籤。例如<dl><dt>標題是abc</dt><dd>標題是小寫字母</d><dt>標題是ABC</dt><dd>標題是大寫字母</d></dl>

(6)<code>:代碼片段,例如<p>以下HTML元素:<code>span</code>,<code>section</code>, 和<code>div</code> 用於定義部分文檔內容。</p>

(7)<kbd>:標明是應該通過鍵盤輸入的文本。<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

(8)<pre>:用於顯示多行文本。保持原有的樣式不變。例如:

<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章