3.一、Bootstrap V4自學之路------內容---重啓和版面設計

重啓部分，略。（我的理解是闡述它的基準，弱須要深刻了解，包括修改bootstrap能夠再去了解）

一、 全局設置

PS：設計了全局顯示的一些樣式，body、html、link:hover、font等。

二、標題

<h1>~<h6>顯示大號加粗文字，通常用於標題顯示，也可使用 .h1~.h6匹配實現。

沒什麼很差理解的直接上圖。

自定義佈局

顯示次標題，在主標題<h*>中，使用<small>標籤，屬性類屬性爲 .text-muted。

muted 英文意思是：減弱的，變得輕柔的； （尤指感情的表達）緩和的，溫和的;

<h3 style="color: #006699">這裏是H3顯示標題
    <small class="text-muted"> small標籤 class="text-muted" 的屬性。顯示次標題</small>
</h3>

PS：<h3>設置顏色，但並不能使次標題變色。是我想多了嗎...lol

顯示標題

一種更大型、鮮明的標題樣式。使用樣式爲：.display-1 ~~ .display-4

Lead類

    添加.lead類使一個段落醒目。從效果上看，只是加粗了而已。仔細一看，通常字體大小是1rem，而Lead類的字體打下是1.25rem。比以前大了1/4。

使用方式:

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
<p>
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

內聯文本元素

<p>使用mark標籤 會使標籤內的顏色發生變化，甚至 <mark>此處高亮</mark> p,mark{background-color:#5cb85c}</p>
<p><del>《del》這一行的文本將被視爲已刪除的文本。</del></p>
<p><s>《s》這一行的文本是爲了被視爲再也不準確。從效果上看，與上面《del》標籤相似</s></p>
<p><ins>《ins》這一行的文本將被視爲一個附加的文檔。</ins></p>
<p><u>《u》這行將如下劃線方式顯示</u></p>
<p><small>《small》這行文字是看成小字</small></p>
<p><strong>《strong》這行文字將以字體加粗顯示</strong></p>
<p><b>《b》這行文字將以字體加粗顯示</b></p>
<p><em>《em》這行將以斜體文本顯示。</em></p>
<p><i>《i》這行將以斜體文本顯示。</i></p>

PS：爲何粗體有<b><strong>，斜體有<em><i>，下劃線有<ins><u>，刪除線<del><s>各有不一樣呢？

    個人理解是外國人的習慣致使的，喜歡分類。好比打電話用手機，聽音樂用ipod，玩遊戲用ipad。

    文章也介紹了，<del>是刪除，<s>是本來是真的，可是如今刪掉了。<em>是斜體<i>是語音和技術術語等。

縮略語

使用<addr>標籤，使標籤內的文字在鼠標懸停時提供額外的上線文提醒或說明。

向<addr>標籤內使用 .initialism 類，實現略小的字號。

<p>參考文本<abbr title="attribute">測試文本</abbr></p>
<p>參考文本<abbr title="HyperText Markup Language" class="initialism">參考文本</abbr></p>

截圖的緣由沒法觸發效果，但效果然的是懸空時有提示框。

initialism
英[ɪ'nɪʃəlɪzəm]美[ɪ'nɪʃəˌlɪzəm]
n.：詞首字母縮略詞
網絡：縮寫; 首字母縮略語; 首字母縮寫詞

引用塊

爲了在你的文檔中引用來自別處的文本內容，請在一段HTML外面包裹<blockquote>做爲引用。

爲了顯示直接引用，咱們推薦使用<p>。

<p>我就是用來測試和下面有什麼不一樣的</p>
<blockquote>
  <p>我想到了，這麼多相似功能的標籤，若是作到好了，能夠優化索引，SEO的是吧</p>
</blockquote>

命名來源

一種顯示的方式，用來引用某個文章的一段話，及其出處。

使用<blockquote>標籤包裹，<P>標籤顯示引用文字，<footer>標示引用說明，<cite>指她的出處。

<p>我和上文對比一下效果就出來了，下面的《blockquote》標籤加入了類.blockquote屬性。</p>
<blockquote  class="blockquote">
  <p>這裏是純《P》標籤，外層是《blockquote》標籤，配置class="blockquote" 類</p>
  <footer>正行是《footer》標籤，<cite title="Source Title">這裏是《cite》標籤，配上title屬性，懸空會有文字提醒</cite></footer>
</blockquote>

從效果上看，<blockquote>標籤加入了.blockquote以後，效果仍是使人滿意的。

逆向佈局

確切的說，應該是引用塊<blockquote>標籤的向右對齊。

使用方式：在<blockquote>標籤中引入一個 .blockquote-reverse類。

<p>我和上文對比一下效果就出來了，下面的《blockquote》標籤加入了類.blockquote，再加.bolckquote-reverse類。</p>
<blockquote class="blockquote blockquote-reverse">
  <p>這裏是純《P》標籤，外層是《blockquote》標籤，配置class="blockquote blockquote-reverse" 類</p>
  <footer>正行是《footer》標籤，<cite title="Source Title">這裏是《cite》標籤，配上title屬性，懸空會有文字提醒</cite></footer>
</blockquote>

PS：這裏要說明的是，我一開始僅引入了.blockquote-reverse，沒有引入.blockquote。效果只有右對齊，有字體大小粗線都沒有顯示。說出來mark註明一下。

三、列表

無序列表

在<ul>標籤中使用.list-unstyled類。取消其默認樣式。

<ul class="list-unstyled">
  <li>第一層《ul》引用.list-unstyled類。</li>
    <ul>
      <li>在其中一個《li》標籤在嵌套一個《ul》但沒有引用.list-unstyled類。</li>
      <li>由於是嵌套的《ul》標籤的第二層，因此左邊樣式的空心的黑點</li>
    </ul>
  </li>
  <li>第一層第三個《li》樣式和第一行同樣，沒有默認樣式的黑點。</li>
</ul>

內聯列表

在<ul>標籤中使用.list-inline類，將<li>顯示在一行內。

<ul class="list-inline">
  <li>第一個《li》，使用.list-inline類。</li>
  <li>第二個《li》</li>
  <li>第三個《li》，你發現《ul》的《li》都在一行了嗎？</li>
</ul>

水平描述

漢字不一樣呀，意思是好比使用一個固定寬度的<span><div>，或者例子上說的<dl>寬度是固定的。

但文字內容太長，若是所有顯示則會搞亂佈局。對應這個狀況，使用 .text-truncate類。

效果是將超出區域寬度的文字用省略號(...)截團文字。

<dl class=""><!--  class="dl-horizontal" -->
  <dt class="col-sm-3">dt class="col-sm-3"</dt>
  <dd class="col-sm-9">dd class="col-sm-9"</dd>

  <dt class="col-sm-3">dt class="col-sm-3"</dt>
  <dd class="col-sm-9">dd class="col-sm-9</dd>
  <dd class="col-sm-9 col-sm-offset-3">dd class="col-sm-9 col-sm-offset-3"</dd>

  <dt class="col-sm-3">dt class="col-sm-3"</dt>
  <dd class="col-sm-9">dd class="col-sm-9"</dd>

  <dt class="col-sm-3 text-truncate">dt class="col-sm-3 text-truncate"</dt>
  <dd class="col-sm-9">dd class="col-sm-9"</dd>
</dl>

PS：這裏的<dl>標籤明沒有使用 .dl-horizontal類。

不知道爲何，使用了這個類以後，<dt>標籤的前3個字符看不到了。

PS：這一點有驗證了一下。包含在class="col-sm-12"中正常。

使用.dl-horizontal類與否的效果是，相似*-fluid的效果。兩側取消padding，撐滿框中全部內容。