A series of sharing methods for using Bootstrap navigation bar_javascript skills

This article contains the basic usage of Bootstrap navigation bar for your reference. The specific content is as follows

1. Bootstrap basic navigation style
Making navigation bar in Bootstrap framework mainly through .nav” style. The default ".nav" style does not provide a default navigation style, and another style must be attached to be effective, such as "nav-tabs", "nav-pills" and the like. For example, there is an example of a tab navigation bar in the code editor on the right. The implementation method is to add the .nav and nav-tabs class styles to the ul tag

HomeCSS3SassjQueryResponsive

2. Bootstrap basic navigation bar
When making a basic navigation bar, there are mainly the following steps:

Step 1: First Make a navigation list (

• ) and add the class name "navbar-nav"

Step 2: Add a container (p) outside the list, and use the class names "navbar" and "navbar-default"

The main function of the ".navbar" style is to set effects such as left and right padding and rounded corners, but it and Color-related styles have not been set in any way

网站首页系列教程名师介绍成功案例关于我们

3. Add a title to the Bootstrap navigation bar
When making web pages, there is often a title in front of the menu (the text size is slightly larger than other text). In fact, the Bootstrap framework has also considered this aspect for everyone, through "navbar-header" and "navbar-brand" to achieve.

　　 导航条
 　网站首页系列教程名师介绍成功案例关于我们

4. Bootstrap navigation bar secondary menu
Adding a secondary menu to the navigation bar also Very simple

　　 导航条
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们

5. Bootstrap navigation bar with form
Some navigation bars will have There is a search form. A "navbar-form" is provided in the Bootstrap framework. The method of use is very simple. Place a form with the navbar-form class name in the navbar container. navbar-left" allows the form to float left for better alignment. In the Bootstrap framework, the "navbar-right" style is also provided to align elements to the right in the navigation bar.

　　 Bootstrap
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们搜索

6. Buttons, text and links in the Bootstrap navigation bar
In addition to using the a element and navbar in the navbar-brand in the navigation bar of the Bootstrap framework In addition to nav's ul and navbar-form, other elements can also be used. The framework provides three other styles:
1). Buttons in the navigation bar navbar-btn

2). Navigation bar The text in navbar-text

3). The ordinary link in the navigation bar navbar-link
. However, these three styles are subject to certain restrictions when used in the framework and need to be combined with navbar-brand and navbar- nav is used together. There is also a certain limit on the number. Generally, there will be no problem if you use one or two.

　　 Bootstrap
 　Navbar TextNavbar TextNavbar Text　　 Bootstrap
 　Navbar Text
  Navbar Text
  Navbar Text

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. This fixed navigation bar is used in It is more common in mobile development. The Bootstrap framework provides two ways to fix the navigation bar:
.navbar-fixed-top: The navigation bar is fixed at the top of the browser window
.navbar-fixed-bottom: The navigation bar Fixed at the bottom of the browser window

　…我是内容　…

8. Bootstrap paging navigation
Page navigation with page numbers, Probably the most common type of paging navigation, especially when the list page has a lot of content, it will provide users with paging navigation. Usually, many students like to use p>a and p>span structures to create paging navigation with page numbers. . However, in the Bootstrap framework, a structure like ul>li>a is used, and the pagination method is added to the ul tag. >In the Bootstrap framework, you can also set the paging button size through several different situations
1). Make the paging navigation larger through "pagination-lg";

2). Through "pagination-sm". Make paging navigation smaller

«12345»

In addition to paging navigation with page numbers, the Bootstrap framework also provides this kind of paging navigation. Navigation is often seen on some simple websites, such as personal blogs, magazine websites, etc. This kind of paging navigation does not see the specific page number, but only provides a "previous page" and "next page" button.
In actual use, page-turning paging navigation is similar to paging navigation with page numbers. The pager class is added to the ul tag.

………

By default, the page-turning navigation is displayed in the center, but sometimes we need one to be on the left and one on the right. The Bootstrap framework provides two styles
previous: Let the "Previous" button be on the left

next: Let the "Next" button be on the right

«上一页下一页»

The above is a series of sharing how to use Bootstrap navigation bar_javascript skills. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!