Question

我正在使用Bootstrap构建一个网站。我找到了以下HTML代码来制作导航栏。我想了解我使用的所有内容。

<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
               </button>

在这部分中，我不理解data-target和data-toggle atributte。我知道它与导航的责任有关，但我需要知道它是如何有效的。

接下来，有这一部分：

<div class="navbar-collapse navbar-responsive-collapse collapse">
                  <ul class="nav navbar-nav"></ul>

在这里，我只需要知道所有使用过的类的功能。

有没有人能够向我解释这几件事？我真的很感激。

Answer 1

带有Button的

data-target基本上说明了这一点：此按钮控制的元素具有与data-target attr相同的类/ ID。按钮的值。在Bootstrap的JavaScript代码中，它为这个逻辑提供了一些代码。

默认情况下，button data-target="#my-navbar id="my-navbar"将使用navbar-collapse navbar-responsive-collapse collapse控制下拉菜单。

默认行为是指在点击768px以下时显示导航栏的内容。

media query类已应用于导航栏，并表示在给定的768px下方崩溃到响应模式（默认值低于collapse）。当视口低于768px并应用响应类时（隐藏汉堡包button下方的导航栏链接），将应用类{{1}}。

Here's link from the docs

了解Bootstrap导航类和属性

1 个答案: