?
This document uses PHP Chinese website manual Release
引導(dǎo)打印的文檔和示例，包括全局設(shè)置、標(biāo)題、正文、列表等。
全局設(shè)置
引導(dǎo)設(shè)置基本的全局顯示、排版和鏈接樣式。當(dāng)需要更多的控制時(shí)，請(qǐng)查看文本實(shí)用程序類...
用本機(jī)字體堆棧選擇最好的
font-family對(duì)于每個(gè)操作系統(tǒng)和設(shè)備。
對(duì)于更具包容性和可訪問性的類型擴(kuò)展，我們假設(shè)瀏覽器默認(rèn)根目錄
font-size(通常是16 px），這樣訪問者就可以根據(jù)需要自定義他們的瀏覽器默認(rèn)值。
使用
$font-family-base，，，$font-size-base，和$line-height-base屬性作為我們的打印基應(yīng)用于<body>...
設(shè)置全局鏈接顏色
$link-color并僅在:hover...
使用
$body-bg設(shè)置background-color在<body>%28#fff默認(rèn)情況下%29。
這些樣式可以在_reboot.scss中定義的全局變量_variables.scss.確保$font-size-base在rem...
標(biāo)題
所有HTML標(biāo)題，<h1>透<h6>，都是可用的。
標(biāo)題 | 例 |
|---|---|
<H1> </ H1> | H1.Bootstrap標(biāo)題 |
<H2> </ H2> | H2.Bootstrap標(biāo)題 |
<H3> </ H3> | H3.Bootstrap標(biāo)題 |
<H4> </ H4> | H4.Bootstrap標(biāo)題 |
<H5> </ H5> | H5.Bootstrap標(biāo)題 |
<H6> </ H6> | H6.Bootstrap標(biāo)題 |
<h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6>
.h1透.h6類也是可用的，當(dāng)您想要匹配標(biāo)題的字體樣式但不能使用關(guān)聯(lián)的HTML元素時(shí)。
<p class="h1">h1. Bootstrap heading</p><p class="h2">h2. Bootstrap heading</p><p class="h3">h3. Bootstrap heading</p><p class="h4">h4. Bootstrap heading</p><p class="h5">h5. Bootstrap heading</p><p class="h6">h6. Bootstrap heading</p>
定制標(biāo)題
使用包含的實(shí)用工具類重新創(chuàng)建Bootstrap 3中的小輔助標(biāo)題文本。
<h3> Fancy display heading <small class="text-muted">With faded secondary text</small></h3>
顯示標(biāo)題
傳統(tǒng)的標(biāo)題元素被設(shè)計(jì)為在頁面內(nèi)容的內(nèi)容中發(fā)揮最佳效果。當(dāng)您需要一個(gè)突出的標(biāo)題時(shí)，請(qǐng)考慮使用顯示標(biāo)題-一種更大、稍微更固執(zhí)己見的標(biāo)題風(fēng)格。
<h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1>
Lead
在某一段中加上.lead...
<p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
內(nèi)聯(lián)文本元素
常見的內(nèi)聯(lián)HTML 5元素的樣式。
<p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p>
.mark和.small類還可以應(yīng)用與<mark>和<small>同時(shí)避免了標(biāo)簽帶來的任何不必要的語義影響。
雖然上面沒有顯示，但請(qǐng)隨意使用<b>和<i>在HTML 5中。<b>意思是突出強(qiáng)調(diào)單詞或短語，而不傳遞額外的重要性。<i>主要用于語音、技術(shù)術(shù)語等。
文本實(shí)用程序
更改文本對(duì)齊、轉(zhuǎn)換、樣式、重量和顏色文本實(shí)用程序...
縮略語
HTML的樣式化實(shí)現(xiàn)<abbr>元素的縮寫和縮略詞，以顯示懸停上的擴(kuò)展版本?？s寫具有默認(rèn)下劃線，并獲得幫助光標(biāo)，以便在懸停和輔助技術(shù)的用戶上提供附加上下文。
加.initialism縮寫為略小一點(diǎn)的字體大小。
<p><abbr title="attribute">attr</abbr></p><p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
區(qū)塊引號(hào)
引用文檔中另一個(gè)源的內(nèi)容塊。包扎<blockquote class="blockquote">任何HTML的引號(hào)。
<blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>
命名源
加一個(gè)<footer class="blockquote-footer">來確認(rèn)來源。將源工作的名稱包裝在<cite>...
<blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>
對(duì)齊
根據(jù)需要使用文本實(shí)用程序更改區(qū)塊引號(hào)的對(duì)齊方式。
<blockquote class="blockquote text-center"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>
<blockquote class="blockquote text-right"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>
列表
未定型
刪除默認(rèn)值list-style和列表項(xiàng)%28直接子項(xiàng)上的左邊距僅為%29。這僅適用于直接子列表項(xiàng)。，這意味著您還需要為任何嵌套列表添加類。
<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li></ul>
內(nèi)聯(lián)
刪除列表中的子彈，并施加一些光線margin兩個(gè)班的組合，.list-inline和.list-inline-item...
<ul class="list-inline"> <li class="list-inline-item">Lorem ipsum</li> <li class="list-inline-item">Phasellus iaculis</li> <li class="list-inline-item">Nulla volutpat</li></ul>
描述列表對(duì)齊
通過使用網(wǎng)格系統(tǒng)的預(yù)定義類%28或語義混合%29，水平對(duì)齊術(shù)語和描述。長期而言，您可以選擇添加.text-truncate類以省略號(hào)截?cái)辔谋尽?/p>
<dl class="row"> <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">Euismod</dt> <dd class="col-sm-9"> <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> <p>Donec id elit non mi porta gravida at eget metus.</p> </dd> <dt class="col-sm-3">Malesuada porta</dt> <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> <dt class="col-sm-3">Nesting</dt> <dd class="col-sm-9"> <dl class="row"> <dt class="col-sm-4">Nested definition list</dt> <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> </dl> </dd></dl>
反應(yīng)式排版
反應(yīng)式排版指通過簡單地調(diào)整根元素的文本和組件font-size在一系列媒體查詢中。引導(dǎo)并不能為您完成這個(gè)任務(wù)，但是如果您需要它，添加它是相當(dāng)容易的。
這是一個(gè)實(shí)踐中的例子。隨便選擇font-sizeS和媒體查詢您的愿望。
html {
font-size: 1rem;}@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem; }}@include media-breakpoint-up(md) {
html {
font-size: 1.4rem; }}@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem; }}? 2011–2017 Twitter, Inc.
? 2011–2017 The Bootstrap Authors
根據(jù)MIT許可授權(quán)的代碼。
根據(jù)CreativeCommonsAttributionLicense v3.0授權(quán)的文檔。