--- tags: Bootstrap5網頁切版整合術 --- # 1. Bootstrap 5環境建置 ## vscode環境建置 <!--ok--> 1. [VSCode 官方網站](https://code.visualstudio.com/)、[VSCode繁體中文版安裝說明](https://wcc723.github.io/development/2019/12/01/vscode-chinese/) 使用VSCode來撰寫html、css、scss等 2. 再使用web server來預覽網頁，確保開發路徑跟伺服器是一致的→→ 安裝套件[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)，live server除了有server功能外，更新程式碼時，瀏覽器畫面也會自動更新，不用再按f5 3. 相關套件： * [Live Sass](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) 後面課程會運用到 * [12 個前端愛用的 VSCode 擴充套件](https://wcc723.github.io/development/2020/12/13/vscode-extension/) * [樣式主題 Atom One](https://marketplace.visualstudio.com/items?itemName=andischerer.theme-atom-one-dark) 依個人需求安裝使用 ## 語系設置 ### ● 語系: `<html lang="zh-TW">` 比較完整的用法是zh-Hant-TW，使用zh-TW也可以瀏覽器會判斷為zh-Hant-TW自動校正 ![](https://i.imgur.com/Uc49YcN.png) ## Bootstrap CDN ### ● css: 在bs文件getting started/Introduction，複製css語法到專案`<head>`中 ![](https://i.imgur.com/sLHgiLQ.png) ### ● js: 在bs文件getting started/Introduction，引用js語法到專案`<body>`，放在最後面 js有Bundle和Separate，兩者差在popper這套件是否整合，popper套件主要為定位使用，滿多會用到所以使用Bundle即可 bs文件裡有"切換"或"方法"的都會用到jq，例如data-bs- ![](https://i.imgur.com/bPENFkr.png) ## class運用 bs會加入大量的class來套用樣式，每個class代表部分結構、樣式、狀態等， class是標籤屬性只能出現一次，若有重複後面的會無法呈現 ![](https://i.imgur.com/MWDbUWA.png) ## Bootstrap icon 可單獨使用，不用bs框架也可