如何在 bootstrap 中创建两个色调的横幅？(1)

📌 相关文章

📜 如何在 bootstrap 中创建两个色调的横幅？(1)

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

Bootstrap 是一个流行的前端框架，它提供了丰富的样式和组件，让我们可以轻松地创建各种网页。在 Bootstrap 中，我们可以使用内置的类和样式来创建两个色调的横幅。

下面是一个简单的示例，展示了如何使用 Bootstrap 创建两个色调的横幅。

<div class="jumbotron jumbotron-primary">
  <div class="container">
    <h1>这是第一个色调横幅</h1>
    <p>欢迎来到我们的网站！</p>
  </div>
</div>

这里我们使用了 jumbotron-primary 类来创建一个蓝色的背景色调横幅。

<div class="jumbotron jumbotron-secondary">
  <div class="container">
    <h1>这是第二个色调横幅</h1>
    <p>感谢您访问我们的网站！</p>
  </div>
</div>

这里我们使用了 jumbotron-secondary 类来创建一个灰色的背景色调横幅。

请注意，上面的示例假定你已经在网页中包含了 Bootstrap 的 CSS 文件。如果没有，请确保在 <head> 标签中添加以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/css/bootstrap.min.css">

以上就是如何在 Bootstrap 中创建两个色调的横幅的介绍。通过使用不同的类名，你可以轻松地创建和定制不同色调的横幅。希望这个介绍对你有所帮助！