Bootstrap entry book (5) navigation bar, pagination navigation bar, bootstrap navigation bar

Bootstrap entry book (5) navigation bar, pagination navigation bar, bootstrap navigation bar

Navigation Bar

Navigation Bar (navbar) and the Bootstrap entry book (4) introduced in the previous section, including menus, buttons, and navigation. Navigation (nav), there is a word difference, and there is an additional word. In fact, they are quite different in the Bootstrap framework. There is a background color in the navigation bar (navbar), and the navigation bar can be a pure Link (similar to navigation), a form, and a combination of forms and navigation. They can be folded (and turned off) on mobile devices and gradually become horizontally expanded when the width of the viewport increases.

Basic navigation bar

In fact, the differences between the navigation bar and the navigation bar are not that big, but in actual use, the navigation bar is much more complicated than the navigation bar. The following describes how to implement a basic navigation bar.

<Div class = "navbar-default" role = "navigation"> <! -- Role is used to help screen readers understand the content here --> <ul class = "nav navbar-nav"> <li class = "active"> <a href = "#"> HTML </a> </li> <a href = "#"> CSS </a> </li> <a href = "#"> JavaScript </a> </li> <a href = "#"> PHP </a> </li> </ul> </div>

The following results can be achieved:

Wide screen:

 

Narrow screen:

 

When creating a basic navigation bar, pay attention to the following points:

1. First, add the class name. navbar-nav Based on the navigation list (<ul class = "nav"> ).

2. Add a container (div) outside the list. We recommend that you use <nav> and use the class name. navbar and. navbar-default.

3. The main function of the navbar class is to set the effects of the left and right padding and rounded corners. You can use. navbar-default to control the color of the navigation bar, such as. navbar-inverse.

With title and level 2 menu

In Web page creation, you can usually see a title in front of the menu (the text font size is slightly larger than other text). In fact, the Bootstrap framework has also made this consideration for everyone, it passes. navbar-header and. navbar-brand, for example:

<Div class = "navbar-header"> <a href = "#" class = "navbar-brand"> WEB development </a> </div>

Of course, it can also be used as a logo, which is described on the Chinese official website and is not described in detail here.

The level-2 menu is needless to say. I have already explained it in detail in the previous blog. If I still don't know much about it, I can go over my previous blog, let's take a look at the following code and its implementation results: (Note that the navbar-inverse reversed navigation bar is used here)

<Div class = "navbar-inverse" role = "navigation"> <div class = "navbar-header"> <a href = "#" class = "navbar-brand "> WEB development </a> </div> <ul class =" nav navbar-nav "> <li class =" active "> <a href =" # "> HTML </a> </li> <a href = "#"> CSS </a> </li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> JavaScript <span class = "caret"> </span> </a> <ul class =" dropdown-menu "> <li> <a href =" # "> jQuery </a> </li> <a href =" # "> Vue </> </li> <a href = "#"> NodeJS </a> </li> </ul> </li> <a href = "#"> PHP </a> </li> </ul> </div>

The effect is as follows:

 

With form

We often see search forms in the navigation bar, such as zhihu and Sina Weibo. Of course, the Bootstrap framework cannot be missing such a thing. The usage is also very simple:

In the Bootstrap framework,. navbar-form, in. in the navbar container, place. form of navbar-form class name; then add. navbar-left float the left of the form to better align the form.

In Bootstrap, The. navbar-right style is also provided to align elements on the right of the navigation bar.

Copy this code to the Code to see the result:

<Form action = "#" class = "navbar-form navbar-left" rol = "search"> <div class = "form-group"> <input type = "text "class =" form-control "placeholder =" Enter keywords "/> </div> <button type =" submit "class =" btn-default "> Search </ button> </form>

Buttons, text, and links

In addition to the above styles, the bootstrap framework provides three styles:

1. Click navbar-btn in the navigation bar to vertically center buttons not in <form> in the navigation bar

2. navbar-text in the navigation bar. Generally, <p> elements are used to achieve optimal line spacing.

3. The normal link navbar-link in the navigation bar is a non-navigation link. To add this class, you can set the default color and reversed color.
However, these three styles are limited in use in the framework and need to be used in combination with navbar-brand and navbar-nav. There are also limits on the quantity. Generally, one or two of them will not be a problem, and more than two will be a problem.

Fixed navigation bar

Sometimes, we want the navigation bar to be fixed at the top or bottom of the browser. Bootstrap provides two classes for us to implement this style:

. 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 the navbar container that creates the navigation bar.

<nav class="navbar navbar-default navbar-static-top"> ...</nav>

This fixed navigation bar will cover other content on the page, unless you set padding at the bottom of the <body> element. Tip: the default height of the navigation bar is 50px. For example: body {padding-bottom: 70px;}, you can also use your own value.

Responsive navigation bar

In the above example, the navigation bar can only have a good effect on the big screen. When the screen is small, it is not suitable to directly display all the navigation items. In order to have a better display effect, the responsive navigation bar design will follow. Let's take a look at the effect and analyze it step by step!

 

When the screen is narrow, click the button icon on the right to expand. The effect is basically the same as that shown above except that the active status does not overflow the container. The implementation code is as follows:

<Div class = "navbar-default" role = "navigation"> <div class = "navbar-header"> <! --. The navbar-toggle style is used to shrink the content of toggle, that is, the element of the nav-collapse style --> <button class = "navbar-toggle" type = "button" data-toggle = "collapse" data-target = ". navbar-responsive-collapse "> <span class =" sr-only "> Toggle Navigation </span> <span class =" icon-bar "> </span> <span class = "icon-bar"> </span> <span class = "icon-bar"> </span> </button> <! -- Make sure that the screen is either wide screen or narrow screen, navbar-brand display --> <a href = "#" class = "navbar-brand"> WEB development </a> </div> <! -- When the screen width is less than 768px, the content in the div. navbar-responsive-collapse container is hidden and the icon-bar is displayed. When you click the icon-bar icon, expand it. When the screen is greater than 768px, it is displayed by default. --> <Div class = "collapse navbar-responsive-collapse"> <ul class = "nav navbar-nav"> <li class = "active"> <a href = "#"> HTML </a> </li> <a href = "#"> CSS </a> </li> <a href = "#"> JavaScript </a> </li> <a href = "#"> PHP </a> </li> </ul> </ div> </div>

Analysis:

Like a normal navigation bar, the outermost layer uses the <div class = "navbar-default" role = "navigation"> container package, mainly the. navbar and. navbar-default classes.

Make sure that the content to be folded in a narrow screen must be enclosed in a div with two class names:. collapse and. navbar-collapse. Add a class name or id name for this div.

The icon style to be displayed when the screen is narrow (fixed ):

<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>

Add data-target = ". Class Name/# id name" to the button. Is the competition a class name or an id name? It is determined by the div to be folded. (The key here is that you can modify the above Code here and you will find that the Code cannot be expanded)

Paging navigation

Paging navigation can be seen on almost all websites. Good paging navigation can provide users with a better user experience and facilitate crawlers to search on webpages.

Page navigation

Page navigation with page numbers should be the most common type of page navigation. When there are many page content in the list, you will be given a page navigation method with page numbers, in Bootstrap, the structure ul> li> a is used, and the pagination class is added to the ul Tag:

<Ul class = "pagination"> <li> <a href = "#"> </a> </li> <a href = "#"> 6 </a> </li> <li class = "active"> <a href = "#"> 7 </a> </li> 
The implementation result is as follows:
 

It can be seen that there are hover, active, disabled, and so on, of course, it can also be adjusted: In the outer container. after the pagination class, Add. pagination-lg makes paging navigation larger ;. pagination-sm:
Paging navigation
In fact, this method means that you cannot see the specific page number and only provide a button for the previous and next pages.
It is easy to use, that is, add the pager class on the ul Tag:
<Ul class = "pager"> <li> <a href = "#"> «previous page </a> </li> <a href = "#"> next page» </a> </li> </ul>
It is centered by default. If we need a left-to-right display, add two styles: previous, so that the previous button is left, and next, and the next button is right. (You can also use disabled to indicate the disabled status)
<Ul class = "pager"> <li class = "previous disabled"> <a href = "#"> «previous page </a> </li> <li class =" next "> <a href =" # "> next page» </a> </li> </ul>
Others
Tag
In some Web pages, a tag is often added to indicate some additional information. For example, if a new navigation item is added to the navigation, a "new" tag may be added, to tell the user. This is the newly added navigation item.
In Bootstrap, this effect is extracted into a separate tag component. You can use an in-row label like <span> to add it. label class to control the size, and then use the scenario class to control the highlighted colors such as label-default and label-danger. (this kind of scenario class was mentioned in the original notes, however, different prefixes must be added here)

 
Badge (badge)
In fact, it is similar to a large part of the above labels. It is generally used as information prompts, for example, how much unread information is left, that is, the unread information prompts we often see in the upper right corner. In Bootstrap, this effect is called a badge effect and implemented using the badge class.
Nested <span class = "badge"> elements for links, navigation, and other elements can clearly display new or unread information entries.
<a href="#">Inbox <span class="badge">42</span></a><button class="btn btn-primary" type="button"> Messages <span class="badge">4</span></button>
 
By viewing the source code, we can find that Bootstrap also uses the empty pseudo element to hide the element when there is no content:
.badge:empty { display: none;}
It should be noted that IE8 does not support: the empty character is not hidden by default;
The badges in Bootstrap adapt to the activation status of the navigation element.
<ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li></ul>
 
For more information about Bootstrap entry books (5) navigation bar and paging navigation, I hope this will help you!
Articles you may be interested in:

 

 
  
Every day, Bootstrap is a simple entry
 
  
Navigation bar required by Bootstrap every day
 
  
Introduction to Bootstrap (zero) Bootstrap
 
  
Bootstrap getting started book (I) typographical
 
  
Bootstrap entry books (iii) raster System
 
  
Bootstrap getting started book (4) menus, buttons and navigation