使用BootStrap框架设置全局CSS样式
一、排版
標(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><section></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><p>Sample text here...</p></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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 梦到给爷爷上坟是什么意思
- 下一篇: CSS3实现纸张边角卷起效果