Bootstrap

Bootstrap 是一個強大、可擴展且功能豐富的前端工具包，包含 HTML、CSS 和 JavaScript。您可以使用 Sass 進行建構和自訂，從預定義的網格系統和元件中受益，並使用強大的 JavaScript 外掛增強您的專案。

更多資訊請見 https://bootstrap.dev.org.tw/

用法

您可以使用以下 Qwik 入門腳本輕鬆添加 Bootstrap：

npm run qwik add bootstrap

先前的指令會使用必要的依賴項更新您的應用程式。

• bootstrap@5
• @types/bootstrap@5

它也會將新檔案新增到您的專案資料夾中

• src/models/bootstrap.ts：模型，用於定義要在 props 中使用的 Bootstrap 元件資訊。
• src/constants/data.ts：我們將在此整合建立的範例中使用的常數值資訊。
• src/components/bootstrap/button.tsx：具有 Bootstrap 的按鈕元件功能。
• src/components/bootstrap/alert.tsx：具有 Bootstrap 的警報元件功能。
• src/components/bootstrap/spinner.tsx：具有 Bootstrap 的旋轉器元件功能。
• src/components/bootstrap/index.ts：我們將新增要使用的元素元件的進入點，以便更輕鬆、更乾淨地存取它們。
• src/components/bootstrap/navbar.tsx：具有 Bootstrap 的導航列元件功能，示範如何在不遇到「未定義文件」錯誤的情況下新增和使用 JavaScript 功能，因為在 Qwik 生命週期中匯入宣告不正確。
• src/routes/bootstrap/layout.tsx：我們在其中新增 Bootstrap 樣式設定的佈局，以確保樣式套用到主要 Bootstrap 路由內嵌套的所有路由。
• src/routes/bootstrap/index.tsx：Bootstrap 元件選項首頁。
• src/routes/bootstrap/buttons/index.tsx：使用範例資料使用按鈕元件的範例。
• src/routes/bootstrap/alerts/index.tsx：使用範例資料使用警報元件的範例。
• src/routes/bootstrap/spinners/index.tsx：使用範例資料使用旋轉器元件的範例。

整合 Bootstrap 後

整合 Bootstrap 後，您可以存取 /bootstrap/ 路由，您可以在其中找到此整合可用的所有範例。

關於 Bootstrap 的有趣資訊

官方網站

• 範例：我們可以將其用作靈感的範例，並學習如何使用 Bootstrap 建立有趣的網站。參考。
• 文件：使用 Bootstrap 的所有必要資訊。參考