Bootstrap Collapse组件（手风琴效果） fa-html图标字体库

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图标字体库][1]
而要使用该框架呢，需要将该插件下载下来，然后将其复制到项目目录下，然后使用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>

如上面所示，该代码主要是在弹出的列表里加了个data-parent，并指定了一个id="coll"的组件，不难发现，这刚好就是该组件的父元素，而该父元素的需要弹出的子元素下都写一个data-parent即可有手风琴效果了。
[1]: https://fontawesome.com/v4.7.0/icon/html5