神刀安全网

Bootstrap For Beginners: Navigation Bar – Part Eleven

I have started an article series onBootstrap and published ten articles so far. Read the previous ten parts here,

Introduction

In this article we will learn about Bootstrap Navigation Bar,we will create different type of navbars by using Bootstrap classes and  will also  create responsive navbar with different styles.

Bootstrap Navigation Bars

The Bootstrap navbar component used to create responsive navigation header for our website or application. A navigation bar can collapse or extend, according to the screen size of different devices.

Default Navigation Bar (navbar)

For creating default navbar we need to use <nav class="navbar navbar-default"> and we can add responsive Default Navigation Bar

to the top of the page in any web application.

Example 1: Creating Default Navbar

Step 1:  In this example we will create default navbar. For this first we will create basic Bootstrap HTML page by using the  following code. 

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>             <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Step 2 : Now to create default navbar,

  • In the <body> of the HTML page we will add <nav> tag with classes .navbar, .navbar-default .
  • Inside this we will add <div> with class .container-fluid .
  • In this we will add one <div> with header class .navbar-header , now we will add <a> element with class navbar-brand. By using this text becomes slightly larger in size.
  • Now for adding links to the navbar we will add unordered list (ul) with the classes .nav, .navbar-nav and  provide menu links using <li> element.

Lets create default navbar by using the following code:

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Default Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-default-->       <nav class="navbar navbar-default">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <ul class="nav navbar-nav">                   <li class="active"><a href="#">Home</a></li>                   <li><a href="#">About Us</a></li>                   <li><a href="#">Technology</a></li>                   <li><a href="#">Contact Us</a></li>               </ul>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Default Navbar End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Output: Default Navigation Bar (navbar)

Bootstrap For Beginners: Navigation Bar - Part Eleven

Inverted Navigation Bar

To create an inverted navbar with black background and white text we need to add .navbar-inverse class with the .navbar class to the <nav> tag.

Example 2: Creating Inverted Navigation Bar

In this example we will create navbar same like Example1. Now we need to just change the .navbar-default class into .navbar-inverse for creating Inverted Navigation Bar.

Let us create Inverted Navigation Bar by using the following code:

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Inverted Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-inverse -->       <nav class="navbar navbar-inverse">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <ul class="nav navbar-nav">                   <li class="active"><a href="#">Home</a></li>                   <li><a href="#">About Us</a></li>                   <li><a href="#">Technology</a></li>                   <li><a href="#">Contact Us</a></li>               </ul>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Inverted Navbar End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Output: Inverted Navigation Bar

Bootstrap For Beginners: Navigation Bar - Part Eleven

Fixed (Top or Bottom) Navigation Bar

The navigation bar can be fixed at the top or at the bottom of the page. When we scroll the page it is visible in a fixed position (Top or Bottom). 

  • To Fixed Navigation Bar at the Top, we need to use .navbar-fixed-top class to the <nav> tag.
  • To Fixed Navigation Bar at the Bottom, we need to use .navbar-fixed-bottom class to the <nav> tag.

Example 3: Fixed Top Navigation Bar

In this example we will create inverted navbar same like Example2. In this we will also add .navbar-fixed-top class, to the <nav> tag for fixing the navbar to the top of the page and we will write some contents in the document, so we can easily see fixed top effect of the navbar when we scroll the page,by writing the following code. 

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Inverted Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-inverse and .navbar-fixed-top" -->       <nav class="navbar navbar-inverse navbar-fixed-top">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <ul class="nav navbar-nav">                   <li class="active"><a href="#">Home</a></li>                   <li><a href="#">About Us</a></li>                   <li><a href="#">Technology</a></li>                   <li><a href="#">Contact Us</a></li>               </ul>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Inverted Navbar End Here-->       <!--Contents Start Here-->       <div class="container">           <h3>Fixed Top Navbar</h3>           <div class="row">               <div class="col-md-6">                   <p>                       <b>Paragraph1:</b>                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas                       porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,                       purus lectus malesuada libero,sit amet commodo magna eros quis urna.                       Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque                   </p>               </div>               <div class="col-md-6">                   <p>                       <b>Paragraph2:</b>                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas                       porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,                       purus lectus malesuada libero,sit amet commodo magna eros quis urna.                       Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque                   </p>               </div>           </div>       </div>       <!--Contents End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Output: Fixed Top Navigation Bar

Bootstrap For Beginners: Navigation Bar - Part Eleven

Example 4: Fixed Bottom Navigation Bar

In this example we will create inverted navbar same like Example2. In this we will also add .navbar-fixed-bottom  class to the <nav> tag for fixing the navbar to the bottom of the page and we will write some contents in the document, so we can easily see fixed Bottom effect of the navbar when we scroll the page,by writing the following code. 

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Inverted Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-inverse and navbar-fixed-bottom -->       <nav class="navbar navbar-inverse navbar-fixed-bottom">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <ul class="nav navbar-nav">                   <li class="active"><a href="#">Home</a></li>                   <li><a href="#">About Us</a></li>                   <li><a href="#">Technology</a></li>                   <li><a href="#">Contact Us</a></li>               </ul>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Inverted Navbar End Here-->       <!--Contents Start Here-->       <div class="container">           <h3>Fixed Bottom Navbar</h3>           <div class="row">               <div class="col-md-4">                   <p>                       <b>Paragraph1:</b>                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas                       porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,                       purus lectus malesuada libero,sit amet commodo magna eros quis urna.                       Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque                   </p>               </div>               <div class="col-md-4">                   <p>                       <b>Paragraph2:</b>                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas                       porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,                       purus lectus malesuada libero,sit amet commodo magna eros quis urna.                       Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque                   </p>               </div>               <div class="col-md-4">                   <p>                       <b>Paragraph3:</b>                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas                       porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,                       purus lectus malesuada libero,sit amet commodo magna eros quis urna.                       Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque                   </p>               </div>           </div>       </div>       <!--Contents End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Output: Fixed Bottom Navbar

Bootstrap For Beginners: Navigation Bar - Part Eleven

Navigation Bar With Dropdown and Right-Aligned Menu

We can create Dropdown Menus in Navigation bar. We can also add right-align navigation bar menus. For this we need to use  navbar-right class.

Example 5: Navigation Bar With Dropdown and Right-Aligned Menu

Step 1: In this example we will create a Inverted Navigation bar same like Example2 with options Home, AboutUs, Technology and

ContactUs by writing the following code:

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Inverted Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-inverse -->       <nav class="navbar navbar-inverse">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <ul class="nav navbar-nav">                   <li class="active"><a href="#">Home</a></li>                   <li><a href="#">About Us</a></li>                   <li><a href="#">Technology</a></li>                   <li><a href="#">Contact Us</a></li>               </ul>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Inverted Navbar End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   
Output
Bootstrap For Beginners: Navigation Bar - Part Eleven

Step 2 : Now we will add Dropdown Menu for the "Technology" button.

  • In this we will first add class="dropdown" to the <li> element of Technology button.
  • Now we will add class="dropdown-toggle" to the <a> element of Technology button link and we will also add  one more property  data-toggle="dropdown" by which we set this attribute to the "dropdown".
  • In this for <a> element of Technology link we want to add arrow sign for showing that some more dropdown menus are here. F or this we will add <span> with class caret for arrow sign.
  • Now we will add dropdown menu for the Technology button so inside the <li> element we will add <ul> element  with class dropdown-menu and inside this we will provide some submenu links with <li> element.

Let us create Navigation Bar with Dropdown by writing the following code:

Bootstrap For Beginners: Navigation Bar - Part Eleven

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Inverted Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-inverse -->       <nav class="navbar navbar-inverse">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <ul class="nav navbar-nav">                   <li class="active"><a href="#">Home</a></li>                   <li><a href="#">About Us</a></li>                   <!--dropdown Menu Start-->                   <li class="dropdown">                       <a class="dropdown-toggle" data-toggle="dropdown" href="#">                           Technology                           <span class="caret"></span>                       </a>                       <ul class="dropdown-menu">                           <li><a href="#">.NET</a></li>                           <li><a href="#">HTML5</a></li>                           <li><a href="#">ASP.NET MVC</a></li>                           <li><a href="#">Java</a></li>                       </ul>                   </li>                   <!--dropdown Menu End-->                   <li><a href="#">Contact Us</a></li>               </ul>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Inverted Navbar End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Output: Navbar With Dropdown

Bootstrap For Beginners: Navigation Bar - Part Eleven

Step 3 :Navigation Bar with Right-Aligned Menu

  • In this up to now we will create Navigation Bar With Dropdown and now we will add Right-Aligned Menu links. In the Navigation Bar, we need to use .navbar-right class to the <ul> element.

  • For this in the above code we will add <ul> element with class="nav navbar-nav navbar-right" inside this. We will add "Login" and "RegisterProfile" links that will be to the right side of the Navigation Bar.

Let’s create Navigation Bar with Right-Aligned Menu by writing the following code: 

Bootstrap For Beginners: Navigation Bar - Part Eleven

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Inverted Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-inverse -->       <nav class="navbar navbar-inverse">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <ul class="nav navbar-nav">                   <li class="active"><a href="#">Home</a></li>                   <li><a href="#">About Us</a></li>                   <!--dropdown Menu Start-->                   <li class="dropdown">                       <a class="dropdown-toggle" data-toggle="dropdown" href="#">                           Technology                           <span class="caret"></span>                       </a>                       <ul class="dropdown-menu">                           <li><a href="#">.NET</a></li>                           <li><a href="#">HTML5</a></li>                           <li><a href="#">ASP.NET MVC</a></li>                           <li><a href="#">Java</a></li>                       </ul>                   </li>                   <!--dropdown Menu End-->                   <li><a href="#">Contact Us</a></li>               </ul>               <!--Menu End Here-->               <!--Right Aligned Menu Start-->               <ul class="nav navbar-nav navbar-right">                   <li><a href="#">Login</a></li>                   <li><a href="#">Register Profile</a></li>               </ul>               <!--Right Aligned Menu End-->           </div>       </nav>       <!--<nav> tag end-->       <!--Inverted Navbar End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Output: Navbar with Right-Aligned Menu

Bootstrap For Beginners: Navigation Bar - Part Eleven

Navigation Bar with Toggle Button

We know that using Bootstrap we make responsive navigation bar,it is expand and collapse according to different  devices screen size,now we want to hide navigation bar, and only show it when it is needed.so the navigation bar is replaced by a button which is placed in the top right corner,and when we click on button the navigation bar will be display.

Example 6: Navigation Bar with Toggle Button

In this example we will create default navbar with toggle button and then we will apply some styles on navigation bar and toggle button so we will collapse and expand the navbar on small screen.

Step 1 :First we will create default fixed top navbar by writing the following code.

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Default Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-default and .navbar-fixed-top-->       <nav class="navbar navbar-default navbar-fixed-top">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <div>                   <ul class="nav navbar-nav navbar-right">                       <li class="active"><a href="#">Home</a></li>                       <li><a href="#">About Us</a></li>                       <li><a href="#">Technology</a></li>                       <li><a href="#">Contact Us</a></li>                   </ul>               </div>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Default Navbar End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   
Output
Bootstrap For Beginners: Navigation Bar - Part Eleven

Step 2 :Add Toggle Button in Navbar

  • Now in the above code at the <div> of right navbar menu we will add class="collapse navbar-collapse" by which we  will collapse the navbar, and also add id="MainNavBar" this id we can give whatever we want.

  • Now in the Navbar Header we will add <button> with class navbar-toggle so we can toggle the navbar from this button, we also add some attributes data-toggle="collapse" by which we can collapse the navbar, we will add  data-target="#MainNavBar" here we provide <div> id(MainNavBar) with # sign for which data this button perform collapsing fuctionality.

  • Now we want to add three horizontal line in the button as a text button show like three line icon,for this we will use <span> with class="icon-bar" three times.

  • When we see in small screen the toggle button shows at the top right corner only when we click on button the navbar shows othervise it will be hide so the button look like on/off its show toggling behavior for navbar.

Let’s create navbar with toggle button by writing the following code:

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   </head>   <body>       <!--Default Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-default and .navbar-fixed-top-->       <nav class="navbar navbar-default navbar-fixed-top">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar">                       <span class="icon-bar"></span>                       <span class="icon-bar"></span>                       <span class="icon-bar"></span>                   </button>                   <a class="navbar-brand" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <div class="collapse navbar-collapse" id="MainNavBar">                   <ul class="nav navbar-nav navbar-right">                       <li class="active"><a href="#">Home</a></li>                       <li><a href="#">About Us</a></li>                       <li><a href="#">Technology</a></li>                       <li><a href="#">Contact Us</a></li>                   </ul>               </div>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Default Navbar End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Output: Navbar with Toggle Button

Bootstrap For Beginners: Navigation Bar - Part Eleven Step 3  : Now we want to interactively look for this navbar so we will add some styles on navbar and toggle button. First we will provide id="RedMenu" for < nav > tag, whatever we want we can give id, now we add following styles for navbar in <style> tag in the <head> part of the document. 

<style>              #RedMenu {                 background-color: #B00;                 border-color: #B00;              }                 #RedMenu ul li a {                  color: #ffffff;              }                 #RedMenu ul li:hover {                  background-color: #000;              }   </style>   

Now we will add style on the button,

style="background-color:#000"   

We will add style on <span> tag.

style="background-color:#ffffff"   

we will add style on <a> tag of <div class="navbar-header">.

style="color: #ffffff"   

Let’s see how navbar look like after adding styles on it by writing the following code:

<!DOCTYPE html>      <html lang="en">   <head>       <meta charset="utf-8">       <title>Bootstrap Part11</title>       <meta name="viewport" content="width=device-width,initial-scale=1">       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">       <style>           #RedMenu {               background-color: #B00;               border-color: #B00;           }                 #RedMenu ul li a {                   color: #ffffff;               }                 #RedMenu ul li:hover {                   background-color: #000;               }       </style>   </head>   <body>       <!--Default Navbar Start Here-->       <!--<nav> tag  start with classes .navbar and .navbar-default and .navbar-fixed-top-->       <nav class="navbar navbar-default navbar-fixed-top" id="RedMenu">           <div class="container-fluid">               <!--Navbar Header Start Here-->               <div class="navbar-header">                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar"                       style="background-color:#000">                       <span class="icon-bar" style="background-color:#ffffff"></span>                       <span class="icon-bar" style="background-color:#ffffff"></span>                       <span class="icon-bar" style="background-color:#ffffff"></span>                   </button>                   <a class="navbar-brand" style="color: #ffffff" href="#">C-sharp Corner</a>               </div>               <!--Navbar Header End Here-->               <!--Menu Start Here-->               <div class="collapse navbar-collapse" id="MainNavBar">                   <ul class="nav navbar-nav navbar-right">                       <li><a href="#">Home</a></li>                       <li><a href="#">About Us</a></li>                       <li><a href="#">Technology</a></li>                       <li><a href="#">Contact Us</a></li>                   </ul>               </div>               <!--Menu End Here-->           </div>       </nav>       <!--<nav> tag end-->       <!--Default Navbar End Here-->       <script src="js/jquery-2.1.4.min.js"></script>       <script src="js/bootstrap.min.js"></script>   </body>   </html>   

Output

Bootstrap For Beginners: Navigation Bar - Part Eleven

In this article we focused on Bootstrap Navigation Bars.Then in next articles we will understand all the components  of Bootstrap step by step.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Bootstrap For Beginners: Navigation Bar – Part Eleven

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址