3-2-2 設計主畫面

1. 主畫面部份，希望在平板以上（md）的網誌都可以分為兩欄，側邊欄在右側，比例約 9:3，容器使用有限寬度的.container，因此，可以寫成：

   <div class="container">
     <h3>所有文章</h3>
     <div class="row">
       <div class="col-md-9">主內容區</div>
       <div class="col-md-3">側邊欄</div>
     </div>
   </div>

   快速完成語法：

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

   1. . 是 class 的意思
   2. > 是下一層
   3. + 則是同一層
2. BootStrap 把畫面分成12等份，為網格之基礎，必須在容器（.container）中才有作用
   1. 一個頁面中可以有多個容器。
   2. 容器也可以巢狀使用（容器中還有容器）
   3. .container 是寬度有上限的容器，.container-fluid是全螢幕容器
   4. 容器中用 .row 來產生一個橫列，並用.col來指定欄位
   5. .row 中的 .col 總和需為12，若超過12，會自動往下移
3. .row 是一個橫列的意思
4. .row 底下用.col-md-9、.col-md-3代表當呈現裝置解析度在768px以上時，會分成左邊佔9欄，右邊佔3欄之意。
5. 完整網格工具可參考：https://bootstrap5.hexschool.com/docs/5.0/layout/grid/