Bootstrap有很多实用的组件,例如现在提到的Collapse组件就是其中之一,Collapse组件是用来点击下拉显示的,与dropdown有所不同的是,dropdown的dropdown-menu不占位置,或者说是悬浮在网页上的,并不会造成网页样式的变化,而collapse组件则会产生该变化。emmmmm…现在想一下collapse的用法,其中最主要的是点击下拉显示文字的样式,先贴一段代码:

            <div class="navbar-toggler align-items-center" data-toggle="collapse" data-target="#zhuye">
            <i class="fa fa-home"></i>
            <span class="nav-label">主页</span>
            <i class="fa fa-long-arrow-down arrow"></i>
        </div>
        <ul class="nav collapse align-items-center" id="zhuye" data-parent="#coll">
            <li>了解MK系统</li>
        </ul>

从这可看到,其实这种点击效果大多是用data-toggle=””进行绑定,当里面是collapse时,便是collapse效果了,而data-target(也可以使用href属性,不过data-target效果更好,并且不占用href属性的跳转)指向点击之后要显示出来的组件,而在下面可以使用一个ul列表显示,只要把id设置成和上面target一样即可。这就是最核心的collapse组件效果实现了。而剩下的例如.collapse .nav .nav-toggler等都是用来使其更美观的效果组件。还有就是.fa .fa-home,这是fa-html5图标字体库框架的使用,因为简单就顺便把它也给说了吧,如下是该字体库的官方网址:
fa-html5图标字体库
而要使用该框架呢,需要将该插件下载下来,然后将其复制到项目目录下,然后使用link,将其css链接到需要的网页上,如下:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

当然,还有链接less的,这里我没用就不做赘述了。
接下来只要去官网查找你想要的图标,以及该图标对应的类,然后将该类设置在需要图标的元素上,就可以了,如下:

  <i class="fa fa-home"></i>

这样就算大功告成了,到这里对于fa-html5图标字体库的讲解就完了,接下来继续回到collapse组件上,接下来就是实现手风琴了,手风琴其实就是当一个列表打开时,其他的列表都收缩,先贴代码:

<ul class="nav flex-column justify-content-start align-items-center" id="coll">
<li class="navbar-nav">
    <div class="user-panel">
        <img src="https://i1.hdslb.com/bfs/face/eec4d8864d1842bcae83cbe4f31016ffbd7bdb54.jpg@87w_88h_1c_100q.webp"/>
        <div class="pull-left info">
            <p>admin</p>
            <a><i class="fa fa-circle text-success"></i>在线</a>
            <a><i class="fa fa-circle text-success"></i>注销</a>
        </div>
    </div>
</li>
<li class="navbar-nav">
    <div class="navbar-toggler align-items-center" data-toggle="collapse" data-target="#zhuye">
        <i class="fa fa-home"></i>
        <span class="nav-label">主页</span>
        <i class="fa fa-long-arrow-down arrow"></i>
    </div>
    <ul class="nav collapse align-items-center" id="zhuye" data-parent="#coll">
        <li>了解MK系统</li>
    </ul>
</li>
<li class="navbar-nav">
    <div class="navbar-toggler align-items-center" data-toggle="collapse" data-target="#zhuye1">
        <i class="fa fa-home"></i>
        <span class="nav-label">主页</span>
        <i class="fa fa-long-arrow-down arrow"></i>
    </div>
    <ul class="nav collapse" id="zhuye1" data-parent="#coll">
        <li>1112233</li>
        <li>1112233</li>
    </ul>
</li>
<li class="navbar-nav">
    <div class="navbar-toggler align-items-center" data-toggle="collapse" data-target="#zhuye2">
        <i class="fa fa-home"></i>
        <span class="nav-label">主页</span>
        <i class="fa fa-long-arrow-down arrow"></i>
    </div>
    <ul class="nav collapse" id="zhuye2" data-parent="#coll">
        <li>1112233</li>
    </ul>
</li>

</ul>

如上面所示,该代码主要是在弹出的列表里加了个data-parent,并指定了一个id=”coll”的组件,不难发现,这刚好就是该组件的父元素,而该父元素的需要弹出的子元素下都写一个data-parent即可有手风琴效果了。