Импорт Bootstrap в Astro

В настоящее время я работаю над Astro (astro.build) и хотел бы использовать его с последней версией Bootstrap.

Кто-нибудь знает об Astro и может объяснить мне, как правильно интегрировать Bootstrap?

Ни в интернете, ни здесь на форуме ничего не нашел, по крайней мере четкого ответа не было.

Большое спасибо!

Источник

2 ответа

Для нпм/пряжи:

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>
Источник

Пара вариантов здесь:

CDN

В вашем файле index.astro вы можете добавить последнюю версию CSS и JS Bootstrap в разделах заголовка и тела соответственно, например, так

      <!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>

нпм

Вы можете установить Bootstrap через NPM вот так

      npm install bootstrap@latest

И требуйте его в своемindex.astroфайл в передней части заборов

Вы можете проверить этот начальный шаблон для получения дополнительных идей по использованию https://github.com/twbs/bootstrap-npm-starter.

Источник
Другие вопросы по тегам