Skip to content

建立 2024-01-01 更新 2026-09-15

開始使用

最常見的起步方式是 CDN：不裝 npm、不編譯 Sass，把官方提供的 CSS 與 JS 連結貼進 HTML 就能用。本頁對應官方 Get started with Bootstrap，版本為 5.3.8。

最小範例

兩件事缺一不可：

  1. <head> 裡的 viewport：告訴手機「依裝置寬度縮放」，否則響應式網格會當成桌面版硬縮。
  2. CSS 放在 <head>，JS bundle 放在 </body> 之前。bundle 已含 Popper，下拉選單、tooltip 才定位得了。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

integrity 用來核對檔案沒被竄改；換版本時必須一併更新雜湊，不要只改版號。

還有兩種引入方式

專案變大再考慮 npm 安裝 或下載編譯好的 CSS／JS。入門用 CDN 就夠。

效果展示

下面編輯器會載入同一份 Hello World，方便你改 class 立刻看結果。

推薦影音

來源：The Net Ninja　約 6 分鐘

示範在 VS Code 建立專案、貼上 CDN、用 Live Server 預覽。對應本頁的最小範例。

更多影片見 影音教學。