带有按钮和文本的 Bootstrap 4 横幅 - HTML

在使用 HTML 和 Bootstrap 4 构建网页时，经常需要添加横幅。本文将介绍如何使用 Bootstrap 4 创建一个带有按钮和文本的横幅。

示例代码

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

解释说明

以上代码使用了 Bootstrap 4 的 .jumbotron 类来创建横幅。以下是各个部分的详细说明：

• <h1 class="display-4">Hello, world!</h1>：使用 .display-4 类来设置标题的样式。你可以通过修改该类的属性来调整字体大小和样式。
• <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>：使用 .lead 类来设置段落文本的样式。该类可用于任何文本，并将其加粗并增加字号。
• <hr class="my-4">：使用 .my-4 类来设置水平线的上下边距。
• <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>：使用普通段落标记来添加一般文本。
• <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>：使用 .btn, .btn-primary 和 .btn-lg 类来创建一个按钮。 .btn 类是所有按钮所需的基础类；.btn-primary 类设置按钮的背景颜色； .btn-lg 类增加按钮的大小。 href="#" 和 role="button" 属性将其呈现为链接按钮，让用户知道可以通过单击它来执行操作。

结论

使用以上代码示例，你可以轻松地创建一个带有按钮和文本的 Bootstrap 4 横幅来突出显示网站内容、促进用户点击链接并增加转化率。