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.有人可以回答我的下面的问题

1. 如何在按钮和导航栏之间建立连接.Ans:在这种情况下,我知道名为'top-nave'的类连接这两个组件.但那么其他类的重要性是什么(折叠导航栏崩溃).我了解到我们需要同时拥有两个类,即崩溃和导航栏崩溃.不知道为什么？
2. 所有魔术都是由CSS完成的,还是我们有一些操纵代码的javascript代码？(我猜是的,因为存在data-属性)
3. 任何人都可以建议在bootstrap 3中使用数据切换和数据目标属性来清楚地理解概念吗？

问候,Hemant

Answer 1

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

通过crash.js。从v3 文档来看，

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"

类collapse和对于CSSnavbar-collapse来说很重要。

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

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

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