This article contains the basic usage methods of Bootstrap navigation bar for your reference. The specific content is as follows
1. Bootstrap basic navigation style
The navigation bars are mainly made in the Bootstrap framework through the ".nav" style. The default ".nav" style does not provide the default navigation style. Another style must be attached to it to be effective, such as "nav-tabs", "nav-pills", etc. For example, there is an example of a tab navigation bar in the code editor on the right. His implementation method is to add two class styles to the ul tag.nav and nav-tabs
<ul> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li></ul>
2. Bootstrap basic navigation bar
When creating a basic navigation bar, it mainly involves the following steps:
Step 1: First add the class name "navbar-nav" based on the navigation list (<ul class="nav">)
Step 2: Add a container (div) outside the list and use the class names "navbar" and "navbar-default"
The main function of the ".navbar" style is to set the effects of left and right padding and rounded corners, but the styles related to the color are not set in any way.
<div role="navigation"> <ul> <li><a href="##">Home Page</a></li> <li><a href="##">Series of Tutorials</a></li> <li><a href="##">Introduction to famous teachers</a></li> <li><a href="##">Successful Cases</a></li> <li><a href="##">About Us</a></li> </ul></div>
3. Add title to Bootstrap navigation bar
In web page production, there is often a title in front of the menu (the text size is slightly larger than other texts). In fact, the Bootstrap framework has also made this consideration for everyone, which is implemented through "navbar-header" and "navbar-brand".
<div role="navigation"> <div> <a href="##">Navigation bar</a> </div> <ul> <li><a href="##">Homepage</a></li> <li><a href="##">Series of tutorials</a></li> <li><a href="##">Introduction to famous teachers</a></li> <li><a href="##">Successful cases</a></li> <li><a href="##">About us</a></li> </ul></div>
4. Bootstrap navigation bar secondary menu
It is also very easy to add a secondary menu to the navigation bar
<div role="navigation"> <div> <a href="##">Navigation bar</a> </div> <ul> <li><a href="##">Homepage</a></li> <li> <a href="##">Data-toggle="dropdown">Series of tutorials<span></span></a> <ul> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li><a href="##">PHP</a></li> </li> </li> <li><a href="##">Introduction to famous teachers</a></li> <li><a href="##">Successful Cases</a></li> <li><a href="##">About Us</a></li> </ul></div>
5. Bootstrap navigation bar with form
Some navigation bars contain search forms, and a "navbar-form" is provided in the Bootstrap framework. The method is very simple to use. Place a form with the navbar-form class name in the navbar container. navbar-left” allows the form to float on the left to better achieve alignment. In the Bootstrap framework, a "navbar-right" style is also provided to allow elements to be aligned to the right in the navigation bar.
<div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <ul> <li><a href="##">Homepage</a></li> <li> <a href="##">data-toggle="dropdown">Series of tutorials<span></span></a> <ul> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li><a href="##">PHP</a></li> </li> </li> <li><a href="##">PHP</a></li> </li> </li> <li><a href="##">Introduction to famous teachers</a></li> <li><a href="##">Successful Cases</a></li> <li><a href="##">About us</a></li> </ul> <form action="##" rol="search"> <div> <input type="text" placeholder="Please enter keywords" /> </div> <button type="submit">Search</button> </form></div>
6. Buttons, text and links in the Bootstrap navigation bar
In addition to using the a element in navbar-brand and the ul and navbar-form of navbar-nav, other elements can be used in the navigation bar of the Bootstrap framework. The framework provides three other styles:
1). Button in navigation bar navbar-btn
2). Text in navigation bar navbar
3).Navbar-link in the navigation bar
However, these three styles are subject to certain restrictions when used in the framework and need to be used in combination with navbar-brand and navbar-nav. Moreover, there are certain restrictions on the quantity. Generally, there will be no problem when using one or two, and there will be problems if it exceeds two.
<div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <ul> <li><a href="##">Navbar Text</a></li> <li><a href="##">Navbar Text</a></li> <li><a href="##">Navbar Text</a></li> <li><a href="##">Navbar Text</a></li> </ul></div><div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <div> <a href="##">Navbar Text</a> <a href="##">Navbar Text</a> <a href="##">Navbar Text</a> </div></div>
7. Bootstrap fixed navigation bar
In one of many cases, designers want the navigation bar to be fixed at the top or bottom of the browser, and the application of this fixed navigation bar is more common in mobile development. The Bootstrap framework provides two ways to fix navigation bars:
.navbar-fixed-top: Navigation bar is fixed at the top of the browser window
.navbar-fixed-bottom: Navigation bar is fixed at the bottom of the browser window
<div role="navigation"> …</div><div>I am content</div><div role="navigation"> …</div>
8. Bootstrap pagination navigation
Page numbered pagination navigation may be the most common pagination navigation, especially when there is a lot of content on the list page, it will provide users with pagination navigation methods. Usually, many students like to use div>a and div>span structures to create paged navigation. However, in the Bootstrap framework, a structure like ul>li>a is used, and a pagination method is added to the ul tag.
<ul> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»»</a></li></ul>
In the Bootstrap framework, you can also set the pagination button size in several different situations.
1). Make pagination navigation larger through "pagination-lg";
2). Make the pagination navigation smaller through "pagination-sm"
<ul> …</ul><ul> …</ul><ul> …</ul><ul> …</ul>
In addition to providing page-numbered page navigation, the Bootstrap framework also provides page-turn navigation. This kind of pagination navigation is often seen on some simple websites, such as personal blogs, magazine websites, etc. This kind of pagination navigation does not see the specific page number, and only provides a "Previous Page" and "Next Page" button.
In actual use, page-turning pagination navigation is similar to page-coded pagination navigation, adding pager class to the ul tag.
<ul> <li><a href="#">«Previous page</a></li> <li><a href="#">Next page»</a></li></ul>
By default, the page-turning paging navigation is displayed in the center, but sometimes we need one to be on the left and the other to the right. Bootstrap framework provides two styles
Previous: Let the "Previous" button be left
next: Let the "Next" button on the right
<ul> <li><a href="#">«Previous page</a></li> <li><a href="#">Next page»</a></li></ul>
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 all about the Bootstrap navigation bar, I hope it will be helpful to everyone's learning.