Aciano Technologies Blog

A Place With Numerous Solutions!

Fixed Navbar (Menu bar) with Bootstrap 3 | Post - 2

Today, I’m going to tell you how to fix the Navbar (Menu bar) just like we see on our Facebook. First of all you’ll need to add some bootstrap 3 CSS and script files in your document to run these features.

Below are some of the scripts that you need to add on above the </head> tag OR you can download bootstrap files from their website.

 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> 

 

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

 

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

 

Now you need to create the <nav> tag which is now available in HTML5 and put it under the <body> tag.

The <nav> tag contains two things, first one is ‘class’ and second one is ‘role’.

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

</nav>

 

The above code contains class in which you can see "navbar-fixed-top" basically this code is used to fix the navbar.

Now let me tell you the complete code.

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

    <div class="navbar-header">

        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

        </button>

        <a href="#" class="navbar-brand">Brand</a>

    </div>

    <div id="navbarCollapse" class="collapse navbar-collapse">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">Profile</a></li>

            <li><a href="#">Messages</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">

            <li><a href="#">Login</a></li>

        </ul>

    </div>

</nav>

 

Follow the above code, paste it in your <body> tag, run the code and enjoy!

 

Thank You.

Bootstrap 3 (Introduction to Responsiveness | Post-1)

Today every organization desire to build their website in such a way that would be flexible and display the ideal view at any device such as desktop computers, tablets, mobile devices and etc. They obviously wish to display their web application perfectly not only on every browser but also on different types of screen resolutions. In IT world we call it ‘Responsive’ where every component fits itself to the space it has.

 

If you are planning to build responsive web application you need to just using CSS which is a complicated task but good thing is that we have Twitter Bootstrap in different versions by using of it you can easily customize your page according to your requirements. It provides you good responsive behavior for the application layout; you can see the script below.

 

<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/bootstrap.min.js" type="text/javascript"></script>

 

First of all you need to download the bootstrap from their website and then use the above script to run the bootstrap style in any of your webpage; you can find the URL below.

 

http://getbootstrap.com/getting-started/#download

 

Basically bootstrap 3 supports all types of browser, except the IE7, IE8 & IE9 due to old versions of Internet Explorer, they just don’t support certain CSS3 properties as they are now too aged to support new technology.

The New Grid system in Bootstrap3 uses percentage for width not the pixels. It provides 4 different types of classes to manage the grid system, below you can see those classes.

1.       For Phones (less than 768px) we use .col-xs

2.       For Tablets (768px and up) we use .col-sm

3.       For Medium Desktop (992px and up) we use .col-md

4.       For Large size (1200px and up) we use .col-lg

 

 Please have a look on below screenshots.

 

 

 

 

 

Thank you.