Bootstrap 中的響應式中斷點


Posted by saffran on 2021-02-25

如何把 Bootstrap 設定成 RWD 呢?(會隨著畫面縮放而改變排版)

文件網址:
https://getbootstrap.com/docs/4.3/layout/grid/#grid-options

如果要做「響應式」的話,要透過上面文件中 Grid options 的設定

觀念說明

  • 中斷點:大於等於某一個數值,就會切換成「特定的版型」

Bootstrap 的 media queries

Bootstrap 中斷點,說明如下:

:::danger
「垂直的手機」在 Bootstrap 裡面,就是「預設的版型」--> 從「垂直的手機」作為起點開始寫
:::

  • 大於等於 576px,會切換成「橫式的手機」版型
  • 大於等於 768px,會切換成「平板」版型
  • 大於等於 992px,會切換成「小的桌機」版型
  • 大於等於 1200px,會切換成「大的桌機」版型

斷點與 col 的字根(要記住!!)

  • 字根要記得使用正確!

:::success
「xs 省略」的意思是:
就直接寫col-*就可以了
:::

xs 說明

以下面的範例來做說明
html:

    <div class="row">
        <div class="col-sm-4 side-bar"></div>
        <div class="col-sm-8 content"></div>
    </div>

:::danger
[說明]
當小於 sm(寬度小於 576px)就會切換成 xs 的排版

  • 因為上面程式碼中,==沒有設定col-*,就會採用col-12「12 欄寬(預設就是寬度 100%)」==,來呈現欄寬(平常製作 RWD 時也不需要填入 col-x)
  • 若是有設定col-*,就會依照設定的值,來呈現欄寬

:::

圖解說明

設定col-sm-*

當我使用col-sm-*時,會有什麼變化?

html:

    <div class="row">
        <div class="col-sm-4 side-bar"></div>
        <div class="col-sm-8 content"></div>
    </div>
  • 當寬度「大於 sm 時」

是「兩欄式」的排版

  • 當寬度「小於 sm 時」

就會切換成「單欄式」的排版

:::info
「4欄寬 + 8欄寬」會調整成「統一的 12 欄寬 (寬度 100%)」
:::

設定col-md-*

當我使用col-md-*時,會有什麼變化?

html:

    <div class="row">
        <div class="col-md-4 side-bar"></div>
        <div class="col-md-8 content"></div>
    </div>
  • 當寬度「大於 md 時」

會是「兩欄式」的排版

  • 當寬度「小於 md 時」

就會切換成「單欄式」的排版(寬度為 100%)

實際範例

設定col-sm-*

html:

    <div class="container mt-3">

        <!-- 兩欄式的排版 -->
        <div class="row">
            <div class="col-sm-6">
                <div class="box"></div>
            </div>
            <div class="col-sm-6">
                <div class="box"></div>
            </div>
        </div>

        <hr>

        <!-- 三欄式的排版 -->
        <div class="row">
            <div class="col-sm-4">
                <div class="box"></div>
            </div>
            <div class="col-sm-4">
                <div class="box"></div>
            </div>
            <div class="col-sm-4">
                <div class="box"></div>
            </div>
        </div>

    </div>

用 chrome 開發者工具來看

  • 在「寬度 >= 576px」時

  • 在「寬度 < 576px」時

就會切換成「單欄」的排版

大裝置「4欄」,小裝置「2欄」

html:

  • 大裝置「4欄」:設定col-md-3
    在寬度 >= 768px 時,都會是「4欄」

  • 小裝置「2欄」:設定col-sm-6
    在寬度是 576~767px 時,都會是「2欄」

    <div class="container mt-3">

        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="box"></div>
            </div>
        </div>

    </div>
  • 在寬度 >= 768px 時,都會是「4欄」

  • 在寬度是 576~767px 時,都會是「2欄」

:::success

想要調整「上下的間距」

若要設定 col 的margin-top/bottom,應寫在哪個位置呢?

A:
在此只需要了解一個重點 - 不要調整水平的 margin
垂直部分可以使用 my-3 的方式調整
並且直接應用在 col-sm-6
my-3 的相關概念在後面通用類別會介紹到喔
:::

  • 在寬度 < 575px 時,都會是「單欄」--> 是預設的

再加上col-4 (承接上面範例)

html:

    <div class="container mt-3">

        <div class="row">
            <div class="col-md-3 col-sm-6 col-4">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6 col-4">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6 col-4">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6 col-4">
                <div class="box"></div>
            </div>
        </div>

    </div>
  • 在寬度 < 575px 時,都會是「3欄」

更多變化的排版

html:
在寬度 < 575px 時,設定

  • col-3
  • col-3
  • col-6
  • col-12 (寬度為 100%)
    <div class="container mt-3">

        <div class="row">
            <div class="col-md-3 col-sm-6 col-3">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6 col-3">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6 col-6">
                <div class="box"></div>
            </div>
            <div class="col-md-3 col-sm-6 col-12">
                <div class="box"></div>
            </div>
        </div>

    </div>

就可以設計出非常有變化性的排版:

  • 在寬度 < 575px 時

className 有順序問題嗎?

class 中的撰寫順序是沒有差別的
而老師是習慣從大到小(從 md sm xs 寫下來)
當然你也可以依據自己或團隊需求做決定

這樣 className 不會太長嗎?

Q:

例如:

<div class="col-md-3 col-sm-6 col-3"></div>

這樣 className 不會太長嗎?

A:

這是與 CSS 架構概念有關
Bootstrap 的目的是為了增加每個 className 的可複用性
這個概念下,甚至能不再撰寫 CSS 就能完成畫面

過去我也會糾結於 Bootstrap 的 className 太多
但在實際開發過幾個網站後
會了解到這種概念是正確的
原因在於,沒有足夠可複用性的 className 連管理都會有問題
(每一段樣式都需要開一個新的 className,這樣其實失去 CSS 樣式表的意義)

:::danger
一般實務上,也不㑹將全部尺寸都放上去,只會用一兩個 ex: col-md-6

只有部分情境下,特定寬度排版沒那麼合適時,才額外增加中斷點調整
:::


Q&A

Q: 關於<div class="box"></div>

想請問在影片範例中的<div class="box"></div>,它只有套用自定義的 .box 的 css,而未套用 bootstrap 的col-*或是col-sm-*之類的 class 屬性,為何它也能自適應螢幕寬度去縮放呢?

A:
這是因為盒模型的特性,.box 本身就是 100% 寬度

Q: BS4 的 SCSS

在 bootstrap 文件中響應式斷點的地方
http://bootstrap.hexschool.com/docs/4.0/layout/overview/#responsive-breakpoints

有下面這些斷點,

這些不能直接寫在自己的 scss 裡套用嗎?

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

A:
下面這段就是他已經寫好的 @mixin,所以如果你有載入 BS4 的 SCSS,自然能使用他的 @mixin 哩

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

如果要載入 BS4 的 SCSS 是要載入哪個檔案呢?

這部分課程有的,在章節 11「Bootstrap 與 Sass」有說明該如何載入

  • 但如果你沒有要自己修改 BS4 核心碼的話,就直接用他的 CSS,並照著文件上的 class 來寫就 ok 了

#Bootstrap







Related Posts

{210409} Hello, World!

{210409} Hello, World!

自動化測試 x Puppeteer - 玩偶QA參一咖 Day04

自動化測試 x Puppeteer - 玩偶QA參一咖 Day04

【Day06】 Git 版控流程簡易介紹

【Day06】 Git 版控流程簡易介紹


Comments