Bootstrap

Browser Support
Advantages of Bootstrap
Bootstrap Packages
Download Bootstrap
Bootstrap Grid System
Working of Bootstrap Grid System
Sample Menu
The below code must be added to the head tag.
  1. <meta name="viewport" content="width=device-width, initial-scale=1">
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  4. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

And, the following code must be added to the body tag.

  1. <nav class="navbar navbar-default">
  2. <div class="container-fluid">
  3. <div class="navbar-header">
  4. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  5. <span class="sr-only">Toggle navigation</span>
  6. <span class="icon-bar"></span>
  7. <span class="icon-bar"></span>
  8. <span class="icon-bar"></span>
  9. </button>
  10. <a class="navbar-brand" href="#">Bootstrap Menu Sample</a>
  11. </div>
  12. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  13. <ul class="nav navbar-nav">
  14. <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
  15. <li><a href="#">Menu2</a></li>
  16. <li class="dropdown">
  17. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu2 <span class="caret"></span></a>
  18. <ul class="dropdown-menu">
  19. <li><a href="#">Sub-Menu1</a></li>
  20. <li><a href="#">Sub-Menu2</a></li>
  21. <li><a href="#">Sub-Menu3</a></li>
  22. <li role="separator" class="divider"></li>
  23. <li><a href="#">Sub-Menu4</a></li>
  24. <li role="separator" class="divider"></li>
  25. <li><a href="#">Sub-Menu5</a></li>
  26. </ul>
  27. </li>
  28. </ul>
  29. </div>
  30. </div>
  31. </nav>