Bootstrap

  • Bootstrap is a powerful mobile-first front-end framework. It is very helpful in faster and easier web development by using HTML, CSS, and JavaScript.
  • Bootstrap is open source and there are many Bootstrap sample applications already submitted on GitHub.
Browser Support
  • Most of the browsers support Bootstrap framework.
Advantages of Bootstrap
  • Easy to get started
  • Responsive design
  • Cross-browser support
  • Easy to customize
  • Encourages using LESS
  • Supports useful jQuery plugins
  • Many custom jQuery plugins available
  • Mobile-first
Bootstrap Packages
  • Bootstrap has a responsive mobile-first grid that allows us to develop our own design too.
  • Bootstrap has some extremely useful jQuery plugins to show Modal, DropDown,Tooltip, and Carousel.
Download Bootstrap
Bootstrap Grid System
  • Bootstrap has a responsive, mobile-first grid.This layout is responsive with mobile devices and laptops.
  • Bootstrap Grid System can be appropriately split in up into 12 columns according to the design.
Working of Bootstrap Grid System
  • Grid systems are used for creating page layouts through a series of rows and columns.It should be placed within columns, and only columns may be immediate children of rows.
Sample Menu
  • We can create responsive menu by using Bootstrap framework.
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>