使用Bootstrap将导航链接移动到左侧 - HTML

Bootstrap是一个流行的前端框架，它可以帮助程序员快速创建现代化的网站。在这篇文章中，我们将介绍如何使用Bootstrap将导航链接移动到网页左侧。这样的导航结构在很多网站上都可以看到，它可以增加网站的可读性和导航的易用性。

HTML代码

首先，我们需要在HTML代码中添加一些Bootstrap的类。以下代码片段是一个基本的HTML结构，它包括一个导航和一个内容区域。我们将使用Bootstrap的栅格系统将导航移动到左侧，同时让内容区域占据整个页面的宽度。

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="nav flex-column">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">About</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>
    </div>
    <div class="col-md-9">
      <h1>Content Goes Here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod justo eget dolor tempus, ut efficitur dui aliquet. Donec euismod tortor eu diam semper faucibus ac a massa. Integer pulvinar, augue eu ullamcorper gravida, enim turpis vehicula leo, ut tempor odio ipsum quis magna.</p>
    </div>
  </div>
</div>

解析

让我们逐一解析这段代码，看看它是如何把导航移到左侧的。

.container

我们首先创建了一个.container元素。这是Bootstrap中用来包含页面内容的最外层元素。它会自动为内容提供默认的宽度和最大宽度，并且会使内容在屏幕上居中显示。

.row

在.container内部，我们创建了一个.row元素。这是Bootstrap中用来创建网格布局的元素。我们将使用.row来创建左侧的导航和右侧的内容区域。

.col-md-3

接下来，我们使用.col-md-3类来创建一个左侧的栏。这个类表示该元素占据网格的3列，它会在中等屏幕上显示。如果你想让这个栏在小屏幕上也显示，可以使用.col-3类。

.nav

在.col-md-3内部，我们创建了一个.nav元素。这是Bootstrap中用来创建导航菜单的元素。我们使用.nav.flex-column类来让导航垂直显示。

.nav-link

在.nav内部，我们创建了链接元素，使用.nav-link类来让它们看起来像导航链接。这些链接会在单击时跳转到其他页面或锚点。

.col-md-9

最后，我们使用.col-md-9类来创建一个右侧的栏。它占据剩余的网格列，并且会在中等屏幕上显示。如果你想让它在小屏幕上也显示，可以使用.col-9类。

结论

这样，我们就完成了使用Bootstrap将导航链接移动到左侧的教程。通过使用Bootstrap的栅格系统和导航组件，我们可以轻松地构建现代化的网站，并让用户更容易地找到所需的信息。如果你想进一步了解Bootstrap，请查看官方文档和示例代码。