Thanks for visiting my blog...
Stay updated with all my articles by liking me on Facebook.

Add

Responsive Navigation Bar In Twitter Bootstrap 3

Monday, January 20, 2014 0
|

Introduction

Now-a-days Its very important to make your website compatible with the mobile devices. In order to make it possible you need to figure out somethings by learning how to make responsive websites.

Bootstrap 3 gives you a powerful platform to make your website responsive and here I am showing a live demo of making a responsive navigation bar in Twitter Bootstrap 3.

First download the below style-sheet and the js file.
 You can download the source code here too.
 

Behind The Scene

OK, before we start this thing you must be a bit familiar with the Bootstrap things like classes, components etc. if you are not aware of this thing just have a look into this link;

Download Bootstrap and Learn

Let's take a html page first and add the below references. 
 <head>   
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <script src="js/bootstrap.min.js"></script>
     <meta name="viewport" content="width=device-width, intial-scale=1.0">
 </head>
* This meta is required to enable the responsive design( this example will work if you remove this meta too)

Now we will see how to design the carousel slider.

Creating The Navigation Bar


Use the below code to make a responsive navigation bar. 
    <div class="container">
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
               <button class="btn btn-scuuess navbar-toggle"
                        data-toggle="collapse"
                        data-target=".navbar-collapse">
                    <span class="glyphicon glyphicon-chevron-down"></span>
               </button>
            </div>
            <div id="logo">
                <a href="#"><h4>Tapan Kumar</h4> </a>
            </div>
        
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav active"><a href="#"> Home</a></li>
                <li class="nav"> <a href="#"> About</a></li>
                <li class="nav"><a href="#"> Blog</a></li>
                <li class="nav"><a href="#"> Article</a></li>
                <li class="nav"><a href="#"> Example</a></li>
                <li class="nav"><a href="#"> Contact</a></li>
            </ul>
        </div>
    </div>
  </div>
In the above code we have given the div containing the navigation list a class named "navbar-collapse collapse", which tells the browser to hide the links (ul/li) in smaller screen resolutions.


And the button we have taken above the list inside the navbar-header div has two attributes named data-toggle which tells the browser that this is a toggle element and also has another attribute named data-target which tells the browser to show what and to hide what when user clicks on it.


The data-target is set to the class of the div, containing the navigation list.

Live demo




That's all, we have just designed a responsive navigation bar using Bootstrap 3.

Happy Coding...
By :
, ,

No comments:

Post a Comment