4-1 BootStrap 基礎排版

1. BootStrap 是一個市占率高的 CSS 框架，用來快速美化網頁用。
2. 在此講義中，只要看到 class="" 幾乎都是用來套用 BootStrap 用的。
3. BootStrap 將版面分成12欄，左 9 右 3 的兩欄式界面：

   <div class="container">
     <h1 class="page-header">活動報名系統</h1>
     <div class="row">
       <div class="col-md-9">主內容區</div>
       <div class="col-md-3">側邊欄</div>
     </div>
   </div>
   

4. class="container" 是 BootStrap 有限寬度的頁面容器，最大寬度1170px
5. class="container-fluid" 是 BootStrap 滿版的頁面容器
6. 一個頁面可以有好幾個容器。
7. class="row" 則是一個橫向區域，裡面分為12欄
8. BootStrap將螢幕依解析度分成四種：
   螢幕解析度<768px，class語法為col-xs ，如手機。
   螢幕解析度≥768px，class語法為col-sm，如平板。
   螢幕解析度≥992px，class語法為col-md，如桌機螢幕。
   螢幕解析度≥1200px，class語法為col-lg，如桌機大螢幕 。
9. class=" col-md-9 " 代表螢幕解析度≥992px 時「主內容區」佔了9欄
10. 左右若想交換，就把3、4行對調一下即可。
11. page-header 就只是一個頁面標題樣式