Introduction To Bootstrap

 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>  
Ebook Download
View all
Learn
View all