navbar-toggle、collapse、navbar-collapse 类如何协同工作？答案

【问题标题】：How navbar-toggle, collapse, navbar-collapse classes work together?navbar-toggle、collapse、navbar-collapse 类如何协同工作？
【发布时间】：2013-12-31 10:02:18
【问题描述】：

我是 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 中的属性以清楚地理解概念？

问候，赫曼特

【问题讨论】：

您为什么不阅读 GetBootstrap.com 上的文档getbootstrap.com/javascript/#collapse
另外，折叠插件在 2.x 中也可用：getbootstrap.com/2.3.2/javascript.html#collapse

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案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"

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 属性在整个引导程序中用于切换可见性（如所讨论的），也用于轮播或启动模式。

【讨论】：

【解决方案2】：

现在在 Bootstrap 4.x 中解决这个问题要容易得多。只需调整 html 中的导航栏类，例如...

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">

与 navbar-expand-sm 混淆：更改结尾 -xs、-sm、-md、-lg、-xl，直到导航栏折叠到您想要的位置。花了我一段时间，所以我想我会分享:-)

【讨论】：