Responsive Websites with Bootstrap - #1 Responsive Menu

Posted by on
In my first Bootstrap tutorial, I am creating a navigation bar which will contain the site name and a navigation which includes a dropdown button. This navigation bar will be responsive so will scale down appropriately for small screens such as mobiles and 7" tablets.

 In order to do this, first you need to download Bootstrap sources from here. Once download is completed, copy & paste all folders to your web folder. Now ready to write our codes.

HTML Codes
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Bootstrap 3</title>
  5.                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.                 <link href = "css/bootstrap.min.css" rel = "stylesheet"> 
  7.                 <link href = "css/styles.css" rel = "stylesheet">
  8.         </head>
  9.         <body>
  11.                 <div class = "navbar navbar-inverse navbar-static-top">
  12.                 <div class = "container">
  13.                                
  14.                 <a href = "#" class = "navbar-brand">Tech Site</a>
  15.                                
  16.                 <button class = "navbar-toggle" data-toggle = "collapse" data-target =".navHeaderCollapse">
  17.                 <span class = "icon-bar"></span>
  18.                 <span class = "icon-bar"></span>
  19.                 <span class = "icon-bar"></span>
  20.                                 </button>
  21.                                
  22.                 <div class = "collapse navbar-collapse navHeaderCollapse">
  23.                                
  24.                 <ul class = "nav navbar-nav navbar-right">
  25.                                        
  26.                 <li class = "active"><a href = "#">Home</a></li>
  27.                 <li><a href = "#">Blog</a></li>
  28.                 <li class = "dropdown">
  29.                                                        
  30.                                                         <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
  31.                 <ul class = "dropdown-menu">
  32.                 <li><a href = "#">Twitter</a></li>
  33.                 <li><a href = "#">Facebook</a></li>
  34.                 <li><a href = "#">Google+</a></li>
  35.                 <li><a href = "#">Instagram</a></li>
  36.                 </ul>
  37.                                                
  38.                 </li>
  39.                 <li><a href = "#">About</a></li>
  40.                 <li><a href = "#">Contact</a></li>
  41.                                        
  42.                 </ul>
  43.                                
  44.                 </div>
  45.                                
  46.                 </div>
  47.                 </div>
  49.                 <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  50.                 <script src = "js/bootstrap.js"></script>
  51.                
  52.         </body>
  53. </html>


Please let me know if you have any questions or need any help.


Comments

Post a Comment