实施引导程序 4 拆分导航的最佳实践是什么?

Question

有没有比我编码以下内容更好的方法来编写 BS-4 拆分导航。在一个完美的世界中，我只想每个链接有一个实例，但我无法弄清楚是否有办法做到这一点

https://jsfiddle.net/jpmoran/v8Larf2n/

<nav class="navbar navbar-expand-md navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="/">
            <img src="https://via.placeholder.com/50" width="50" height="50" class="d-inline-block align-top" alt="">
            <span class="navbar-text h3 pb-0 mb-0">BizCards4Less</span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="d-none d-md-block ml-auto">
            <div class="navbar-nav ml-auto ">
                <a class="nav-item nav-link" href="#">Sign In</a>
                <a class="nav-item nav-link" href="#">Cart</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </div>
    </nav>
    <nav class="navbar navbar-expand navbar-light shadow" style="background-color: #fff;">
        <div class="navbar-nav mx-md-auto w-100 d-flex justify-content-between justify-content-sm-center">
            <a class="nav-item nav-link h6 px-auto px-md-3 mx-md-3" href="#">Shop Biz Cards</a>
            <a class="nav-item nav-link h6 px-auto px-md-3 mx-md-3" href="#">Re-Order Program</a>
            <a class="nav-item nav-link h6 px-md-3 mx-md-3 d-none d-md-block" href="#">About</a>
            <a class="nav-item nav-link h6 px-md-3 mx-md-3 d-none d-md-block" href="#">Blog</a>
        </div>
    </nav>
    <div class="collapse navbar-collapse" id="navbarToggler">
        <nav class="navbar navbar-light bg-light d-md-none shadow">
            <div class="navbar-nav mr-auto">
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Blog</a>
                <a class="nav-item nav-link" href="#">Sign In</a>
                <a class="nav-item nav-link" href="#">Cart</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </nav>
    </div>

Answer 1

如果你想

坚持使用静态HTML - 不。HTML 不能包含决定哪些导航项显示在下拉列表中和/或栏中的逻辑，而无需代码重复。

通过@media查询使用复杂的CSS(引导程序4的".hidden-..."类( - 有点。

使用 JS - 是的。 您可以通过将链接存储在某种形式的配置中来避免代码重复，该配置确定导航链接是否出现在导航栏中、导航下拉列表或两者中，例如： navItems = [{ text: "About", href: "/about", inNavBar: false, inNavDropdown: true},...]

然后，将遍历此数组并动态创建两个导航视图

例如，一个快速的 JSX 将是：

const navItems = [...] // your nav items config array
const navBar = () => (
  <React.Fragment>
    <div class="navbar-nav ...">
      {navItems
        .filter(({ inNavBar }) => inNavBar)
        .forEach(({ text, href }) => (
          <a class="nav-item nav-link href={href}>{text}</a>)}
    </div>
  </React.Fragment>
)
</div>
const navDropdown = () => (
  // same as navBar() but will filter for inNavDropDown == true instead of inNavBar
)

一个普通的JS实现将包含相同的逻辑，但在元素的创建中有一些冗长和差异。