使用导航栏引导 Jumbotron

在网页设计中，导航栏是非常重要的组成部分，它能够引导用户浏览网页内容并方便地跳转到相关部分。而 Jumbotron 是 Bootstrap 中一个很实用的组件，它可以让你快速创建一个类似于大幅广告的区域来引导用户的注意力，结合导航栏可以使网页看起来更加专业和时尚。

准备工作

首先，你需要引用 Bootstrap 框架。你可以通过将以下代码插入到 HTML 中来引用 Bootstrap：

<!-- 在 head 标签内插入以下代码 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- 在 body 标签内插入以下代码 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

创建导航栏

Bootstrap 中使用 nav 和 li 标签创建导航栏，我们可以这样写：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">产品</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

上面的代码创建了一个带有品牌和导航链接的导航栏，其中 nav-link 类是 Bootstrap 提供的专用类，用于设置导航链接的样式。

创建 Jumbotron

创建 Jumbotron 只需要在 HTML 中添加以下代码：

<div class="jumbotron">
  <h1 class="display-4">欢迎来到我的网站！</h1>
  <p class="lead">这是一个可以让你了解很多有趣的内容的地方。</p>
  <hr class="my-4">
  <p>你可以浏览我们的产品、服务、并联系我们。</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>

结合导航栏和 Jumbotron

最后，将导航栏和 Jumbotron 结合在一起只需要将代码组合起来：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">产品</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

<div class="jumbotron">
  <h1 class="display-4">欢迎来到我的网站！</h1>
  <p class="lead">这是一个可以让你了解很多有趣的内容的地方。</p>
  <hr class="my-4">
  <p>你可以浏览我们的产品、服务、并联系我们。</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>

这样就可以得到一个带有导航栏和 Jumbotron 的网页了。

结论

在这篇文章中，我们介绍了如何结合 Bootstrap 导航栏和 Jumbotron 来创建一个专业的网页。导航栏可以引导用户浏览页面，而 Jumbotron 可以突出页面的重要区域。这样的设计既漂亮又实用，相信会让你的网站受到更多人的欢迎。