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。
響應式字體大小
Bootstrap v4.3 附帶啟用響應式字體大小的選項,允許文本更自然地跨設備和視口大小縮放。可以通過將Sass 變量更改為並重新編譯 Bootstrap來啟用RFS 。$enable-responsive-font-sizes
true
為了支持RFS,我們使用 Sass mixin 來替換我們的正常font-size
屬性。響應式字體大小將被編譯為calc()
具有混合rem
和視口單元的函數,以啟用響應式縮放行為。有關RFS及其配置的更多信息,請參見其GitHub 存儲庫。