Bootstrap 4 固定布局介绍

Bootstrap 4 固定布局是一种常用的网页布局方式，可以有效地保持页面的稳定性，使页面更易于维护。在本文中，我们将以Bootstrap 4 固定布局为主题，详细介绍该布局的使用方法。

什么是Bootstrap 4 固定布局

Bootstrap 4 固定布局是一种将页面分成两个主要部分的布局方式，即固定的导航栏和内容区域。固定的导航栏通常包含网站的标题、导航链接和其他重要的信息，而内容区域则放置网站的主要内容，例如文章、图片和表格等。

如何创建Bootstrap 4 固定布局

要创建Bootstrap 4 固定布局，你需要先下载Bootstrap 4框架并引入它的CSS和JS文件。

创建导航栏

首先，在HTML文档中定义导航栏的HTML结构，如下所示：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</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="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

在这个例子中，我们创建了一个黑色的导航栏，其中包含网站的标题“我的网站”，导航链接和一个折叠按钮，“折叠”按钮用于在小屏幕上折叠导航。

创建内容区域

接下来，在HTML文档中定义内容区域的HTML结构，如下所示：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 bg-light">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Link 4</a>
        </li>
      </ul>
    </div>
    <div class="col-md-10 bg-light">
      <h1>Welcome to my website!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat, arcu eu accumsan consectetur, lectus felis viverra sapien, et tristique eros ex vitae libero. Suspendisse ut lacinia sapien. Aenean sit amet quam vehicula, vulputate enim vitae, tristique turpis.</p>
      <p>Nullam finibus sapien in sapien pellentesque convallis. In hac habitasse platea dictumst. Fusce eleifend velit quis turpis fermentum, nec hendrerit ipsum ornare. Aliquam sit amet risus eu ipsum hendrerit consequat. Nulla bibendum iaculis urna, rhoncus varius nunc ornare nec.</p>
    </div>
  </div>
</div>

在这个例子中，我们创建了一个包含两个列的网格系统。左侧的列包含一个垂直的导航菜单，右侧的列包含网站的主要内容。

将导航栏和内容区域连接起来

最后，我们需要将导航栏和内容区域连接起来，以实现Bootstrap 4 固定布局。在HTML文档中，只需将导航栏的fixed-top类和body的padding-top设置为导航栏的高度即可，如下所示：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <!-- 导航栏的HTML结构 -->
</nav>

<div class="container-fluid" style="padding-top: 70px;">
  <!-- 内容区域的HTML结构 -->
</div>

在这个例子中，我们使用了fixed-top类将导航栏固定在页面的顶部，并将padding-top设置为70px，以确保内容不会被导航栏覆盖。

总结

Bootstrap 4 固定布局是一种常用的网页布局方式，可以有效地保持页面的稳定性。要创建Bootstrap 4 固定布局，我们需要定义导航栏和内容区域的HTML结构，并将它们连接起来。希望这篇文章能帮助你更好地了解Bootstrap 4 固定布局的使用方法。