html 中Bootstrap实现可折叠3级导航左侧菜单添加炫酷点的样式

可以使用 Bootstrap 自带的 Collapse 组件来实现可折叠的三级导航菜单，同时使用 Font Awesome 或其他图标库来添加炫酷点的样式。

以下是一个示例代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="list-group">
        <a href="#menu1" class="list-group-item" data-toggle="collapse">
          <i class="fa fa-chevron-circle-right"></i> Level 1
        </a>
        <div id="menu1" class="sub-menu collapse">
          <a href="#menu2" class="list-group-item" data-toggle="collapse">
            <i class="fa fa-angle-right"></i> Level 2
          </a>
          <div id="menu2" class="sub-menu collapse">
            <a href="#" class="list-group-item">
              <i class="fa fa-circle"></i> Item 1
            </a>
            <a href="#" class="list-group-item">
              <i class="fa fa-circle"></i> Item 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

解释一下上面的代码：

- 使用 Bootstrap 的 Grid System 将左侧菜单栏占据 3 个栅格
- 使用 Bootstrap 的 List Group 组件作为菜单容器
- 在菜单项上添加 data-toggle="collapse" 属性，当用户点击该菜单项时，会折叠/展开下一级菜单
- 使用 Font Awesome 图标库的图标作为菜单项的前缀，可以使用不同的图标来区分不同层级
- 使用 Bootstrap 的 Collapse 组件来实现菜单的折叠/展开效果，通过设置 sub-menu 类来实现不同层级的样式区分

通过这种方式，可以实现一个简单、易用、炫酷的可折叠三级导航菜单。