Linux ,Programming ,Definitions ,Differences ,Hacks ,Tricks ,Tutorials ,FUN Stuff ,PhotoShop ,Education ,Web ,Internet ,Q&N ,Discussions and more at StudyReadEducate Place for Knowledge Lovers.

Change Content Language

Sunday, 6 August 2017

Create Navigation Bar in Bootstrap with Example

bootstrap
Bootstrap

NAVIGATION BAR in Bootstrap

Code :


<!DOCTYPE html>
<html>
<head>
                                           <title>Navbar in Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="http://localhost/Bootstrap%20files/bootstrap.min.css">


</head>
<body>

<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Website</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">News</a></li>
</ul>

</div>
</nav>

<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Website</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">News</a></li>
</ul>

</div>
</nav>

</body>
</html>


Output of Code :



Working of Code :


<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Website</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">News</a></li>
</ul>

</div>
</nav>


<nav class="navbar navbar-inverse"> Here navbar tells its a navbar and navbar-inverse tells it is a inverse of default (Default color in grey and Inverse color is Black which means here we have created  a navbar with black color)

<div class="navbar-header"> navbar header represent the header

What is navbar-brand navbar-brand is nothing but main text of our website or name of website (navbar-brand usually use to represent the text or image logo in the navbar)

<ul class="nav navbar-nav"> Its very important why we need it because other option comes here in simple words all other menu options came here.

Share:

0 comments:

Post a Comment

Featured post

How To Get Organic Traffic in Blog through Search Engines - Google ,Yahoo ,Bing ,Yandex

Having a Blog with no traffic is worthless if you are interested in making money to make money through your Blog Posts you need traffic no...

Follow by Email