Use and understanding of bootstrap navigation bar 3

Use and understanding of bootstrap navigation bar 3_javascript skills

Last Update:2017-01-18 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 ＞

The following theoretical content is copy from Bootstrap Chinese web (a Good bootstrap learning website)

Navigation bar

Navigation bar of Default style

A navigation bar is a responsive, basic component that is used as the head of a navigation page in your application or Web site. They can be folded (and open) on a mobile device and become horizontally expanded when the width of the viewport (viewport) increases.

The following code and comments are understood in my learning process

(Note the introduction of the necessary. CSS and. JS view)

<! DOCTYPE html>

Component arrangement

Align navigation links, forms, buttons, or text by adding the . Navbar-left and . Navbar-right Tool classes. Two classes will set the floating style in a specific direction through CSS. For example, to align the navigation links, place them in a separate <ul> tag that applies the 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.

Align multiple components to the right
Navigation bars currently do not support multiple. Navbar-right classes. To allow for the right space between the contents, we use a negative margin (margin) for the last. navbar-right element. If more than one element uses this class, their margins (margin) will not show up as you expect.

We'll revisit this feature when we rewrite this component in the V4 version.

Fixed at the top of

Add. Navbar-fixed-top class you can keep the navigation bar at the top, and you can include a. container or. Container-fluid container, so that the navigation bar is centered and the inner complement (padding) is added on both sides.

Need to set the inner complement for the BODY element (padding)
This fixed navigation bar will obscure other content on the page unless you set a padding to the bottom of the <body> element. Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.

body {padding-top:70px;}

 <nav class= "NavBar navbar-default navbar-fixed-top" >
 <div class= "container" >
 ...
 </div>
 </nav>

Fixed at bottom

Adding. Navbar-fixed-bottom class allows the navigation bar to be anchored to the bottom and can also contain a. container or. Container-fluid container to center the navigation bar and add an inner complement (padding) on both sides.

body {padding-bottom:70px;}

<nav class= "NavBar navbar-default navbar-fixed-bottom" >
 <div class= "container" >
 ...
 </div>
 </nav>

Still at the top of the

By adding the. Navbar-static-top class, you can create a navigation bar that is as wide as the page, and it disappears as the page scrolls down. You can also include a. container or. Container-fluid container that centers the navigation bar and adds an inner complement (padding) to both sides.

 <nav class= "NavBar navbar-default navbar-static-top" >
 <div class= "container" >
 ...
 </div>
</nav>

Anti-color navigation bar

You can change the appearance of the navigation bar by adding the. Navbar-inverse class.

<nav class= "NavBar navbar-inverse" > ...
</nav>

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 Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

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