html – 垂直侧导航栏 – Angular 4和Bootstrap 3

前端之家收集整理的这篇文章主要介绍了html – 垂直侧导航栏 – Angular 4和Bootstrap 3前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用npm安装程序在angular 4项目中安装了bootstrap 3.我已经完成了一个基本的网站,并试图获得一个动态的sideNav栏,它将切换进出.

我在网上看到了一些例子,但它们似乎无法工作,无论是较新版本的bootstrap还是与angular的兼容性问题.

有没有人对我在这个例子中可以使用的导航栏有任何建议?

app.component.html中的HTML

  1. <!-- Sidebar -->
  2. <script src="src/Javascript/sidebar.js"></script>
  3. <nav class="navbar navbar-inverse navbar-fixed-left" id="sidebar-wrapper" role="navigation">
  4. <ul class="nav sidebar-nav">
  5. <li class="sidebar-brand">
  6. <a href="#">
  7. Brand
  8. </a>
  9. </li>
  10. <li>
  11. <a href="#">Home</a>
  12. </li>
  13. <li>
  14. <a href="#">About</a>
  15. </li>
  16. <li>
  17. <a href="#">Events</a>
  18. </li>
  19. <li>
  20. <a href="#">Team</a>
  21. </li>
  22. <li class="dropdown">
  23. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  24. Works <span class="caret"></span>
  25. </a>
  26. <ul class="dropdown-menu" role="menu">
  27. <li><a href="#">About</a></li>
  28. <li><a href="#">Services</a></li>
  29. <li><a href="#">Clients</a></li>
  30. <li><a href="#">Contact</a></li>
  31. </ul>
  32. </li>
  33. <li>
  34. <a href="#">Services</a>
  35. </li>
  36. <li>
  37. <a href="#">Contact</a>
  38. </li>
  39. </ul>
  40. </nav>

解决方法

首先,您需要导入bootstrap 3或使用Bootstrap 3 CDN

然后,而不是使用JQuery使用指令来操纵侧栏的类和样式

我没有使用JQuery为同一侧栏创建了Stack Blitz检查:https://stackblitz.com/edit/angular-z6hrob

猜你在找的HTML相关文章