Every day, Bootstrap must learn the navigation bar. It further explains how to use the elements in the navigation bar and how to use them. If you are interested, refer
I. basic navigation bar
When creating a basic navigation bar, take the following steps:
Step 1: first create a navigation list (
LOGO
- Homepage
- Series tutorials
- Instructor Introduction
- Success stories
- About us
1. In Web page creation, there is often a title in front of the menu (the text font size is slightly larger than other text ), it is implemented through "navbar-header" and "navbar-brand.
LOGO
2. The level-2 menu is passed
Series tutorials
3. A "navbar-form" is provided in the Bootstrap framework, which is easy to use. Put a form with the navbar-form class name in the navbar container.
"Navbar-left" float the left of the form and the "navbar-right" style to align the elements on the navigation bar to the right.
Ii. Reversed navigation bar
The reversed navigation bar is actually the second style of navigation bar provided by the Bootstrap framework for everyone. It only replaces the "navbar-deafult" class name with "navbar-inverse ".
LOGO
- Homepage
- Tutorial
- About us
3. Fixed navigation bar
In many cases, the designer wants the navigation bar to be fixed at the top or bottom of the browser.
The Bootstrap framework provides two fixed navigation bar methods:
☑. Navbar-fixed-top: the navigation bar is fixed at the top of the browser window.
☑. Navbar-fixed-bottom: the navigation bar is fixed at the bottom of the browser window.
The method is simple. You only need to append the corresponding class name to navbar, the most external container of the navigation bar.
...
...
Iv. Responsive navigation bar
Toggle Navigation
LOGO
- Homepage
- Series tutorials
- Instructor Introduction
- Success stories
- About us
In the wide screen mode:
In narrow screen mode:
Usage:
1. Ensure that the content to be folded in the narrow screen must be wrapped in a p with two class names: collapse and navbar-collapse. Finally, add a class name or id name for this p.
2. Ensure the icon style to be displayed when the screen is narrow (fixed ):
Toggle Navigation
3. Add data-target = ". Class Name/# id name" to the button"
To learn more about Bootstrap, clickBootstrap learning tutorialDeep Learning.
The above is all the content of this article, hoping to help you learn.
You can also combineA daily guide to BootstrapThis article will be learned.