3-2-3 設計文章版面

1. 文章分為左右兩邊，約 9:3，左邊文字，右邊圖片
2. 快速語法：

   .row>.col-md-9+.col-md-3

   可產生

   <div class="row">
     <div class="col-md-9">文章標題摘要</div>
     <div class="col-md-3">文章圖片</div>
   </div>

    

3. 填入測試內容，如：

   <h3><a href="#">資訊組Line服務上線</a></h3>
   <p>撰稿、拍照：陳老師</p>
   <p>2023-06-30 點閱數：4</p>
   <p>隨著科技發展，Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務，六月三十日，資訊組推出Line官方帳號，除了可以自動回覆問題外，還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向，找不到想要的資訊？官方帳號將學生常面臨問題設置在精選，更方便獲取所需資訊，快速解決疑問，打造超高...</p>

    

4. 插入圖片：

   <img src="圖片路徑" alt="">

    

5. 可加入 BootStrap5 的 .img-thumbnail （圖片縮圖），但只是為圖片加上圓角邊框，並不會真的縮圖，詳情請參考：https://bootstrap5.hexschool.com/docs/5.0/content/images/#image-thumbnails

   <img src="圖片路徑" alt="" class="img-thumbnail">

6. 若欲使之真的縮圖，所以，自行加入CSS語法控制之：

   <img src="圖片路徑" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">

   1. object-fit 用來做區塊填滿設定，常用值有 cover（將圖片塞滿可顯示空間）及 contain（在可顯示空間下顯示完整圖片），詳細可參考：https://tools.wingzero.tw/article/sn/61
   2. height: 200px; 用來限定圖片高度。
7. 完整文章內容：

   <div class="row">
     <div class="col-md-9">
       <h3><a href="#">資訊組Line服務上線</a></h3>
       <p>撰稿、拍照：陳老師</p>
       <p>2023-06-30 點閱數：4</p>
       <p>隨著科技發展，Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務，六月三十日，資訊組推出Line官方帳號，除了可以自動回覆問題外，還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向，找不到想要的資訊？官方帳號將學生常面臨問題設置在精選，更方便獲取所需資訊，快速解決疑問，打造超高...</p>
     </div>
     <div class="col-md-3">
       <img src="https://blog.tcust.edu.tw/uploads/20230711/2b5498cf-a3d7-90ed-57aa-0048afb0bbaa.png" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">
     </div>
   </div>