在 Astro 中导入 Bootstrap

Question

我目前正在开发 Astro (astro.build)，并希望将其与最新的 Bootstrap 版本一起使用。

有谁了解 Astro 并且可以向我解释如何正确集成 Bootstrap 吗？

在互联网上或论坛上没有找到任何内容，至少没有明确的答案。

非常感谢！

Answer 1

对于 npm/纱线：

index.astro

---
import "bootstrap/dist/css/bootstrap.min.css";
import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min.js?url";
---
<html>
<script src={bootstrap}></script>
<!-- Your page here -->
</html>

Answer 2

这里有几个选项：

CDN

在你的index.astro文件中，你可以分别在 header 和 body 部分添加 Bootstrap 最新的 CSS 和 JS，如下所示

<!doctype html>
<html lang="en">
  <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.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

新项目管理

你可以像这样通过 NPM 安装 Bootstrap

npm install bootstrap@latest

并在您的文件中要求它index.astro在 frontmatter 范围内

您可以查看此入门模板以获取更多使用想法 https://github.com/twbs/bootstrap-npm-starter