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)
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.
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-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.
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. To center and pad navbar content.
<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.