如何使用Bootstrap将Top Navigation与Left Navigation Bar一起使用？

在网站界面设计中，Top Navigation和Left Navigation Bar都是常见的组件。而使用Bootstrap可以很好地实现这两个组件的结合，提升用户体验。下面介绍如何使用Bootstrap将Top Navigation和Left Navigation Bar一起使用。

前提条件

在开始前，需要将Bootstrap集成到网站中。可以从官方网站下载相关文件，或者使用CDN方式引入。这里以CDN方式为例：

<!-- CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- JS文件 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

布局结构

首先，需要定义整个页面的布局结构。这里采用以下结构：

<div class="container-fluid">
  <div class="row">
    <div class="col-2 bg-dark">Left Navigation Bar</div>
    <div class="col">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Top Navigation</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="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="container">Content Area</div>
    </div>
  </div>
</div>

其中，.container-fluid表示使用100%的宽度；.row表示一行，采用Flex布局；.col表示占据整行的一部分，这里占据了剩余的部分，即col-10；.bg-dark表示背景色为深色；.navbar是Top Navigation的组件，.navbar-brand表示网站的Logo；.navbar-toggler是一个隐藏按钮，可以用于展开或收起导航栏；.navbar-collapse是导航栏隐藏的容器；.navbar-nav是导航栏中的菜单项。

CSS样式

为了优化页面的展示效果，需要添加一些自定义的CSS样式：

.container-fluid {
  height: 100vh;
  padding: 0;
}

.col-2 {
  height: 100%;
  position: fixed;
}

.col {
  padding-left: 0;
}

.navbar {
  border-bottom: 1px solid #e6e6e6;
}

.nav-link {
  font-size: 18px;
  color: #333;
}

.active .nav-link {
  color: #007bff !important;
}

其中，.container-fluid的高度设置为100vh，即占据整个窗口的高度；.col-2的高度设置为100%，位置设置为固定定位；.col的左内边距为0，因为第一列已经占据了一定的宽度；.navbar下边框设置为1px粗的灰色线；.nav-link字体大小为18px，颜色为黑色；当菜单项处于激活状态时，字体颜色为蓝色。

结束语

通过以上步骤，我们已经成功地将Top Navigation和Left Navigation Bar结合在一起了。通过这种方式，用户可以更方便地浏览网站内容，提升用户的使用体验。