bootstrap5调用要点
时间: 2023-11-22 16:56:20 浏览: 38
要使用Bootstrap 5,你可以按照以下步骤进行调用:
1. 在 HTML 文件中引入 Bootstrap 5 的 CSS 和 JavaScript 文件。可以通过以下方式引入:
```html
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<!-- 引入 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
```
2. 在 HTML 文件中使用 Bootstrap 5 的组件和样式。如下所示:
```html
<div class="container">
<h1>Hello, Bootstrap 5!</h1>
<div class="row">
<div class="col-lg-6">
<p>This is a column with a width of 50% on large screens and full width on smaller screens.</p>
</div>
<div class="col-lg-6">
<p>This is another column with a width of 50% on large screens and full width on smaller screens.</p>
</div>
</div>
<button class="btn btn-primary">Click me!</button>
</div>
```
以上代码中,`container` 是一个 Bootstrap 5 的容器,`row` 和 `col-lg-6` 是 Bootstrap 5 的网格系统,`btn` 和 `btn-primary` 是 Bootstrap 5 的按钮样式。
希望这些提示可以帮助你开始使用 Bootstrap 5。