引导程序让我摸不着头脑：<nav>、.nav、.navbar-nav、.navbar

Question

我是Bootstrap的新手。每次我使用Bootstrap创建导航栏时，我都会使用这些元素/类，但所有这些都让我感到困惑：

<nav> 
.nav
.navbar
.navbar-nav

谁能解释一下这些元素/类之间的区别？

Answer 1

在Bootstraps v4 documentation中有一个很好的解释(我只需要c/p所需的部分)。

Navbar

导航栏需要包装.navbar和配色方案。

通过使用<nav>元素来确保可访问性，或者，如果使用更通用的元素(如<div> )，则向每个导航栏添加role="navigation"，以显式地将其标识为辅助技术用户的标志性区域

用于全高轻量级导航的.navbar-nav (包括对下拉菜单的支持)

Navs

通过扩展基本的.nav组件，

滚动您自己的导航样式。所有Bootstrap的nav组件都是在此基础上通过指定其他样式构建的。包括禁用状态的样式，但不包括活动状态的样式。

Answer 2

<nav>标签不是由bootstrap设置样式的，它只是一个指示导航的HTML5标签。其他类用于样式化Bootstrap navbar-component的不同部分。使用任何浏览器的开发人员工具都可以看到这些类到底做了什么。右键单击完成的导航栏，选择“inspect element”或类似的内容，然后在DOM中导航。

所有这些类的原因是Bootstrap试图使它们的组件更具可重用性。如果它将所有nav-elements样式化为它的导航栏组件，这将使开发人员很难创建自己的导航栏，因为他们将需要覆盖此元素上的任何引导样式。

Answer 3

这些是执行用户想要实现的特定功能的引导程序类。在您的示例中，您希望向页面添加一个导航栏，并使用bootstrap navbar类来实现该功能。如果您看到了bootstrap.css和bootstrap.js文件的源代码，并且找到了navbar类，那么您就可以看到navbar类的代码。这是源文件中的代码片段。

  .navbar-nav {
  margin: 7.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

如果您使用这个navbar-nav类。此功能将添加到您的元素中。