Asp.net modules
  • Home
  • c# Modules
  • Web Design
    • Html
    • Css
    • Java Script
  • Bootstrap
  • Sql
    • Queries
    • Stored Procedures
  • About Me
    • About Myself
    • My Projects
    • My Resume
  • Photo Gallery

Tuesday, October 6, 2015

How to make a nav-bar in bootstrap

 Unknown     10:15 AM     Bootstrap     No comments   

 Introduction:-

Hi.. Friends,
Today I explain that how to make a nav-bar in bootstrap so i explain this practically.

Step:1    The designing code goes here.

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
     <title>Asp.Net Modules</title>
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/bootstrap.theme.min.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
     <link href="css/custom_HomePage.css" rel="stylesheet">
 </head>
<body>
     <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
       <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
     <a class="navbar-brand" href="#">ASP.NET MODULES</a>
    <div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            AspModules<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#"> HTML</a></li>
                <li class="divider"></li>
                <li><a href="#">CSS</a></li>
                <li class="divider"></li>
                <li><a href="#">JS</a></li>
            </ul>
         </li>
      </ul>
    </div>
    </div>
    </div>
   <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  </body>
</html>

Here some js and css are already given by bootstrap you can easily download css from (getbootstrap.com) and  js from (https://jquery.com/download/) .

DEMO:-



  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Popular Posts

  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • How to make a hit-dot game in Asp.net using Java-Script
        Introduction: Hi.. Friends, Today I explain that how to make a game in asp-dot net without using any database. Its so simple ...
  • Create a Cart Popup div in HTML & CSS
    Intoduction :-   Hii Friends... Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when y...
  • How to create pikachu character using HTML & CSS
    Hii Friends... Today I explain how to create cartoon( Pikachu character) using HTML and CSS . you can use this code in your project cop...
  • Auto-Hiding Navbar with Javascript
    Intoduction :-   Hii Friends... today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • How To scroll from bottom to top
    Intoduction :- Hii Friends...   Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jque...
  • How to create Animation Using HTML & CSS
    Hii Friends... Today I explain how to create Animations using HTML and CSS . you can use this code in your project copy this code and p...
  • How To Make Semi-Transparent Buttons
    Intoduction :-   Hii Friends...   Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes t...
  • List Style
    Intoduction :-   Hii Friends... Html have 2 types of list . Ordered List and Unordered List. If you are required to put your items in a n...

Blog Archive

  • ►  2017 (13)
    • ►  December (1)
    • ►  March (5)
    • ►  February (1)
    • ►  January (6)
  • ►  2016 (31)
    • ►  November (1)
    • ►  September (1)
    • ►  June (6)
    • ►  May (3)
    • ►  April (2)
    • ►  March (8)
    • ►  February (9)
    • ►  January (1)
  • ▼  2015 (31)
    • ►  December (3)
    • ►  November (4)
    • ▼  October (18)
      • How to make over-out event with js
      • How to convert lower case to upper case
      • How to rotate the image with Css
      • How to make Zoom-in and Zoom-out image with Css
      • How to make hover on a image with css
      • How To Make Tables In Sql
      • How to fill dropdown with one dropdown click
      • How To Make A Bill with JavaScript
      • How To Make A Timer With JavaScript
      • How To Make A Calculator In Html
      • How To Create a Carousel In Bootstrap
      • Basic of css.
      • How to make a image responsive in bootstrap
      • How to make a nav-bar in bootstrap
      • How to use well in bootstrap
      • How to make a jumborton in bootstrap
      • Basic of html
      • How to Make Glyphicon in bootstrap
    • ►  September (6)

About Me

Unknown
View my complete profile

Copyright © Asp.net modules | Powered by Blogger
Design by Sheetal Khandelwal