Question

当我查看bootstrap在他们的网站上为navbar-default（getbootstrap.com/components/#navbar-default）提供的示例时，我遇到了一些我不理解的HTML：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

非常感谢对代码的解释。

Answer 1

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

1）data- *属性用于存储页面或应用程序专用的自定义数据，它指示在引导程序（响应性）内屏幕宽度的定义断点处折叠导航栏。

2）数据目标是示例中的bootstrap导航栏，参见1）。

3）data-toggle="collapse"表示bootstrap API会折叠导航栏。

4）您可以在此处阅读有关咏叹调的更多信息ARIA Mozilla Network

Answer 2

当浏览器延伸到小于视口的断点时，您的链接将折叠为切换按钮，html用于指定切换的外观以及用于折叠菜单的ul

Bootstrap navbar-default

2 个答案: