在開始說明前，可以先參考關於Bootstrap 5的文件，可以參考這裡
另外可參考六角學院翻譯的中文版本
由於中文版本是翻譯的版本，可能會有些微的版本落差或尚未翻譯的文件。

RWD響應式網頁簡介

昨天簡單介紹了Bootstrap 5的排版。今天要來介紹RWD(Responsive Web Design)響應式網頁，簡單的說就是透過不同大小瀏覽網頁的載具：如手機、平版、電腦等，都能達到最佳的視覺體驗。在智慧型手機剛出來時，還會有針對手機獨立設計另外一個新網頁的情形，現在只要透過RWD就能將單一網頁在不同的寬度呈現不一樣的頁面。

CSS做得到RWD嗎？

由於Bootstrap 5就是CSS和JavaScript的框架，用CSS當然寫得出來，只是撰寫的語法相較於使用Bootstrap 5來說複雜得多，會在之後說明CSS的寫法。

Bootstrap 5的斷點：

所謂的斷點就是在網頁視窗拉到某個寬度時會改變整個網頁的排版，可以參考以下幾個視窗寬度的size，Bootstrap 5可以分別在這些寬度設定斷點。
Bootstrap 5預設的斷點可參考下表：
Size|xs|sm|md|lg|xl|xxl
------------- | -------------
寬度|＜576px|≧576px|≧768px|≧992px|≧1200px|≧1400px

資料來源：https://getbootstrap.com/docs/5.2/layout/grid/

Bootstrap 5的RWD響應式網頁範例

接下來就是透過Bootstrap 5來進行RWD響應式網頁的實作。相關範例可以參考以下HTML語法(記得要載入Bootstrap 5的框架)：

<div class="container text-primary">
  <div class="row">
    <div class="col text-center bg-dark">1</div>
    <div class="col text-center bg-warning d-none d-xl-block">2</div>
    <div class="col text-center bg-info d-none d-sm-block">3</div>
    <div class="col text-center bg-danger d-none d-lg-block">4</div>
    <div class="col text-center bg-dark">5</div>
    <div class="col text-center bg-warning d-none d-xl-block">6</div>
    <div class="col text-center bg-info d-none d-sm-block">7</div>
    <div class="col text-center bg-danger d-none d-lg-block">8</div>
  </div>
</div>

可以將視窗從很小的部分拉到最寬，觀察會有什麼變化。以第二格為例，d-none的class是指定該子元素隱藏，而d-xl-block是將視窗拉到1200px寬的時候，將第2格顯示出來。視窗從最小拉到最大，首先第1、5格會存在，其次是3、7出現，再來是4、8會出現，最後是2、6會出現。

透過這樣的技巧，在小寬度的網頁時可以將較不重要的資訊隱藏，使頁面顯得比較不雜亂；另外也可以在不同網頁寬度改變每一欄的佔比，這部分會在明天排版的部份說明。

範例參考

以下範例為今天說明內容的實作頁面，包含前述所有案例的演示，請參考：
https://codepen.io/hamagawa76/pen/wvmNBYZ

是不是很簡單！明天會說明Bootstrap 5響應式網頁排版部分了，我們明天見囉！