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-属性）
任何人都可以建议使用数据切换和数据目标 bootstrap 3中的属性能够清楚地理解概念吗？

此致 Hemant

Answer 1

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

通过https://docs.djangoproject.com/en/1.10/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display。来自collapse.js

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对于v3 documentation,非常重要。

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

2。导航栏使用javascript折叠： the CSS

3。在整个引导程序中使用属性https://github.com/twbs/bootstrap/blob/v4-dev/js/src/collapse.js和data-toggle，以便像讨论的那样切换可见性，还可以在轮播中或启动模式。

Answer 2

现在在 Bootstrap 4.x 中修复此问题要容易得多。只需在html中调整navbar类，就像...

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

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

navbar-toggle，collapse，navbar-collapse类如何协同工作？

2 个答案: