Bootstrap navigation Element

Bootstrap navigation Element

 

Use ul and li Unordered Lists for table navigation or tags, and add class. nav and. nav-tabs to ul.

 

 

<Script type = "text/javascript" src = "bootstrap-3.3.4-dist/jquery-2.1.4.min.js"> </script> <script type = "text/javascript" src = "bootstrap-3.3.4-dist/js/bootstrap. min. js "> </script>

• Article Management
• Category Management
• Comment management
• Blog Configuration
• Blog

 

 

When you click a navigation bar, add class to its li. active. nav-tabs> li. active> ,. nav-tabs> li. active> a: focus ,. nav-tabs> li. active> a: hover {color: #555; cursor: default; background-color: # fff; border: 1px solid # ddd; border-bottom-color: transparent ;} capsule navigation menu

 

 

Basic capsule navigation menu

 

To change the label to the capsule style, you only need to use class. Nav-pillsReplace. Nav-tabsYou can.

 

• Article Management
• Category Management
• Comment management
• Blog Configuration
• Blog

 

 

. Nav-pills> li {
Float: left;
}
. Nav-pills> li. active> a,. nav-pills> li. active> a: focus,. nav-pills> li. active> a: hover {
Color: # FFF;
Background-color: #337AB7 ;}

 

 

Vertical capsule navigation menu when using class . Nav,. nav-pillsAnd use the class . Nav-stackedTo Stack capsules vertically.

 

 

 

• Article Management
• Category Management
• Comment management
• Blog Configuration
• Blog

 

 

The reason why. nav-stacked can make the capsule vertical:
. Nav-stacked> li {
Float: none;
}

 

 

When the screen width is greater than 768px Or. nav,. nav-pills at the same time use class. nav-justified, let the label or Capsule

 

The same width as the parent element. On a smaller screen, navigation links are stacked.

 

• Article Management
• Category Management
• Comment management
• Blog Configuration
• Blog

Add the background color to. container for better effect.

 

 

Small screen:

 

You can disable the link li to add. active to display the current status of this menu. You can also add. disabled to it to make it unavailable and disable the link.

 

Of: hover status.

 

 

• Article Management
• Category Management
• Comment management
• Blog Configuration
  • Configuration 1
  • Configuration 2
  • Configuration 3
  •  
  • Configuration 4
• Blog

This class only changes its appearance and does not change its functions. Here, you need to use custom JavaScript to disable the link, although the appearance here does not appear

 

But you can click it to find that the page will still jump to the Baidu homepage.

 

 

Add an unordered list with. dropdown-menu class from the drop-down menu

 

 

• Article Management
• Category Management
• Comment management
• Blog Configuration
  • Configuration 1
  • Configuration 2
  • Configuration 3
  •  
  • Configuration 4
• Blog