Title1

Title2

Title3

7-1 安裝Bootstrap5

  1. 官網:https://getbootstrap.com/
  2. 中文網站:https://bootstrap5.hexschool.com/
  3. 安裝(cdn):https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/

RWD的設計理念

  1. 流動佈局(Fluid Grid):網頁佈局的尺寸改為百分比設定,讓元素根據視埠尺寸來縮放,在不同大小的瀏覽器都能呈現適當的樣式
  2. 彈性圖片(Fluid Images):讓圖片用百分比方式呈現
  3. 媒體查詢(Media Query):藉由偵測裝置的設備屬性(設備類型、解析度、螢幕尺吋...等),來決定套用那一種樣式
  4. meta viewport:透過設置viewport,我們可以控制網頁的縮放比例

Bootstrap 排版

  1. 容器:container
  2. 網格:rows、columns
  3. 螢幕可視區域(viewport)自動調整