| Reboot 重置 |

CH4 14
路徑 : Content / Reboot

| 字體 |

路徑 : Content / Reboot_ Native font stack

  • Windows 中文預設明體,建議 CSS 載入微軟正黑體 Microsoft JhengHei ,讓整體畫面協調性更一致
  • 建議把微軟正黑體加入第2個 指定已知的系統字體這邊
body{
    font-family:-apple-system,BlinkMacSystemFont,"Microsoft JhengHei UI","Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
  • 因層級關係,記得把 字體 css 放置 Bootstrap CSS 下方,微軟正黑體才會顯示出來
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- 客製 CSS -->
    <link rel="stylesheet" href="/css/all.css">
</head>

// 出處為六角學院 ▼
Bootstrap-六角系統預設字體01

// 出處為六角學院 ▼
Bootstrap-六角ppt02


| Typography |

CH4 15
Bootstrap 路徑 : Content / Typography

| 段落文字想與某標題文字粗細一樣大的方式 |

  • 段落文字不會和標題一樣具語意,只有樣式一樣
  • 把標題當寫在 class 內
    <h2>我是標題具語意</h2>
    <p class="h2">我不是標題,不具語意</p>

    | 其餘文字與排版用法 |

  • Display headings 用法
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
  • Inline Text Element 行內文字元素
  • 插在整個文字段落內的標籤,不會造成斷行
<!--語意:highligh的文字 ▼-->
<p>You can use the mark tag to <mark>highlight</mark> text.</p> 

<!-- <del> 和 <s>長的一樣 -->
    <!--語意:被刪除的內容 ▼-->
    <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>  

<!-- <del> 和 <s>長的一樣 -->
    <!--語意:補充的內容 ▼-->
    <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>

<!-- <strong> 和 <b>長的一樣 -->
    <!--語意:強調的粗體本文 ▼-->
    <p><strong>This line rendered as bold text.</strong></p>
    <!--語意:突出顯示,而不增加重要性 ▼-->
    <p><b>This line rendered as bold text.</b></p>

<!-- <i> 和 <em>長的一樣 -->
    <!--語意:斜體字,具語音、技術用語 ▼-->
    <p><i>This line rendered as bold text.</i></p>
    <!--語意:單純斜體字 ▼-->
    <p><em>This line rendered as italicized text.</em></p>

<!-- span 是行內元素的群組,沒有帶任何語意 ▼ -->
<p><span>This line rendered as italicized text.</span></p>

// inline text elements 示意圖語意 -出處為六角學院 ▼
Bootstrap-六角inline-text-elements-01

Bootstrap-Abbreviations-縮寫示意圖

Bootstrap-Blockquote-引用文字

  • list
    • 如想清除 ul li 前方會出現的預設標籤樣式,可加上 .list-unstyled
      inline行內
    • 想要在一行內表達完語意 ( 下方圖示 達爾文、米開朗基羅、拉斐爾 ) ▼

Bootstrap-inline行內示意圖

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>
  • Description list alignment
    • 描述型清單,較常使用在名詞解釋,左方名詞 右方解釋
    • dl 為描述型清單的最外框,dt 左邊標題, dd 右邊描述
    • 網頁範例中出現的 .text-truncate 會把太長的文字裁切掉
    • 順序
      • dl.row
        • dt.col-sm-3
        • dd.col-sm9

Bootstrap-Description list alignment示意圖


| Images |

CH4 16
路徑 : Content / images

  • Responsive images
    • 不管圖片大於或小於容器,建議加上 .img-fluid 讓圖片 max-width:100%; 和 height:auto; ( 圖片放大不會大於原始尺寸 ) 可參考此文章
  • 圖片對齊方式-置中
    • a. 把 img 從行內元素變區塊元素 .d-block 並使用 .mx-auto 使其置中
    • b. 以 .text-center 包 img ,內層圖片文字皆水平置中
<!--a.-->
<img class="img-fluid mx-auto d-block" width="500" src="http://lorempixel.com/1920/1000/food/1" alt="">

<!--b-->
<div class="text-center">
    <img class="ing-fluid" width="500" src="http://lorempixel.com/1920/1000/food/1" alt="">
    <h3>title</h3>
</div>
  • 另外這邊使用 .float-left.float-right 要記得使用 clearfix 清除浮動

| Figures 圖片與描述 |

路徑 : Content / Figures

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

| Tables 表格 |

CH4 17
路徑 : Content / Tables

  • Bootstrap 滿重視表格的結構
  • 表格的表頭會用 <thead></thead> 包起
    • <th scope="col">#</th> 代表 # 下的一整個直式欄位 → 1 2 3
  • 表格主要內容於 <tbody></tbody>
    • 一個 tr 代表一個橫列
      • tr 橫列內可放入此橫列的標題 th 與內容 td
      • <th scope="row">1</th> 代表 1的那一整個橫式欄位 → Mark Otto @mdo
  • Captions
    • 類似表格的註解,會出現於表格下方,有助於幫助瀏覽者了解表格是做甚麼用的
    • <caption>此在輸入字</caption>
  • 表格完成後,可於 table 加上 Class, Bootstrap 內提供不同樣式可參考
  • 響應式表格 Responsive tables
    • 需於 <table> 外層加上一個 div .table-responsive
    • 亦可於 Breakpoint specific 選擇想要的斷點進行 響應式表格
    • 寬度在中斷點以下時會出現水平捲軸,寬度以上時,則會維持正常
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
  • 統整 table 程式順序
    • table
      • thead
        • tr
          • th → <th scope="col"> </th>
      • tbody
        -tr

        • th → <th scope="row"> </th>
        • td
      • tfoot 類似網頁裡的footer標籤 出處

Bootstrap-table表格示意圖

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

資料來源

最後修改日期: 24 2 月, 2020

作者