Bootstrap 中的響應式中斷點

如何把 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 了