Bootstrap Navbar 中的“data-toggle="collapse" 按钮”有什么用？答案

【问题标题】：What is the use of the 'data-toggle="collapse" button' in Bootstrap Navbar?Bootstrap Navbar 中的“data-toggle="collapse" 按钮”有什么用？
【发布时间】：2021-03-12 06:33:32
【问题描述】：

我目前正在学习 Bootstrap 4，并且正在研究导航栏部分并提出了一个问题

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

aboce 是响应式轻主题导航栏中包含的所有子组件的示例，该导航栏在 lg（大）断点处自动折叠。但是，我无法弄清楚以下部分：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

我知道 data-toggle 是什么...但是为什么在这个 html 模板中必须有一个按钮类型呢？您不能将data-toggle 部分输入到按钮类正下方的<div> 类中吗？因为我在nav > using dropdowns 部分的文档中看到，您可以在<li> 元素或<a> 元素中使用数据切换。

这个按钮的作用是什么？打开文件时，我什至看不到 html 中的按钮。

【问题讨论】：

标签： html bootstrap-4 navbar

【解决方案1】：

我建议你看看：https://getbootstrap.com/docs/4.0/components/navbar/?明白我的意思。但基本上，当你运行你发布的这段代码时，你看到的是一个可以折叠的导航栏，它非常清楚地说明了“导航栏”。在“导航栏”一词旁边，有一个按钮，在被按下或单击时，会向您显示代码中的其他选项，如“主页”、“链接”等。所以基本上，这个按钮你说过，当您单击它时，您会看到应该在导航栏中的其余项目。

现在关于您看不到它的原因，请最小化您的屏幕并查看它。当屏幕较小时，该按钮会出现下面按钮代码中提到的“导航栏切换图标”，因此当您单击它时，您将看到导航栏的其他元素，在更大的屏幕上是无需按钮即可直接显示。

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

【讨论】：

【解决方案2】：

根据我的说法，您只需制作一个简单的 HTML 页面。添加引导 CDN 链接并注意它是如何工作的，您可以通过删除按钮并替换为它的 div 来尝试一次。

您将确切了解到底发生了什么。你告诉你那里没有任何按钮，如果你想看到这个按钮，这个按钮会显示在小屏幕上，你可以减小浏览器的大小。也可以参考这个https://getbootstrap.com/docs/4.0/components/navbar/

【讨论】：

【解决方案3】：

这是您的Navbar 的常规外观。

但是当你的屏幕开始缩小时，内容必须到某个地方才能适应，所以它会变成这样：

在右上角，您会看到一个按钮。这正是你要问的。此按钮在按下时会显示所有导航栏内容。

所以基本上，它是一个按钮，它允许这种更具响应性的行为，同时以某种方式保持所有内容可用。

【讨论】：