3、排版 · Bootstrap前端響應式框架學習技術分享總結

## 排版 **標題** HTML標簽中的所有標題標簽h1-h6都可以使用，同時bootstrap還提供了.h1到.h6，它們的字體大小和標簽h1-h6的字體大小一致，為的是給內聯（inline）屬性的文本應用到標題的樣式 ```html <h1>bootstrap</h1> <div class="h1">bootstrap</div> ``` ![](https://img.kancloud.cn/ee/1d/ee1d71b6e7e7c9f12295f2d3a94ab25e_1019x142.png) 在標題內還可以包含?`<small>`?標簽或賦予?`.small`?類的元素，可以用來標記副標題 ![](https://img.kancloud.cn/a3/9a/a39acc6de19ad180bdaccddcb682402d_1005x72.png) ***** **頁面主體** Bootstrap 將全局?`font-size`?設置為?**14px**，`line-height`?設置為?**1.428**。這些屬性直接賦予?`<body>`?元素和所有段落元素。另外，`<p>`（段落）元素還被設置了等于 1/2 行高（即 10px）的底部外邊距（margin）。 ```markdown 注意： Bootstrap 3 將行高設置為 1.428，其實目的就是想將行高設置為20px。 ``` ```html <p> Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 body 元素和所有段落元素。另外，p （段落）元素還被設置了等于 1/2 行高（即 10px）的底部外邊距（margin）。 </p> <p> Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 body 元素和所有段落元素。另外，p （段落）元素還被設置了等于 1/2 行高（即 10px）的底部外邊距（margin）。 </p> <p> Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 body 元素和所有段落元素。另外，p （段落）元素還被設置了等于 1/2 行高（即 10px）的底部外邊距（margin）。 </p> ``` ![](https://img.kancloud.cn/33/93/33939623e480730be5b5982bdb0f5ad9_1253x199.png) ***** **中心內容** 通過添加?`.lead`?類可以讓段落突出顯示。 ```html <p class="lead"> Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 body 元素和所有段落元素。另外，p （段落）元素還被設置了等于 1/2 行高（即 10px）的底部外邊距（margin）。 </p> <p> Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 body 元素和所有段落元素。另外，p （段落）元素還被設置了等于 1/2 行高（即 10px）的底部外邊距（margin）。 </p> <p> Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 body 元素和所有段落元素。另外，p （段落）元素還被設置了等于 1/2 行高（即 10px）的底部外邊距（margin）。 </p> ``` ![](https://img.kancloud.cn/aa/8b/aa8b7514a60b38e0a5e89aea4d85c690_1257x229.png) ***** **內聯文本元素** **1.** .mark 和 \<mark\> 標簽?加背景色 ```html <div><mark>.mark</mark>標簽?加背景色</div> <mark>bootstrap</mark> ``` ![](https://img.kancloud.cn/21/09/2109b7592695b85a5bf12e888c8fc8a0_817x91.png) **2.** \<del\> 標簽? ? 刪除? 對于被刪除的文本使用`<del>`標簽。 ```html <del>對于被刪除的文本使用del標簽。<del> ``` ![](https://img.kancloud.cn/bb/1c/bb1c7900dac60ecb9f3d32b23ff87fba_741x45.png) **3.** \<s\>標簽? 去掉沒用的文本 ```html <s>去掉沒用的文本<s> ``` ![](https://img.kancloud.cn/19/bc/19bc7812aa2bcf78127fc57d6700f4f6_641x40.png) 可以看出 s 標簽和 del 標簽的效果一樣，具體使用要看具體文本結構 **4.** \<ins\>?標簽額外插入的文本使用。 ```html <ins>插入的文本使用<ins> ``` ![](https://img.kancloud.cn/d5/36/d536ffc6a7a0db00e7742d6f5e095a44_641x41.png) **5.** \<u\>?標簽文本下劃線。 ```html <u>文本下劃線<u> ``` ![](https://img.kancloud.cn/4c/2c/4c2c4999e3236dfc4db189e225ee44a8_596x39.png) 可以看出 ins 標簽和 u 標簽的效果一樣，具體使用要看具體文本結構。 **6.** \<strong\>通過增加font-weight值強調一段文本。 ```html <p>通過增加 <strong>font-weight</strong> 值強調一段文本</p> ``` ![](https://img.kancloud.cn/17/48/1748fdc09db11245afb9dc7debcc2890_797x42.png) **7.** em? 用斜體強調一段文本。 ```html <em>用斜體強調一段文本。</em> ``` ![](https://img.kancloud.cn/a2/82/a28256e64cfd18001e45156c87dc9597_773x42.png) ***** **對齊** 通過文本對齊類，可以簡單方便的將文字重新對齊。 ```html <div class="text-center">居中對齊</div> <div class="text-right"> 右對齊</div> <div class="text-left "> 左對齊</div> <div class="text-justify "> 字體對齊</div> <div class="text-nowrap "> 不換行</div> ``` ![](https://img.kancloud.cn/0c/09/0c0964c93ccb9b32cdae289de6766582_934x161.png) ***** **改變大小寫** 通過這幾個類可以改變文本的大小寫。 ```html <p class="text-lowercase">Lowercased text. 字母小寫</p> <p class="text-uppercase">Uppercased text. 字母大寫</p> <p class="text-capitalize">Capitalized text. 首字母大寫</p> ``` ![](https://img.kancloud.cn/0c/12/0c1289f18f7be899084bee70ed8fb895_930x127.png) ***** **縮略語** 當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容，Bootstrap 實現了對 HTML 的`<abbr>`元素的增強樣式。一般會在 abbr 標簽元素中的 title 屬性中定義對縮寫詞的完整描述。定義 title 屬性后，瀏覽器會在元素下方添加一條淺色的虛線，當鼠標懸停時，會有一個“？”符號，同時還會顯示 title 屬性所提供的內容。 ```html <abbr title="attribute">attr</abbr> ``` ![](https://img.kancloud.cn/6a/ac/6aacea5bd55f76a3c41500834a828686_134x72.png) ***** **首字母縮略語** 為 \<abbr\> 元素添加 .initialism 類，可以得到稍小一些的文本，文本會縮小到原來大小的 90%，并且字母全部以大寫顯示。 ```html <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> ``` ![](https://img.kancloud.cn/fc/82/fc82e8f845613ccf040d54f43ce8ffaf_299x75.png) ***** **引用** 在你的文檔中引用其他來源的內容。 **1.** 默認樣式的引用將任何HTML元素包裹在`<blockquote>`中即可表現為引用樣式。 ```html <blockquote> <p>將任何 HTML 元素包裹在blockquote 中即可表現為引用樣式</p> </blockquote> ``` ![](https://img.kancloud.cn/96/50/9650d011f23e7df6ec159b3ac6da79a5_1130x100.png) **2.** 多種引用樣式第一種樣式 **命名來源** 添加`<footer>`用于標明引用來源。來源的名稱可以包裹進`<cite>`標簽中。 ```html <blockquote> <p>將任何 HTML 元素包裹在blockquote 中即可表現為引用樣式</p> <footer>該語句出自 <cite title="Source Title">文章來源</cite></footer> </blockquote> ``` ![](https://img.kancloud.cn/f4/fe/f4fe69e6ea854f88a1d08a681a6e1305_1019x137.png) 第二種樣式 **另一種展示風格** 通過賦予`.blockquote-reverse`類可以讓引用呈現內容右對齊的效果。 ```html <blockquote class="blockquote-reverse"> <p>將任何 HTML 元素包裹在blockquote 中即可表現為引用樣式</p> <footer>該語句出自 <cite title="Source Title">文章來源</cite></footer> </blockquote> ``` ![](https://img.kancloud.cn/39/29/39294ee5b1c6a18bf931131a1b0c1950_876x136.png) ***** **列表** **1.** 無樣式列表移除了默認的`list-style`樣式和左側外邊距的一組元素（只針對直接子元素）。你需要對所有嵌套的列表都添加這個類才能具有同樣的樣式。沒有添加了`list-unstyled`這個類： ```html <ul> <li>移除了默認的 list-style 樣式和左側外邊距的一組元素（只針對直接子元素）</li> <li>這是針對直接子元素的</li> <li>也就是說，你需要對所有嵌套的列表都添加這個類才能具有同樣的樣式。</li> </ul> ``` ![](https://img.kancloud.cn/43/c8/43c87c226c543c33f471d5d2b13970e4_987x103.png) 添加了`list-unstyled`這個類： ```html <ul class="list-unstyled"> <li>移除了默認的 list-style 樣式和左側外邊距的一組元素（只針對直接子元素）</li> <li>這是針對直接子元素的</li> <li>也就是說，你需要對所有嵌套的列表都添加這個類才能具有同樣的樣式。</li> </ul> ``` ![](https://img.kancloud.cn/e3/5c/e35c71235ba6172d96d0431c1911a715_890x103.png) **2.** 內聯列表類`.list-inline`通過設置`display: inline-block;`并添加少量的內補（padding），將所有元素放置于同一行，并且移除了默認的`list-style`樣式和左側外邊距。沒有添加了`list-inline`這個類： ```html <ul> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>西瓜</li> </ul> ``` ![](https://img.kancloud.cn/74/10/7410676fc9254bab4303c814e7bd3cd7_853x130.png) 添加了`list-inline`這個類： ```html <ul class="list-inline"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>西瓜</li> </ul> ``` ![](https://img.kancloud.cn/52/bd/52bd33506793274d871f5ee1ec72d111_768x48.png) **3.** 描述帶有描述的短語列表。沒有添加了`dl-horizontal`這個類： ```html <dl> <dt>標題信息</dt> <dd>詳細標題信息詳細標題信息</dd> </dl> <dl> <dt>標題信息</dt> <dd>詳細標題信息詳細標題信息</dd> </dl> ``` ![](https://img.kancloud.cn/ee/6b/ee6bebf514c4a9a39dd2130dfbf28d54_977x181.png) 添加了`dl-horizontal`這個類： ```html <dl class="dl-horizontal"> <dt>標題信息</dt> <dd>詳細標題信息詳細標題信息</dd> </dl> <dl> <dt>標題信息</dt> <dd>詳細標題信息詳細標題信息</dd> </dl> ``` ![](https://img.kancloud.cn/8f/12/8f123412e79fb9673edaad2f8d97e157_987x106.png)