3-2-3
設計文章版面
- 文章分為左右兩邊，約 9:3，左邊文字，右邊圖片
- 快速語法：
.row>.col-md-9+.col-md-3
可產生
<div class="row">
<div class="col-md-9">文章標題摘要</div>
<div class="col-md-3">文章圖片</div>
</div>
- 填入測試內容，如：
<h3><a href="#">資訊組Line服務上線</a></h3>
<p>撰稿、拍照：陳老師</p>
<p>2023-06-30 點閱數：4</p>
<p>隨著科技發展，Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務，六月三十日，資訊組推出Line官方帳號，除了可以自動回覆問題外，還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向，找不到想要的資訊？官方帳號將學生常面臨問題設置在精選，更方便獲取所需資訊，快速解決疑問，打造超高...</p>
-
插入圖片：
<img src="圖片路徑" alt="">
-
可加入 BootStrap5 的 .img-thumbnail （圖片縮圖），但只是為圖片加上圓角邊框，並不會真的縮圖，詳情請參考：https://bootstrap5.hexschool.com/docs/5.0/content/images/#image-thumbnails
<img src="圖片路徑" alt="" class="img-thumbnail">
- 若欲使之真的縮圖，所以，自行加入CSS語法控制之：
<img src="圖片路徑" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">
object-fit 用來做區塊填滿設定，常用值有 cover（將圖片塞滿可顯示空間）及 contain（在可顯示空間下顯示完整圖片），詳細可參考：https://tools.wingzero.tw/article/sn/61height: 200px; 用來限定圖片高度。
- 完整文章內容：
<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>
3-2-2 設計主畫面
