bootstrap导航栏折叠

在使用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="#"