Source排版
Bootstrap 排版的文檔和示例,包括全局設置、標題、正文、列表等。
Bootstrap 設置基本的全局顯示、排版和鏈接樣式。當需要更多控制時,請查看文本實用程序類。
- 使用為每個操作系統和設備選擇最佳字體的本機字體堆棧。
font-family
- 對於更具包容性和可訪問性的類型比例,我們假設瀏覽器默認根
font-size
(通常為 16 像素),因此訪問者可以根據需要自定義瀏覽器默認值。
- 使用
$font-family-base
、$font-size-base
和$line-height-base
屬性作為我們應用於<body>
.
- 通過設置全局鏈接顏色
$link-color
並僅在 上應用鏈接下劃線:hover
。
- 用於在(默認情況下)上
$body-bg
設置 a 。background-color
<body>
#fff
這些樣式可以在 中找到_reboot.scss
,全局變量在 中定義_variables.scss
。確保設置$font-size-base
在rem
.
所有 HTML 標題,<h1>
通過<h6>
,都可用。
標題 |
例子 |
<h1></h1> |
h1。引導標題 |
<h2></h2> |
h2。引導標題 |
<h3></h3> |
h3。引導標題 |
<h4></h4> |
h4。引導標題 |
<h5></h5> |
h5。引導標題 |
<h6></h6> |
h6. 引導標題 |
.h1
through.h6
類也可用,當您想匹配標題的字體樣式但不能使用關聯的 HTML 元素時。
h1。引導標題
h2。引導標題
h3。引導標題
h4。引導標題
h5。引導標題
h6. 引導標題
使用包含的實用程序類從 Bootstrap 3 重新創建小的二級標題文本。
帶有褪色輔助文本的精美顯示標題
傳統的標題元素旨在最適合您的頁面內容。當您需要突出標題時,請考慮使用顯示標題——一種更大、更自以為是的標題樣式。
通過添加使段落脫穎而出.lead
。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus。
常用內聯 HTML5 元素的樣式。
您可以使用標記標籤強調文本。
這行文本將被視為已刪除的文本。
這行文本將被視為不再準確。
這行文本被視為對文檔的補充。
這行文本將呈現為下劃線
這行文本應被視為精美印刷品。
此行呈現為粗體文本。
此行呈現為斜體文本。
.mark
和.small
類也可用於應用與標籤相同的樣式<mark>
,<small>
同時避免標籤帶來的任何不需要的語義含義。
<b>
雖然上面沒有顯示,但請隨意使用<i>
HTML5。<b>
旨在突出單詞或短語而不傳達額外的重要性,而<i>
主要用於語音、技術術語等。
使用我們的文本實用程序和顏色實用程序更改文本對齊、變換、樣式、粗細和顏色。
<abbr>
用於縮寫和首字母縮略詞的 HTML 元素的風格化實現,以在懸停時顯示擴展版本。縮寫具有默認下劃線並獲得幫助光標,以在懸停時和輔助技術用戶提供額外的上下文。
添加.initialism
一個略小的字體大小的縮寫。
用於引用文檔中其他來源的內容塊。環繞<blockquote class="blockquote">
任何HTML作為引用。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。
添加一個<footer class="blockquote-footer">
用於識別來源。將源作品的名稱包裝在<cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。
根據需要使用文本實用程序��更改塊引用的對齊方式。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。
刪除list-style
列表項的默認值和左邊距(僅限直接子項)。這僅適用於直接子列表項,這意味著您還需要為任何嵌套列表添加類。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- 馬薩的整數 molestie lorem
- pretium nisl aliquet 的促進作用
- Nulla volutpat aliquam velit
- 菜豆
- Purus sodales ultricies
- 前庭前庭端口掃描儀
- Ac tristique libero volutpat 在
- Faucibus porta lacus fringilla vel
- Aenean sat amet erat nunc
- Eget porttitor lorem
刪除列表的項目符號並使用margin
兩個類的組合應用一些光,.list-inline
和.list-inline-item
.
- Lorem ipsum
- 菜豆
- Nulla volutpat
使用我們網格系統的預定義類(或語義混合)水平對齊術語和描述。對於更長的術語,您可以選擇添加一個.text-truncate
類以使用省略號截斷文本。
-
描述列表
-
描述列表非常適合定義術語。
-
歐伊斯莫德
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。
Donec id elit non mi porta gravida 在 eget metus。
-
馬勒蘇達門
-
Etiam porta sem malesuada magna mollis euismod。
-
被截斷的術語被截斷
-
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。
-
嵌套
-
-
嵌套定義列表
-
Aenean posuere,tortor sed cursus feugiat,nunc augue blandit nunc。
響應式排版是指通過簡單地調整font-size
一系列媒體查詢中的根元素來縮放文本和組件。Bootstrap 不會為您執行此操作,但如果您需要,添加它相當容易。
這是實踐中的一個例子。font-size
選擇您希望的任何s 和媒體查詢。