JS Component Bootstrap navigation bar use method

JS Component Bootstrap navigation bar use method _javascript skills

Last Update:2017-01-19 Source: Internet

Author: User

Tags button type

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A navigation bar is a response meta component that is used as a navigation header in your application or Web site.

1, the default navigation bar

The navigation bar can be folded (and turned off) on a mobile device and becomes horizontal expansion mode when the available viewport widths increase
custom collapse mode and horizontal mode threshold
Depending on the length of the content you put on the navigation bar, you may need to adjust the threshold of the navigation bar into the fold mode and the horizontal mode. You can achieve your needs by changing the value of the @grid-float-breakpoint variable or by adding your own media query CSS code.
First step:
the outermost container nav the label and adds the Nav-bar style class, which means that it belongs to the navigation bar.

<nav class= "NavBar navbar-default" role= "navigation" > 
</nav>

Effect:

Step two : Increase header

<nav class= "NavBar navbar-default" role= "navigation" > 
  <div class= "Navbar-header" > 
  <button Type= "button" class= "Navbar-toggle" data-toggle= "collapse" data-target= "#bs-example-navbar-collapse-1" > 
  <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> 
 </nav>

The button tag is nested with three spans of icon. Then give the Navbar-toggle style class and attributes collapse (Put away) and click on the target for Data-target.
When the window shrinks to a certain extent, the effect on the right appears.

Step three: nested drop-down menu, Form form, Drop-down menu.
Code:

&LT;H1 class= "Page-header" > Navigation bar

Preview:

Enhance the accessibility of navigation bars
To enhance accessibility, be sure to add role= "navigation" to each navigation bar.

2, form
placing the form within. Navbar-form can render a good vertical alignment and render a collapsed state in a narrower viewport. Use the alignment option to determine where it appears on the navigation bar.

A lot of code is shared by using Mixin,.navbar-form and. Form-inline.

Code

<form action= "" class= "Navbar-form navbar-left" role= "search" > 
   <div class= "Form-group" > 
   < Input type= "text" class= "Form-control"/> 
   </div> 
   <button type= "button" class= "Btn Btn-default" >Submit</button> 
   
  </form>

Add label label to input box
If you don't add label labels to the input box, screen readers will experience problems. For a form within a navigation bar, you can hide the label label by using the. Sr-only class.

3, Button
Code:
<button type= "button" class= "btn btn-default navbar-btn" > Login </button>
Preview:

4. Text
when wrapping text in. Navbar-text, the <p> label is usually used in order to have proper spacing and color.
Code Snippets:
<p class= "Navbar-text" > Text </p>
5. Non-navigational links
Perhaps you want to add standard links outside of the standard navigation components, then use the. Navbar-link class to have the correct default and inverse colors for the links.
Code Snippets:

Copy Code code as follows:

<p class= "Navbar-text navbar-right" > This is <a href= "#" class= "Navbar-link" > Links </a></p>

6. Component Alignment
Align navigation links, forms, buttons, or text with the. Navbar-left or. navbar-right Tool class. Both types use a CSS floating style in a specific direction. For example, to align navigation links, you should put them in a separate, Applied <ul> tool class.

These classes are mixin versions of. Pull-left and. Pull-right, but they are limited to media queries, which makes it easier to handle navigation bar components on various sizes of screens.

7, fixed at the top of the
Add. navbar-fixed-top allows the navigation bar to be fastened to the top. Effect is not on the.
Need to set the inner complement for the Body tab (padding)
This fixed navigation bar will cover the rest of the page unless you set a padding on top of <body>. Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.

body {padding-top:70px;}
Be sure to put it behind the bootstrap CSS core file. (Coverage issues)
8, fixed at the bottom
Replace with. Navbar-fixed-bottom.
Need to set internal for body tag (padding)
This fixed navigation bar will cover the rest of the page unless you set a padding for the <body> bottom. Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.

body {padding-bottom:70px;}
Be sure to use it after loading the core of bootstrap CSS.
9, still at the top of the
You can create a navigation bar with the page by adding. Navbar-static-top. It disappears as the page scrolls down. Unlike the. navbar-fixed-* class, you don't have to add padding to the body.
10. Anti-color navigation bar
You can change the appearance of the navigation bar by adding the. Navbar-inverse class.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is about the use of Bootstrap navigation section of the detailed introduction, I hope to help you learn.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More