bootstrap导航栏折叠

最新推荐文章于 2026-05-10 06:26:31 发布

原创最新推荐文章于 2026-05-10 06:26:31 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Bootstrap中遇到navbar-header的困惑，以及如何在页面尺寸较小的情况下实现导航栏的折叠功能。通过添加button并设置data-toggle和data-target属性，与对应的id结合，成功创建了折叠效果，尽管一些具体细节仍需进一步理解。

在使用bootstrap时发现navbar-header不明确含义，多次搜索后发现可以在页面过小时赋予折叠按钮的东西，虽然还是不是很懂，但是可以使用。

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">菜鸟教程</a>
</div>

里面插入的button就是页面过小时显示的
navbar-toggle不明含义，推测与页面切换/隐藏有关
data-toggle=“collapse"不明含义，同上
data-target=”#example-navbar-collapse"不明含义，同上
上面三个不明含义，需要下面那个id配合即可组成一个合适的折叠导航

<div class="collapse navbar-collapse" id="example-navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">iOS</a></li>
        <li><a href="#">SVN</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">jmeter</a></li>
                <li><a href="#">EJB</a></li>
                <li><a href="#">Jasper Report</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
                <li class="divider"></li>
                <li><a href="#">另一个分离的链接</a></li>
            </ul>
        </li>
    </ul>
</div>

样式
折叠状态
非折叠状态
完整代码

<nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid"> 
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">菜鸟教程</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">iOS</a></li>
                    <li><a href="#">SVN</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Java <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">jmeter</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">Jasper Report</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            </div>
        </nav>