Bootstrap

Bootstrap 是一款强大、可扩展且功能丰富的前端工具包，包含 HTML、CSS 和 JavaScript。您可以使用 Sass 进行构建和自定义，受益于预定义的网格系统和组件，并使用强大的 JavaScript 插件增强您的项目。

更多信息请访问 https://bootstrap.ac.cn/

使用

您可以使用以下 Qwik 启动脚本轻松添加 Bootstrap

npm run qwik add bootstrap

前面的命令会使用必要的依赖项更新您的应用程序。

• bootstrap@5
• @types/bootstrap@5

它还会在您的项目文件夹中添加新文件

• src/models/bootstrap.ts: 模型用于定义 Bootstrap 组件信息，以便在 props 中使用。
• 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 的导航栏组件功能，用于演示如何在不遇到“document is not defined”错误的情况下添加和使用 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 所需的所有信息。 参考