我目前正在Astro（astro.build）上工作，希望将其与最新的Bootstrap版本一起使用。
有人了解Astro吗？请向我解释如何正确集成Bootstrap？
在网上和论坛上都没有找到任何答案，至少没有一个明确的答案。非常感谢！
7jmck4yq1#
A couple of options here:
In your index.astro file, you can add both Bootstrap latest CSS and JS in the header and body sections respectively like so
<!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>
You can install Bootstrap via NPM like so
npm install bootstrap@latest
And require it in your index.astro file within the frontmatter fencesYou can check out this starter template for more ideas on usage https://github.com/twbs/bootstrap-npm-starter
index.astro
uklbhaso2#
对于npm/Yarn：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>
2条答案
按热度按时间7jmck4yq1#
A couple of options here:
CDN
In your index.astro file, you can add both Bootstrap latest CSS and JS in the header and body sections respectively like so
npm
You can install Bootstrap via NPM like so
And require it in your
index.astrofile within the frontmatter fencesYou can check out this starter template for more ideas on usage https://github.com/twbs/bootstrap-npm-starter
uklbhaso2#
对于npm/Yarn：
index.astro