第9節 Bootstrap對網頁排版做了哪些顛覆設計

On this page

9.1 Bootstrap5重置原理

9.1.1 實現原理和目的

Bootstrap5對默認的html標簽樣式做了很多重置，原理上來說，其實很簡單，就是統一寫了很多基礎的css代碼來對一些常用的標簽附加了樣式，改變了html原來的顯示樣式。目的也很簡單，一是為了好看，二是為了兼容性。

9.1.2 如何學習

這部分內容有點多，而且知識比較散亂，看的有些眼暈，我的意見是大體看一下，不需要了解太深，收藏起來即可。

很多情況下，我都是按照正常html使用，設計出來發現哪個標簽不好看，達不到我的目的，我再查看一下這個標簽的具體用法和Bootstrap5對他的重置。另外忠告大家，遇到問題第一時間不是去百度，而是看手冊，不會了再百度，再找不到，可以去請教一下這方面的高手，高手哪里找，就是平時看到別人寫的文章，有聯系方式的，就可以加一下，以備不時之需。另外還可以去一些群里發問，不過很多情況下無人響應，所以要加一些活躍的群。

9.2 Bootstrap5重置的標簽

9.2.1 Bootstrap重置元件的規范

以下是Bootstrap重置元件的規范和原因：

更新部分瀏覽器的預設值，在可變動的元件間距上使用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”在每個設備和操作系統上獲得最佳的閱讀呈現。這些系統字體是特別為現今設備所設計的，具備更好的屏幕渲染、多元的文字支持以及更多。

請注意，由于字體堆棧包含emoji字體，因此許多常見的symbol/dingbat unicode字符將呈現為多色象形文字。它們的外觀會有所不同，這取決于瀏覽器/平臺本機emoji字體中使用的樣式，并且它們不會受到任何CSS顏色樣式的影響。

此字體系列應用于<body>并在整個Bootstrap中自動全局繼承。

9.2.4 標題、副標題和段落

9.2.4.1 標題和段落

所有標題元素（例如， <h1>、<p>）都被重置為刪除其邊距頂部。標題有 margin-bottom: .5rem，段落margin-bottom: 1rem，便于間距。

所有的HTML標題，<h1>到<h6>，都是可用的。.h1到.h6類也可用，用于當您希望匹配標題的字體樣式但無法使用關聯的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.1.4.png

9.2.4.2 副標題

使用通用類重現Bootstrap 3.0中的小標題文本。副標題就是字體稍小，顏色稍淡的標題。

<h3>
我是一個標題
<small class="text-muted">我只是個副標題</small>
</h3>

顯示效果 9.1.5.png

9.2.4.3 顯示增大標題

一般的標題元素能在頁面內容繁多時發揮最佳作用。當你需要突出一個標題時，請考慮使用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.1.6.png

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>到日端陽節又臨。</li>
            <li>珍重主人意勤腆，</li>
            <li>滿槃角黍細包金。</li>
            <li>嵌套列表:
            <ul>
            <li>來時三月春猶在，</li>
            <li>到日端陽節又臨。</li>
            <li>珍重主人意勤腆，</li>
            <li>滿槃角黍細包金。</li>
            </ul>
            </li>
            <li>《謝人送粽》 唐·楊巨源</li>
            </ul>
      </div>

9.1.7.png

9.2.5.3 內聯

移除了列表編號并增加些許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.1.8.png

9.2.5.4 描述型列表對齊

通過使用我們網格系統定義的類別（或是語意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.1.9.png

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>&lt;p&gt;此處為示例文本...&lt;/p&gt;
&lt;p&gt;這里還有一行示例文本...&lt;/p&gt;
</code></pre>

9.2.8 變量字母

使用<var>標簽來指定公示中的變量字母，例如

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

顯示結果為：

9.1.1.png

9.2.9 鍵盤輸入字符

使用<kbd>標簽來表示通過鍵盤輸入的指令，你再也不用在做電腦教程的時候去到處找鍵盤圖片了。

要切換目錄，請鍵入 <kbd>cd</kbd> ，后跟目錄名。<br>
        要編輯設置，請按 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

顯示結果，是不是很酷。

9.1.2.png

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類別達成。這部分先不演示了，不是說不重要，而是太重要了，明天打算專門講一節。

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>按鈕元素狀態為：not（：disabled），會呈現 cursor: pointer。
按鈕上的指針。重置增加role="button"將預設光標改為pointer。此屬性添加到元素上用來輔助指示元素是可以互動的。button原先就具有cursor的變化，所以這個不是必須的。

表單在網頁設計中起著至關重要的作用，所以后面會有專門的很多節對表單做詳細的介紹。

9.2.13 地址

<address>元素重置瀏覽器的預設font-style，由italic轉為normal。line-height現在也可以繼承屬性，另外增加margin-bottom: 1rem。<address>用來表示作者（或是產品主體）的聯絡信息。使用<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.1.3.png

9.2.14 引用

9.2.14.1 普通引用

blockquotes上的默認邊距是1em 40px，將其重置為0 0 1rem，以便與其他元素更加一致。用于引用文檔中其他來源的內容塊。將<blockquote> 環繞任何HTML作為引號。就是邊距發生了變化，僅給出代碼，就不演示了。

<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規范要求將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.1.10.png

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頁面比較常見，當然也可以用于題目匯集類的，只顯示題目，點擊才會顯示答案。需要注意的是默認點一次顯示，點兩次關閉，點擊下一個摘要不會關閉上一個，要實現點下一個關閉其他的，需要寫一段js代碼實現。

<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 內聯文本元素

常見內聯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>

9.1.11.png

請注意，這些標記應用于語義目的：

<mark> 表示為參考或注釋目的而標記或突出顯示的文本。
<small> 表示旁注和小字體，如版權和法律文本。
<s> 表示不再相關或不再準確的元素。
<u> 表示內聯文本的范圍，該范圍應以指示其具有非文本注釋的方式呈現。

如果要設置文本樣式，應改用以下類：

.mark 將應用與 <mark>相同的樣式。
.small 將應用與<small>相同的樣式。
.text-decoration-underline 修飾下劃線將應用與<u>相同的樣式。
.text-decoration-line-through 裝飾線條將應用與<s>相同的樣式。

雖然上面沒有顯示，但是可以在HTML5中隨意使用 <b> 、 <i> 用來突出單詞或短語而不傳達額外的重要性，而<i> 主要用于語音、技術術語等。

9.2.20 文本通用類

更多功能請使用文本通用類更改文本對齊、轉換、樣式、權重、行高、裝飾和顏色。后面我們會專門介紹文本通用類。

今天的課程就到這里，內容有些多，包含了手冊的兩節內容，大家看看就好，先收藏了，用的時候再查詢。請關注我，及時學習俺老劉原創的《Bootstrap5零基礎到精通》第10節 Bootstrap的圖片和畫像組件。