Bootstrap 4 导航组件

Bootstrap 4 提供了 .nav 、 .nav-item 和 .nav-link css 类用于创建一个简单的导航栏

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Python</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">php</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Perl</a>
  </li>
</ul>

禁用某个导航项

可以将 .disabled 添加到 .nav-link 元素上来禁用一个导航项

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Python</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">PHP</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Perl</a>
  </li>
</ul>

导航对齐方式

默认情况下，导航条是左对齐的

可以在 .nav 元素上添加 .justify-content-center CSS 类设置导航居中显示

添加 .justify-content-end CSS 类设置导航右对齐

<!-- 导航居中 -->
<ul class="nav justify-content-center">

<!-- 导航右对齐 -->
<ul class="nav justify-content-end">

垂直导航

默认情况下，导航是水平的

可以在 .nav 元素上添加 .flex-column 创建垂直导航

<ul class="nav flex-column">

导航栏等宽

在 .nav 元素上添加 .nav-justified CSS 类可以设置导航项齐行等宽显示

<ul class="nav nav-justified">

链接: https://fly63.com/course/19_964