一、排版

標(biāo)題

HTML 中的所有標(biāo)題標(biāo)簽，<h1>?到?<h6>?均可使用。另外，還提供了?.h1?到?.h6?類，為的是給內(nèi)聯(lián)（inline）屬性的文本賦予標(biāo)題的樣式。

<h1>這是一個h1標(biāo)簽</h1><h2>這是一個h2標(biāo)簽</h2><h3>這是一個h3標(biāo)簽</h3><h4>這是一個h4標(biāo)簽</h4><h5>這是一個h5標(biāo)簽</h5><h6>這是一個h6標(biāo)簽</h6>

在標(biāo)題內(nèi)還可以包含?<small>?標(biāo)簽或賦予?.small?類的元素，可以用來標(biāo)記副標(biāo)題。

?

內(nèi)聯(lián)文本元素

You can use the mark tag to <mark>highlight</mark> text.

?

被刪除的文本和無用文本

對于被刪除的文本使用?<del>?標(biāo)簽。而對于沒用的文本使用?<s>?標(biāo)簽。

<del>This line of text is meant to be treated as deleted text.</del> <s>This line of text is meant to be treated as no longer accurate.</s>

?

插入文本和帶下劃線的文本

額外插入的文本使用?<ins>?標(biāo)簽。而為文本添加下劃線，使用?<u>?標(biāo)簽。

<ins>This line of text is meant to be treated as an addition to the document.</ins> <u>This line of text will render as underlined</u>

?

文本的對齊方式

通過文本對齊類，可以簡單方便的將文字重新對齊。

<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>

?

改變文本的大小寫

<p class="text-lowercase">hello world!!</p> <p class="text-uppercase">hello world!!</p> <p class="text-capitalize">hello world!!</p>

?

列表

分為無序列表、有序列表、無樣式列表和內(nèi)聯(lián)列表

①無序列表

<ul><!--無序列表-->
　　<li>Lorem ipsum dolor sit amet</li>
　　<li>Consectetur adipiscing elit</li>
　　<li>Nulla volutpat aliquam velit
　　　　<ul>
　　　　　　<li>Phasellus iaculis neque</li>
　　　　　　<li>Purus sodales ultricies</li>
　　　　　　<li>Vestibulum laoreet porttitor sem</li>
　　　　</ul>
　　</li>
　　<li>Lorem ipsum dolor sit amet</li>
</ul>

②有序列表

<ol><li>Lorem ipsum dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Nulla volutpat aliquam velit</li><li>Lorem ipsum dolor sit amet</li> </ol>

③無樣式列表

移除了默認(rèn)的?list-style?樣式和左側(cè)外邊距的一組元素（只針對直接子元素）。這是針對直接子元素的，也就是說，你需要對所有嵌套的列表都添加這個類才能具有同樣的樣式。

<ul class="list-unstyled"><li>Lorem ipsum dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Nulla volutpat aliquam velit<ul><li>Phasellus iaculis neque</li><li>Purus sodales ultricies</li><li>Vestibulum laoreet porttitor sem</li></ul></li><li>Lorem ipsum dolor sit amet</li> </ul>

④內(nèi)聯(lián)列表

通過設(shè)置?display: inline-block;?并添加少量的內(nèi)補(bǔ)（padding），將所有元素放置于同一行。

<ul class="list-inline"><li>Lorem ipsum dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Nulla volutpat aliquam velit</li><li>Lorem ipsum dolor sit amet</li> </ul>

?

二、代碼

內(nèi)聯(lián)代碼

通過?<code>?標(biāo)簽包裹內(nèi)聯(lián)樣式的代碼片段。

<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

用戶輸入

通過?<kbd>?標(biāo)簽標(biāo)記用戶通過鍵盤輸入的內(nèi)容。

<p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.</p>

代碼塊

多行代碼可以使用?<pre>?標(biāo)簽。為了正確的展示代碼，注意將尖括號做轉(zhuǎn)義處理。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

?

三、表格

標(biāo)準(zhǔn)表格樣式

為任意?<table>?標(biāo)簽添加?.table?類可以為其賦予基本的樣式 — 少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線。這種方式看起來很多余！？但是我們覺得，表格元素使用的很廣泛，如果我們?yōu)槠滟x予默認(rèn)樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將此樣式獨立出來。

<table class="table table-bordered"><thead><tr><th>whgogogdaw</th><th>dawgdawdg</th></tr></thead><tbody><tr class="danger"><td>111111</td><td>111111</td></tr><tr><td>111111</td><td>111111</td></tr><tr><td>111111</td><td>111111</td></tr></tbody></table>

?

條紋狀表格

?通過?.table-striped?類可以給?<tbody>?之內(nèi)的每一行增加斑馬條紋樣式。

<table class="table table-bordered table-striped"><thead><tr><th>whgogogdaw</th><th>dawgdawdg</th></tr></thead><tbody><tr><td>111111</td><td>111111</td></tr><tr><td>111111</td><td>111111</td></tr></tbody></table>

?

鼠標(biāo)懸停

通過添加?.table-hover?類可以讓?<tbody>?中的每一行對鼠標(biāo)懸停狀態(tài)作出響應(yīng)。相當(dāng)于CSS中的點擊事件

<table class="table table-hover">... </table>

緊縮表格

通過添加?.table-condensed?類可以讓表格更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會減半。

狀態(tài)類

<table class="table table-bordered table-striped table-hover"><thead><tr><th>whgogogdaw</th><th>dawgdawdg</th></tr></thead><tbody><tr class="active"><td>111111</td><td>111111</td></tr><tr class="success"><td>111111</td><td>111111</td></tr><tr class="danger"><td>111111</td><td>111111</td></tr></tbody> </table>

?

BootStrap框架的內(nèi)容今天就先寫到這里，往后會陸續(xù)更新完善，更新，希望能夠幫助到您！！

轉(zhuǎn)載于:https://www.cnblogs.com/wuhao752718372/p/7535556.html

總結(jié)

以上是生活随笔為你收集整理的使用BootStrap框架设置全局CSS样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。