Question

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

<nav> 
.nav
.navbar
.navbar-nav

有人可以解释这些元素/类之间的区别吗？

Answer 1

在Bootstraps v4 documentation中有一个很好的解释（我只需要提供必要的部分）。

Navbar：

Navbars需要包装.navbar和配色方案。

使用<nav>元素确保辅助功能，或者，如果使用<div>等更通用的元素，则为每个导航栏添加role="navigation"，以明确将其标识为地标区域辅助技术的用户

.navbar-nav用于全高度轻量级导航（包括对下拉列表的支持）

Navs：

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

Answer 2

DSESearch.numFound标记没有由引导程序设置样式，它只是一个表示导航的HTML5标记。其他类用于设置Bootstrap导航栏组件的不同部分的样式。使用任何浏览器的开发人员工具可以看到每个类的确切内容。右键单击完成的导航栏并选择“检查元素”或类似的东西，然后浏览DOM。

所有这些类的原因是Bootstrap试图使它们的组件更可重用。如果它将所有<nav> - 元素设置为navbar-component的样式，那么开发人员很难创建自己的navbars，因为他们需要覆盖此元素上的任何Bootstrap样式。

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类。此功能将添加到您的元素中。

Bootstrap令我困惑：<nav>，。nav，.navbar-nav，.navbar

3 个答案: