Card

Navbar

Bootstrap是一組用於網路應用程式開發的開源前端（所謂「前端」，指的是展現給終端使用者的介面。與之對應的「後端」是在伺服器上面執行的代碼）框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。 基本上， Bootstrap就是套招。用別人寫好的HTML, CSS, JavaScript來快速建置網站。 Bootstrap內建的樣式都有自帶RWD的設計，且經過多人驗證與改良，可以方便有效的建立起美觀的網站。

六角學院翻譯中文版：https://bootstrap5.hexschool.com/

Bootstrap 中的響應式中斷點

image.png

image.png

image.png

col-md-4表示在md以上(大裝置)會是col-4三欄的排版方式，而以下(小裝置)會是col-12一欄

為何NavBar的漢堡選單沒有作用

要記得在main.js加入以下這行：

import 'bootstrap/dist/js/bootstrap.bundle';

bundle 就是把 JS 依賴的套件打包在一起的檔案

以 Bootstrap 5 為例，某些元件的功能依賴於 popper.js

所以 bundle 就會包含 Bootstrap 本身的 JS 和 popper.js

關於這個部分，最簡單的方式是直接在 main.js 加入：

import 'bootstrap'

這樣就會吃到全部的 JS 檔案