線上書籍

Home

網頁設計與雲端應用

一、工作原理

  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) 柵格系統行為 .container 最大寬度 類前綴 列（column）數 最大列（column）寬 槽（gutter）寬 可嵌套 偏移（Offsets） 列排序
    總是水平排列 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
    None （自動） 750px 970px 1170px
    .col-xs- .col-sm- .col-md- .col-lg-
    12
    自動 ~62px ~81px ~97px
    30px （每列左右均有15px）
    是
    是
    是
  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