今天我們來認識Bootstrap content(內容) 的圖片、圖片區與表格。
本教學是幫助朋朋快速理解Bootstrap 官方文件，所以建議搭配官方文件服用。

一、圖片(images)

Bootstrap 的圖片設定可以輕鬆用class的方式輕鬆設定，並支持響應式，隨著父容器的大小變化進行調整。

響應式圖片

可以加入 .img-fluid使變成響應式圖片，它的原理是使用 max-width: 100%; 和 height: auto，如下:

.img-fluid {
    max-width: 100%;
    height: auto;
}

圖片縮略圖(thumbnail)

除了我們的 border 通用類別之外，我們可以對圖片使用 .img-thumbnail 讓圖片呈現圓角 1px 的邊框。

對齊圖片

如果要使圖片對齊，我們可以使用:

• float類別的.float-start與.float-end
• 如果是block屬性(且要設寬度)的物件可以使用margin類別的.mx-auto(水平置中)、.ms-auto(水平靠右)、me-auto(水平靠左)。

二、圖片區 (Figures)

如果是要做有標題的圖檔時，可以用<figure>來呈現，
基本架構如下:

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

圖片搭配.img-fluid響應式呈現。也可以使用.text-center、.text-start、.text-end做文字標題排版調整。

三、表格 (Tables)

在任何 <table> 加上基本類別 .table，接著使用我們的可選修飾類別或是自定義樣式進行擴展。
但注意如果是巢狀table，則內部的table要再加 .table，因為.table不會繼承。
基本架構如下:

<!--加入.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>
     ...
    </tr>
    <tr>
      ...
    </tr>
  </tbody>
   <tfoot>
    ...
  </tfoot>
</table>

基本使用

• 可以使用像.table-primary、.table-secondary等類別幫表格列或單元格上色。
• 可以使用 .table-striped 加在<table>那層，能在 <tbody> 範圍內任何表格行增加條紋樣式。
• 可添加.table-hover產生列的hover效果，幫助使用者聚焦特定列。
• 上述類別都可以混搭使用。例如: <table class="table table-dark table-striped table-hover">
• .table-active可針對單列或是單一格來凸顯。

表格邊框

• 使用 .table-bordered 加在<table>那層，在表格和儲存格的四邊上添加邊框。
• 不要邊框則是.table-borderless 。
• 可以加入border類別像是.border-primary、.border-success改變表格border顏色。

表格內容對齊

• 可使用Vertical alignment 類別 (如: align-middle、align-bottom、align-baseline等)為表格內容依需求垂直做對齊。

小表格&表標題

• .table-sm能將儲存格 padding 縮減一半，產生較小表格。
• 你也可以在<caption>上使用 .caption-top 將 <caption> 放在表格的最頂端(<caption>預設是會呈現在表格下方)。

響應式表格

可以使用.table-responsive包在.table的外層，使其在表內始終出現水平滾軸。
像這樣:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

如果想做斷點效果的響應式表格設定可以用.table-responsive{-sm|-md|-lg|-xl|-xxl}，從該斷點以上不會出現水平卷軸。
例如.table-resopnsive-md就是md以下出現水平卷軸，md以上則沒有水平卷軸。

下面是Bootstrap 表格常用class整理:

附上這個CodePen是針對表格的小練習
希望本教學對大家有幫助~