twitter-bootstrap - navbar-toggle、collapse、navbar-collapse 类如何协同工作？

Question

我是 CSS 和 Bootstrap 3.0 的新手。下面是我可以在很多地方找到的代码，现在我可以毫无问题地编写它。但我真的不知道幕后情况如何。

<div class="navbar navbar-static-top navbar-inverse" role="navigation">
        <a class="navbar-brand">Company</a>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".top-nav">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse top-nav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>

上面的代码将为我提供一个动态 UI。有人可以回答我的以下问题吗

如何在按钮和导航栏之间建立连接。答:在
这种情况下，我知道名为“top-nave”的类连接这两个
成分。但是那么其他类的意义是什么(
折叠导航栏折叠)。我了解到我们需要两者兼得
类，即折叠和导航栏折叠。不知道为什么？

所有的魔法都是由 CSS 完成的，还是我们确实有一些 JavaScript 代码
操纵代码？ (我猜是的，因为存在 data- 属性)

谁能建议 data-toggle 和 data-target 的其他用法
bootstrap 3 中的属性以清楚地理解概念？

问候，
赫曼

Answer 1

1. 按钮和导航栏之间的连接性质:

通过collapse.js .来自 v3 documentation,

buttons show and hide another element via class changes:
.collapse hides content
Use a button with the data-target attribute and the data-toggle="collapse".

所以在你的代码中， data-target=".top-nav"
类(class) collapse和 navbar-collapse对 the CSS 很重要.

两者都需要在 CSS 中允许更具体的选择器。

2. 导航栏使用 javascript 折叠:
https://github.com/twbs/bootstrap/blob/v4-dev/js/src/collapse.js

3. 属性 data-toggle和 data-target在整个 Bootstrap 中用于诸如切换可见性之类的事情，但也用于轮播或启动模式。