Bootstrap entry book (5) navigation bar and pagination navigation _ javascript skills

This article mainly introduces the Bootstrap entry book (5) navigation bar and paging navigation related information. For more information, see 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.

   
 
 
 
  
  
HTML
 
  
  
CSS
 
  
  
JavaScript
 
  
  
PHP
 
 
 

The following results can be achieved:

Wide screen:

Narrow screen:

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

1. First, create a navigation list (

Add the class name. navbar-nav


2. Add a container (p) outside the list. We recommend that you use

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:

WEB Development

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)

 
WEB Development
 
   
  
 
    
   
HTML
 
    
   
CSS
 
    
   
JavaScript 
    
 
     
JQuery
 
     
Vue
 
     
NodeJS
 
    
 
 
    
   
PHP
 
   
  

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:

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 disable

Vertical center of buttons in the navigation bar


2. navbar-text in the navigation bar, which is generally used

Elements 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.

    
      ...
    

This fixed navigation bar will cover other content on the page, unless you givePadding is set at the bottom of the 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:

 
 
      Toggle Navigation 
     WEB Development
 
     
 
    
  
 
     
   
HTML
 
     
   
CSS
 
     
   
JavaScript
 
     
   
PHP
 
    
  
 

Analysis:

Like a normal navigation bar, the outermost layer is used

Container packages are mainly. navbar and. navbar-default classes.


Make sure 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.


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

 Toggle Navigation   

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 p 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:

    
  
 
     
   
Page 1
 
     
   
6
 
     
   
7
 
     
   
8
 
     
   
9
 
     
   
10
 
     
   
Last page»
    
  

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:

    
  
 
     
   
«Previous Page
 
     
   
Next page»
    
  

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)

    
  
 
     
   
«Previous Page
 
     
   
Next page»
    
  

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 this line label to add. 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 elements such as links and navigation can be highlighted to display new or unread information entries.

Inbox 42 Messages 4

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.

    
  
 
     
   
Home 42
 
     
   
Profile
 
     
   
Messages 3
    
  

For more information about Bootstrap entry books (5) navigation bar and paging navigation, I hope this will help you!