Responsive Web Design
  • Responsive Web Design 課程
  • 1 簡介
    • 1.1 講者簡介
    • 1.2 課程簡介
  • 2 版面概念解析
  • 3 Media Query
    • 3.1 媒體類型 Media Type
    • 3.2 媒體描述 Media Features
    • 3.3 練習
  • 4 Viewport
    • 4.1 Viewport 定義
    • 4.2 HTML Viewport Meta
  • 5 Bootstrap Grid System
    • 5.1 載入 Grid 相關 CSS
    • 5.2 Grid System
    • 5.3 breakpoint 練習
  • 6 Transition 轉場效果
    • 6.1 第一個 transition
    • 6.2 transition-property
    • 6.3 transition-duration
    • 6.4 transition-timing-function
    • 6.5 transition-delay
    • 6.6 transition 簡寫
    • 6.7 練習
  • 7 Grid 排版模式
    • 7.1 基本觀念及術語
    • 7.2 Grid Container
    • 7.3 Grid Items
    • 7.4 練習
  • 8 Animation 動畫效果
    • 8.1 第一個 animation
    • 8.2 關於 keyframes
    • 8.3 相同元素套用多個 animation
    • 8.4 animation-iteration-count
    • 8.5 animation-direction
    • 8.6 animation-delay
    • 8.7 animation-fill-mode
    • 8.8 animation-play-state
    • 8.9 animation-timing-function
    • 8.10 animation 簡寫
    • 8.11 練習
  • 9 練習
  • 10 RWD 作業
  • 11 手機連本機端網站
  • 12 參考資料
  • 13 補充:AOS
Powered by GitBook
On this page
  • 網格(Grid)系統 (v5 版本)
  • container 與 container-fluid
  • 列、欄與 container
  • 欄自動排版
  • 範例 1:不論任何範圍,各欄寬度自動均分
  • 範例 2:不論任何範圍,設定某欄佔幾欄
  • 指定螢幕在特定範圍,設定各欄所佔的欄數
  • 範例 1:指定 sm 範圍以上三欄均分
  • 範例 2:指定 md 範圍以上,均分或設定所佔的欄數
  • 範例 3:多個斷點一起使用
  • 其它
  • 範例 1:欄的位移
  • 範例 2:欄的順序
  • 範例 3:巢狀式
  • 範例 4:將 row 用在其它 div
  1. 5 Bootstrap Grid System

5.2 Grid System

Previous5.1 載入 Grid 相關 CSSNext5.3 breakpoint 練習

Last updated 1 year ago

網格(Grid)系統 (v5 版本)

記得以下這幾個版面的分界點:

  • xs:螢幕寬度大於等於 0px。

  • sm:螢幕寬度大於等於 576px。

  • md:螢幕寬度大於等於 768px。

  • lg:螢幕寬度大於等於 992px。

  • xl:螢幕寬度大於等於 1200px。

  • xxl:螢幕寬度大於等於 1400px。

container 與 container-fluid

如下示意圖:

列、欄與 container

  • 將 列 寫在 container 中。

  • 將 欄 寫在 列中。

  • 每一列共有視覺上看不到的 12 欄可做劃分。

欄自動排版

範例 1:不論任何範圍,各欄寬度自動均分

範例 2:不論任何範圍,設定某欄佔幾欄

指定螢幕在特定範圍,設定各欄所佔的欄數

範例 1:指定 sm 範圍以上三欄均分

範例 2:指定 md 範圍以上,均分或設定所佔的欄數

範例 3:多個斷點一起使用

其它

範例 1:欄的位移

語法:offset-{breakpoint}-{number}

在某個 {breakpoint} 範圍以上,位移 {number} 欄。例:

範例 2:欄的順序

語法:order-{breakpoint}-{number}

在某個 {breakpoint} 範圍以下,{number} 數值較小的先出現。例:

範例 3:巢狀式

在 column 裡面的部份,也可以再放 row 來切 12 欄。例:

範例 4:將 row 用在其它 div

關於左右 margin 負邊界(未指定寬度的情況下,左右的 margin 為負值時,會創造出額外空間):

因為 Bootstrap 的 row(有負邊界),分別是:

div.row{
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

所以當 row 放在其它自己的 div 標籤時,該 div 標籤記得加以下兩行的 css:

padding-left: 0.75rem;
padding-right: 0.75rem;

例:

https://getbootstrap.com/docs/5.3/layout/grid/#grid-options