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>
按以下方式元素:
<abbr>
Bootstrap將樣式化HTML <abbr>
通過以下方式元素:
<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.
試一試» 要顯示在右邊的報價,使用.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.
試一試» <dl>
Bootstrap將樣式化HTML <dl>
通過以下方式元素:
<code>
Bootstrap將樣式的HTML <code>
通過以下方式元素:
<kbd>
Bootstrap將樣式化HTML <kbd>
通過以下方式元素:
<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-success
, bg-info
, bg-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輔助類參考有關上下文類的詳細信息。