網頁設計與雲端應用

9-2 格線系統

一、工作原理

  1. 頁面由row(列)、column(欄)所組成，資料放在由row、column所組成的框框裡

  2. 一列數據(row)必須包含在 .container(固定) 或 .container-fluid(滿版) 中，以便為其賦予合適的對齊方式與留白(padding)
  3. 使用 row，在水平方向創建 column
  4. column用來放置「具體的內容」，且只它可以作為 row 的直接子元素
  5. 格線系統：將畫面分成12格（等份），透過列 (row) 與欄 (column) 的組合建立頁面佈局。
      超小屏幕 手機(<768px) 小屏幕 平板(≥768px) 中等屏幕 桌面顯示器(≥992px) 大屏幕 大桌面顯示器(≥1200px)
    柵格系統行為 總是水平排列 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
    .container 最大寬度 None （自動） 750px 970px 1170px
    類前綴 .col-xs- .col-sm- .col-md- .col-lg-
    列（column）數 12
    最大列（column）寬 自動 ~62px ~81px ~97px
    槽（gutter）寬 30px （每列左右均有15px）
    可嵌套 是
    偏移（Offsets） 是
    列排序 是
  6. 練習 
        <div class="container">
      <div class="row">
        <div class="col-md-3"><h2>HTML</h2></div>
        <div class="col-md-3"><h2>CSS</h2></div>
        <div class="col-md-3"><h2>JS</h2></div>
        <div class="col-md-3"><h2>BOOTSTRAP</h2></div>
      </div>
    </div>

二、Media Queries的分段點

  1. 手機 – xs ( < 768px )
  2. 平板 – sm ( 768~991px )
  3. 桌機 – md ( 992~1200px )
  4. 大螢幕 - lg ( >= 1200px )

三、常用

  1. 超過12欄，則會在下方另起一列
  2. 只要是放在col-xx中，就一定會有所謂的gutter（欄和欄之間的間距）
  3. Bootstrap將<body>和所有段落元素的font-size預設為 14px，line-height預設為 1.428。<p>元素的margin-bottom預設了 1/2 行高（即 10px）
  4. 段落中內容對齊：.text-left（靠左對齊）；.text-center（置中對齊）；.text-right（靠右對齊）；.text-justify（分散對齊）；.text-nowrap（不換行）
  5. 向左浮動是.pull-left；向右浮動是.pull-right；要清除浮動則用.clearfix
  6. 顯示某元件可套用.show，隱藏某元件則用.hidden