📌  相关文章
📜  boostrap 5 css 链接 - Html (1)

📅  最后修改于: 2023-12-03 14:59:32.353000             🧑  作者: Mango

Bootstrap 5 CSS 链接 - HTML

Bootstrap 5 是一个流行的前端框架，它包含了各种现代化的 CSS 和 JS 工具，可以轻松地构建响应式、美观、易用的网站和应用程序。

在 HTML 中链接 Bootstrap 5 CSS

首先，需要在 HTML 文件的 "head" 标签中添加以下链接，以便能够引用 Bootstrap 5 的 CSS 文件：

<!-- Link to Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">

其中，"href" 属性指定了 Bootstrap 5 的 CSS 文件的路径，它使用了 JSdelivr 提供的 CDN。使用 CDN 可以加速页面加载速度，并确保始终使用最新版本的 Bootstrap 5。

在 HTML 中使用 Bootstrap 5 CSS

一旦有了 Bootstrap 5 的 CSS 文件的链接，就可以在 HTML 文件中使用 Bootstrap 5 提供的各种样式了。以下是一些常用的 Bootstrap 5 样式类：

  • container: 用于创建容器，自动设置固定的最大宽度；
  • row: 用于创建行，可以包含一到多个列；
  • col: 用于创建列，自动处理不同屏幕尺寸的布局；
  • btn: 用于创建按钮，提供多种样式和尺寸选择，例如 .btn-primary、.btn-secondary、.btn-lg 等；
  • badge: 用于创建标记，用于显示信息的数量或状态，例如 .badge-primary、.badge-danger、.badge-pill 等；
  • form-control: 用于创建表单输入框，例如文本框、密码框、下拉菜单等。

以下是一个简单的 HTML 实例，演示如何使用 Bootstrap 5 的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 5 CSS Demo</title>
    <!-- Link to Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a Bootstrap 5 CSS demo.</p>
        <button class="btn btn-primary">Click me!</button>
        <span class="badge bg-secondary">New!</span>
        <form>
            <div class="mb-3">
                <label for="exampleFormControlInput1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
            </div>
            <div class="mb-3">
                <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <div class="mb-3">
                <label for="exampleFormControlSelect1" class="form-label">Example select</label>
                <select class="form-select" id="exampleFormControlSelect1">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
</html>
总结

通过以上步骤，就可以在 HTML 文件中链接并使用 Bootstrap 5 的 CSS 文件。只要熟悉 Bootstrap 5 的各种样式类，就可以轻松地构建出响应式、美观、易用的网站和应用程序。