:::

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 就只是一個頁面標題樣式

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D27%26tbdsn%3D701

計數器

今天: 1567156715671567
昨天: 2198219821982198
總計: 7326425732642573264257326425732642573264257326425