Bootstrap-CSS全样式
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap-CSS全样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.排版
????????1.1.頁面主體
????????????????
比普通標簽要大些，代碼如下：
<h3 class="mark">1.1 段落突出</h3><div class="container"><p>斬盡污穢</p><p class="lead">斬盡污穢</p></div>標簽里加入class樣式中的led。
1.2.標題
????????1.標題大小：<h1-h6>,這就不多說了
????????2.副標題：<small></small>
1.3.內聯文本元素? ? ? ??
????????1.標記:class="mark"：用span標簽(上面?代碼和圖片中有效果)
? ? ? ? 2.線條
? ? ? ? ? ? ? ? 分為刪除與下劃線
? ? ?
1. 4.強調文本
????????????????小字體（標準字體的80%）：<small>
????????????????文本加粗：<string>
????????????????文本傾斜：<em>
? ? ? ? ?
1.5.對齊（span標簽無效）
????????居左：class="text-left"
????????居中：class="text-center
????????3.居左：class="text-right""
????????
剩下的就不演示了，直接上代碼跟演示圖
?
?
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.3.1.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/></head><body><!-- 全局CSS樣式 --><h2>一、排版</h2><h3 class="mark">1.1 段落突出</h3><div class="container"><p>斬盡污穢</p><p class="lead">斬盡污穢</p></div><h3 class="mark">1.2 標題</h3><h1>斬盡污穢</h1><h1><small>斬盡污穢</small></h1><p class="h3">斬盡污穢</p><h3 class="mark">1.3 內聯文本元素</h3><p class="mark h6">斬盡污穢</p><p>線條</p><br><p>刪除</p><br><del>斬盡污穢</del><s>斬盡污穢</s><p>下劃線</p><br><ins>斬盡污穢</ins><u>斬盡污穢</u><p>強調文本</p><small><p>斬盡污穢</p></small><p><strong>斬盡污穢</strong></p><p><em>斬盡污穢</em></p><h3 class="mark">1.4 對齊</h3><p class="text-left">斬盡污穢</p><p class="text-center">斬盡污穢</p><p class="text-right">斬盡污穢</p><h3 class="mark">1.5 改變大小寫</h3><span class="text-uppercase">zasdkasd</span><span class="text-lowercase">assadas</span><span class="text-capitalize">asdksadh</span><h3 class="mark">1.6 略縮語</h3><abbr title="好著呢">asdjas</abbr>ajdasda<h3 class="mark">1.7 地址</h3><address>地址：是個地方</address><address>地址：不是個地方</address><h3 class="mark">1.8 引用</h3><blockquote>斬盡污穢<footer>斬盡污穢</footer></blockquote><h3 class="mark">1.9 列表</h3><ul class="list-unstyled"><li>花間一壺酒</li><li>獨酌無相親</li><li>舉杯邀明月，對影成三人</li></ul><ul class="list-inline"><li>月既不解飲</li><li>影徒隨我身</li><li>暫伴月將影，行樂須及春</li></ul><h2>二、代碼</h2><h3 class="mark">2.1 內聯代碼</h3>斬盡污穢<code>斬盡污穢</code>斬盡污穢<h3 class="mark">2.2 用戶輸入</h3><kbd>斬盡污穢</kbd><h3 class="mark">2.3 基本代碼塊</h3><pre>斬盡污穢斬盡污穢斬盡污穢斬盡污穢斬盡污穢</pre><h3 class="mark">2.4 程序輸出</h3><pre class="pre-scrollable">斬盡污穢斬盡污穢斬盡污穢斬盡污穢斬盡污穢</pre><h2>三、表格</h2><h3 class="mark">3.1 基本表格</h3> <table><thead><th>編號</th><th>姓名</th><th>年齡</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody></table><h3 class="mark">3.2 條紋表格</h3><table class="table table-striped"><thead><th>編號</th><th>姓名</th><th>年齡</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody></table><h3 class="mark">3.3 邊框表格</h3><table class="table table-bordered"><thead><th>編號</th><th>姓名</th><th>年齡</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody><h3 class="mark">3.4 鼠標懸停表格</h3><table class="table table-hover"><thead><th>編號</th><th>姓名</th><th>年齡</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody><h3 class="mark">3.5 緊縮表格</h3><table class="table table-condensed"><thead><th>編號</th><th>姓名</th><th>年齡</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody><h3 class="mark">3.6 狀態表格</h3><table class="table table-striped"><thead><th>編號</th><th>姓名</th><th>年齡</th></thead><tbody><tr class="active"><td>1</td><td>好家伙</td><td>123</td></tr><tr class="success"><td>2</td><td>不是人</td><td>124</td></tr><tr class="info"><td>3</td><td>不是你</td><td>154</td></tr></tbody><h3 class="mark">3.7 響應式表格</h3><table class="table table-responsive"><thead><th>編號</th><th>姓名</th><th>年齡</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody><br /><br /><br /><br /></body> </html>
?
?
?
?
總結
以上是生活随笔為你收集整理的Bootstrap-CSS全样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jade模板引擎教程
- 下一篇： vue可以配合jade以及sass吗_在