第9節(jié) Bootstrap對網頁排版做了哪些顛覆設計
9.1 Bootstrap5重置原理
9.1.1 實現(xiàn)原理和目的
Bootstrap5對默認的html標簽樣式做了很多重置，原理上來說，其實很簡單，就是統(tǒng)一寫了很多基礎的css代碼來對一些常用的標簽附加了樣式，改變了html原來的顯示樣式。目的也很簡單，一是為了好看，二是為了兼容性。
9.1.2 如何學習
這部分內容有點多，而且知識比較散亂，看的有些眼暈，我的意見是大體看一下，不需要了解太深，收藏起來即可。
很多情況下，我都是按照正常html使用，設計出來發(fā)現(xiàn)哪個標簽不好看，達不到我的目的，我再查看一下這個標簽的具體用法和Bootstrap5對他的重置。另外忠告大家，遇到問題第一時間不是去百度，而是看手冊，不會了再百度，再找不到，可以去請教一下這方面的高手，高手哪里找，就是平時看到別人寫的文章，有聯(lián)系方式的，就可以加一下，以備不時之需。另外還可以去一些群里發(fā)問，不過很多情況下無人響應，所以要加一些活躍的群。
9.2 Bootstrap5重置的標簽
9.2.1 Bootstrap重置元件的規(guī)范
以下是Bootstrap重置元件的規(guī)范和原因：
更新部分瀏覽器的預設值，在可變動的元件間距上使用rem替代em。
避開使用margin-top。垂直邊界的margins可能會重疊，進而產生不能預期的結果。更重要的是，使用單向的margin是一個更單純的思考模式。
為便于跨設備大小進行縮放，塊元素應使用rems作為邊距。
盡量減少字體相關屬性的聲明，盡可能使用inherit。
9.2.2 面默認值
為了提供更好的整體頁面預設值而更新和元素。具體而言：
在每個元素上設定全局性的box-sizing，包括*：：before和*：：after，將它們設為border-box。這確保元素不會因為padding或border超過元素聲明的寬度數值。
不在
<html>上聲明基礎的font-size，而是假定字體尺寸為16px（瀏覽器預設）。font-size: 1rem被應用在上，以利透過media queries做響應式縮放。<body>設定了全局的font-family、font-weight、line-height及color，讓隨后的元素可以繼承此格式以防止字體不一致。為了安全起見，
<body>已聲明background-color，預設為#fff。
9.2.3 原生字體堆棧
Bootstrap利用“native font stack”或“system font stack”在每個設備和操作系統(tǒng)上獲得最佳的閱讀呈現(xiàn)。這些系統(tǒng)字體是特別為現(xiàn)今設備所設計的，具備更好的屏幕渲染、多元的文字支持以及更多。
請注意，由于字體堆棧包含emoji字體，因此許多常見的symbol/dingbat unicode字符將呈現(xiàn)為多色象形文字。它們的外觀會有所不同，這取決于瀏覽器/平臺本機emoji字體中使用的樣式，并且它們不會受到任何CSS顏色樣式的影響。
此字體系列應用于<body>并在整個Bootstrap中自動全局繼承。
9.2.4 標題、副標題和段落
9.2.4.1 標題和段落
所有標題元素（例如， <h1>、<p>）都被重置為刪除其邊距頂部。標題有 margin-bottom: .5rem，段落margin-bottom: 1rem，便于間距。
所有的HTML標題，<h1>到<h6>，都是可用的。.h1到.h6類也可用，用于當您希望匹配標題的字體樣式但無法使用關聯(lián)的HTML元素時。
<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>
和
<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>
產生的代碼效果都是一樣的
9.2.4.2 副標題
使用通用類重現(xiàn)Bootstrap 3.0中的小標題文本。副標題就是字體稍小，顏色稍淡的標題。
<h3> 我是一個標題 <small class="text-muted">我只是個副標題</small> </h3>
顯示效果
9.2.4.3 顯示增大標題
一般的標題元素能在頁面內容繁多時發(fā)揮最佳作用。當你需要突出一個標題時，請考慮使用display heading以獲得更大、更細、稍具有風格化的標題樣式。
<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> <h1 class="display-5">Display 5</h1> <h1 class="display-6">Display 6</h1>
9.2.5 列表
9.2.5.1 列表
所有列表<ul>、 <ol>、 <dl>都刪除了它們的margin-top和 margin-bottom: 1rem 。嵌套列表沒有頁邊距底部。還重置了<ul>、<ol> 元素的padding-left。
為了更簡單的樣式、清晰的層次結構和更好的間距，描述列表更新了邊距，<dd>將左邊邊距重置為0，并在底部添加邊距margin-bottom: .5rem，<dt>以粗體顯示。
9.2.5.2 無樣式
刪除列表項的默認列表樣式和左邊距（僅限直接子項）。這只適用于直接子列表項，這意味著您還需要為任何嵌套列表添加類。
<ul class="list-unstyled"> <li>來時三月春猶在，</li> <li>到日端陽節(jié)又臨。</li> <li>珍重主人意勤腆，</li> <li>滿槃角黍細包金。</li> <li>嵌套列表: <ul> <li>來時三月春猶在，</li> <li>到日端陽節(jié)又臨。</li> <li>珍重主人意勤腆，</li> <li>滿槃角黍細包金。</li> </ul> </li> <li>《謝人送粽》 唐·楊巨源</li> </ul> </div>
9.2.5.3 內聯(lián)
移除了列表編號并增加些許margin，結合使用.list-inline和.list-inline-item。
<ul> <li>我思故我在</li> <li>我在故我思</li> <li>生命不息思不息</li> </ul> <ul class="list-inline"> <li class="list-inline-item">我思故我在</li> <li class="list-inline-item">我在故我思</li> <li class="list-inline-item">生命不息思不息</li> </ul>
對比下效果
9.2.5.4 描述型列表對齊
通過使用我們網格系統(tǒng)定義的類別（或是語意mixins）將項目和說明水平對齊。對于較長的術語，你可選擇性加上.text-truncate來用…取代多余內容。
<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">Term</dt> <dd class="col-sm-9"> <p>Definition for the term.</p> <p>And some more placeholder definition text.</p> </dd> <dt class="col-sm-3">Another term</dt> <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd> </dl> </dd> </dl>
9.2.6 html標簽代碼
用<code>包裝標簽代碼段。確保轉義HTML尖括號。例如, <section> 應包裝為標簽代碼<code><section></code> 。
9.2.7 代碼塊
<pre>用于多行的代碼加在<code>包裝標簽代碼外面。再提醒一次，確保在代碼中轉義任何尖括號，以便正確渲染。<pre>移除margin-top以及使用rem作為margin-bottom的單位。
<p>此處為示例文本...</p> <p>這里還有一行示例文本...</p>
應該用下面的代碼包裝
<pre><code><p>此處為示例文本...</p> <p>這里還有一行示例文本...</p> </code></pre>
9.2.8 變量字母
使用<var>標簽來指定公示中的變量字母，例如
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
顯示結果為：
9.2.9 鍵盤輸入字符
使用<kbd>標簽來表示通過鍵盤輸入的指令，你再也不用在做電腦教程的時候去到處找鍵盤圖片了。
要切換目錄，請鍵入 <kbd>cd</kbd> ，后跟目錄名。<br> 要編輯設置，請按 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
顯示結果，是不是很酷。
9.2.10 實例輸出
使用 <samp>標簽來表示由程序輸出的實例。這我看著效果不是很好，就不演示了，你可以自己動手試試。
<samp>This text is meant to be treated as sample output from a computer program.</samp>
9.2.11 表格
微調整表格中的<caption>樣式，合并邊框，并確保整體的text-align是一致的。針對borders、padding以及更多的其他變化將通過.table類別達成。這部分先不演示了，不是說不重要，而是太重要了，明天打算專門講一節(jié)。
9.2.12 表單
不同的表單元素已被重置為更簡潔的基本樣式。如下式變化最為顯著的部分：
<fieldset>沒有borders、padding或margin以便包覆獨立的input或input群組。<legend>如同fieldset，已被重新定義樣式用來顯示分類的標題。<label>被設定為display: inline-block以便讓margin可以應用。<input>、 <select>、<textarea>、 <button>主要由Normalize處理，不過Reboot移除了它們的margin并設定line-height: inherit。<textarea>修改為僅可調整垂直尺寸，因為水平調整大小通常會“破壞”頁面布局。當
<button>和<input>按鈕元素狀態(tài)為：not（：disabled），會呈現(xiàn) cursor: pointer。按鈕上的指針。重置增加role="button"將預設光標改為pointer。此屬性添加到元素上用來輔助指示元素是可以互動的。button原先就具有cursor的變化，所以這個不是必須的。
表單在網頁設計中起著至關重要的作用，所以后面會有專門的很多節(jié)對表單做詳細的介紹。
9.2.13 地址
<address>元素重置瀏覽器的預設font-style，由italic轉為normal。line-height現(xiàn)在也可以繼承屬性，另外增加margin-bottom: 1rem。<address>用來表示作者（或是產品主體）的聯(lián)絡信息。使用<br>保留結束行的格式。
<div class="bd-example"> <address> <strong>Twitter, Inc.</strong><br> 1355 Market St, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:first.last@example.com">first.last@example.com</a> </address> </div>
顯示效果圖
9.2.14 引用
9.2.14.1 普通引用
blockquotes上的默認邊距是1em 40px，將其重置為0 0 1rem，以便與其他元素更加一致。用于引用文檔中其他來源的內容塊。將<blockquote> 環(huán)繞任何HTML作為引號。就是邊距發(fā)生了變化，僅給出代碼，就不演示了。
<div class="bd-example"> <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <p>Someone famous in <cite title="Source Title">Source Title</cite></p> </div>
9.2.14.2 引用來源
HTML規(guī)范要求將blockquote歸屬于 <blockquote>之外。當提供來源歸屬，需要將 <blockquote>包在<figure>之內，并且加上 .blockquote-footer class，還要確保將來源的名稱包在中。
<figure> <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure>
9.2.14.3 引用來源
可以使用文字通用類來更改blockquote的對齊方式。
<figure class="text-center"> <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure>
默認為左對齊，可以用text-center居中對齊，text-end右對齊。這里就不演示了。
9.2.15 縮略詞標記
<abbr>元素的基本樣式讓它與段落文字之間有明顯突出，在地址例子中大家已經看到了，主要用在英文縮略詞中，下面再給一個例子，效果自己去試一下吧，就不演示了。
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
9.2.16 摘要
summary的預設cursor是text，所以我們將其重置為pointer，元素可以透過點擊產生互動性，這種一般在網站的FAQ頁面比較常見，當然也可以用于題目匯集類的，只顯示題目，點擊才會顯示答案。需要注意的是默認點一次顯示，點兩次關閉，點擊下一個摘要不會關閉上一個，要實現(xiàn)點下一個關閉其他的，需要寫一段js代碼實現(xiàn)。
<div class="bd-example"> <details open=""> <summary>點我查看更多</summary> <p>我是第一個摘要要顯示的內容</p> </details> <details> <summary>另個一摘要</summary> <p>我是第二個摘要要顯示的內容</p> </details> </div>
9.2.17 HTML5隱藏屬性
HTML5新增一個新的全局屬性[hidden]，預設樣式為display: none，Bootstrap將其改良為[hidden] { display: none !important; }以預防display被意外覆蓋。
<input type="text" hidden>
9.2.18 前導主題
使用.lead讓一個段落脫穎而出，會加大加粗顯示，一般用在摘要引言處。
<p class="lead"> This is a lead paragraph. It stands out from regular paragraphs. </p>
9.2.19 內聯(lián)文本元素
常見內聯(lián)HTML5元素的樣式。
<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>表示旁注和小字體，如版權和法律文本。<s>表示不再相關或不再準確的元素。<u>表示內聯(lián)文本的范圍，該范圍應以指示其具有非文本注釋的方式呈現(xiàn)。
如果要設置文本樣式，應改用以下類：
.mark 將應用與
<mark>相同的樣式。.small 將應用與
<small>相同的樣式。.text-decoration-underline 修飾下劃線將應用與
<u>相同的樣式。.text-decoration-line-through 裝飾線條將應用與
<s>相同的樣式。
雖然上面沒有顯示，但是可以在HTML5中隨意使用 <b> 、 <i> 用來突出單詞或短語而不傳達額外的重要性，而<i> 主要用于語音、技術術語等。
9.2.20 文本通用類
更多功能請使用文本通用類更改文本對齊、轉換、樣式、權重、行高、裝飾和顏色。后面我們會專門介紹文本通用類。
今天的課程就到這里，內容有些多，包含了手冊的兩節(jié)內容，大家看看就好，先收藏了，用的時候再查詢。請關注我，及時學習 俺老劉原創(chuàng)的《Bootstrap5零基礎到精通》第10節(jié) Bootstrap的圖片和畫像組件。