Navigation bars are responsive meta components that act as navigation headers in your app or website.
1. Default navigation bar
The navigation bar can be folded (and can be turned on and off) on the mobile device and becomes horizontally expanded mode as the available viewport width increases
Customize the thresholds for folding modes and horizontal modes
Depending on the length of what you put on the navigation bar, maybe you need to adjust the threshold for the navigation bar to enter fold mode and horizontal mode. You can achieve your needs by changing the value of the @grid-float-breakpoint variable or adding your own media query CSS code.
first step:
The outermost container nav tag and add a nav-bar style class to indicate that it belongs to the navigation bar
<nav role="navigation"> </nav>
Effect:
Step 2 : Add header
<nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div> </nav>
The button label is nested with three span icons. Then give the navbar-toggle style class and attribute collapse (collapse), and the target is data-target when clicking.
When the window narrows to a certain extent, the effect on the right appears.
Step 3: Nested drop-down menu, form form, drop-down menu.
Code:
<h1>Navigation bar</h1> <nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div> <div id="bs-example-navbar-collapse-1"> <!--Nested drop-down menu--> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown"> Pulldown<b></b> </a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> </li> </li> </ul> <!--Nested Forms--> <form action="" role="search"> <div> <input type="text" /> </div> <button type="button">Submit</button> </form> <!-----> </div> </nav>
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 gives good vertical alignment and 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="" role="search"> <div> <input type="text" /> </div> <button type="button">Submit</button> </form>
Add label label to the input box
If you do not add label tags to the input box, the screen reader will have problems. For forms in the navigation bar, you can hide the label tag through .sr-only class.
3. Buttons
Code:
<button type="button">Login</button>
Preview:
4. Text
When wrapping text in .navbar-text, the <p> tag is usually used for the correct line spacing and color.
Code snippet:
<p>Text</p>
5. Non-navigation links
Maybe you want to add standard links outside of the standard navigation components, then using .navbar-link class can give the link the correct default and inverse color.
Code snippet:
Copy the code as follows: <p>This is the <a href="#">link</a></p>
6. Component Alignment
Use the .navbar-left or .navbar-right tool class to align navigation links, forms, buttons or text. Both classes use CSS floating styles in specific directions. For example, to align navigation links, you need to place them in a separate tool class <ul>.
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 screens of various sizes.
7. Fixed on top
Adding .navbar-fixed-top allows the navigation bar to be fixed on the top. The effect is not enough.
Need to set padding for body tags
This fixed navigation bar will obscure other content on the page unless you set padding above <body>. Use your own value or use the code given below. Tip: The default height of the navigation bar is 50px.
body { padding-top: 70px; }
It must be placed after the core file of Bootstrap CSS. (Coverage issues)
8. Fixed at the bottom
Use .navbar-fixed-bottom instead.
Need to set internal (padding) for body tags
This fixed navigation bar will obscure other content on the page unless you set padding at the bottom of <body>. Use your own value 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. Stay at the top
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 need to add padding to the body.
10. Inverse color navigation bar
The appearance of the navigation bar can be changed by adding the .navbar-inverse class.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is a detailed introduction to how to use the Bootstrap navigation bar. I hope it will be helpful to everyone's learning.