最新的Web開發教程
 

Bootstrap文/排版


Bootstrap's默認設置

Bootstrap's全局默認字體大小是14px的,具有1.428線高。

這是應用到<body>和所有段落。

此外,所有的<p>元件具有底部邊緣等於一半的計算線高度(默認10px的)。


Bootstrap與瀏覽器默認設置

在本章中,我們將看看會通過不同的樣式稍微有些HTML元素Bootstrap比瀏覽器默認設置。


<h1> - <h6>

默認情況下,自舉將樣式在HTML標題( <h1><h6>的方式如下:

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
試一試»

<small>

在引導的HTML <small>元素被用來建立任何標題打火機,輔助文本:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text
試一試»

<mark>

Bootstrap將樣式化HTML <mark>按以下方式元素:

Use the mark element to highlight text.

試一試»

<abbr>

Bootstrap將樣式化HTML <abbr>通過以下方式元素:

The WHO was founded in 1948.

試一試»

<blockquote>

Bootstrap將樣式在HTML <blockquote>以下列方式元件:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website
試一試»

要顯示在右邊的報價,使用.blockquote-reverse類:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website
試一試»

<dl>

Bootstrap將樣式化HTML <dl>通過以下方式元素:

Coffee
- black hot drink
Milk
- white cold drink
試一試»

<code>

Bootstrap將樣式的HTML <code>通過以下方式元素:

The following HTML elements: span , section , and div defines a section in a document.

試一試»

<kbd>

Bootstrap將樣式化HTML <kbd>通過以下方式元素:

Use ctrl + p to open the Print dialog box.

試一試»

<pre>

Bootstrap將樣式在HTML <pre>以下列方式元件:

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
試一試»

語境顏色和背景

Bootstrap也有可以用來提供“通過顏色的意思是”一些上下文類。

文本顏色的類是: .text-muted.text-primary.text-success.text-info.text-warning.text-danger

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

試一試»

背景顏色的類是: .bg-primary.bg-successbg-infobg-warning ,並.bg-danger

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

試一試»

更多排版類

下面的自舉類可以被添加到風格HTML元素進一步:

描述
.lead 讓一個段落中脫穎而出 嘗試一下
.small 表示較小的文本(設定為85%的親本的尺寸的) 嘗試一下
.text-left 表示左對齊文本 嘗試一下
.text-center 指示居中對齊文本 嘗試一下
.text-right 表示右對齊文本 嘗試一下
.text-justify 指示對齊文本 嘗試一下
.text-nowrap 表示不換行文本 嘗試一下
.text-lowercase 指示小寫文本 嘗試一下
.text-uppercase 指示大寫的文本 嘗試一下
.text-capitalize 指示大寫文字 嘗試一下
.initialism 顯示內部文本<abbr>在一個稍微較小的字體元素 嘗試一下
.list-unstyled 在刪除列表項的默認列表樣式和左邊距(適用於這兩個<ul><ol> 這個類僅適用於直接子列表項(從任何嵌套列表刪除默認的列表樣式,這個類適用於任何嵌套列表以及) 嘗試一下
.list-inline 地方在一行所有列表項 嘗試一下
.dl-horizontal 排隊的條款( <dt>和描述( <dd>中) <dl>元素並排側。 開始了像默認<dl> S,但是當瀏覽器窗口展開,將排隊側由端 嘗試一下
.pre-scrollable 打造一個<pre>元素滾動 嘗試一下

完成Bootstrap印刷術參考

對於所有的排版元素/類的完整參考,請訪問我們完整的Bootstrap印刷術參考

另外,也要看看我們的Bootstrap輔助類參考有關上下文類的詳細信息。