Question

是否有比我下面的代码更好的编码BS-4拆分导航的方法。在一个理想的世界中，我只希望每个链接只有一个实例，但是我不知道是否有办法做到这一点

<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不能包含逻辑，该逻辑决定在没有代码重复的情况下在下拉列表，然后是bar或同时在其中出现哪些导航项。

通过@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实现将包含相同的逻辑，但是在元素创建方面有些冗长和不同。

实施Bootstrap 4拆分导航的最佳实践是什么？

1 个答案: