Every day, Bootstrap must learn the navigation bar _ javascript skills

Every day, Bootstrap must learn the navigation bar. This article explains a variety of navigation bars and how to implement the elements in the navigation bar. If you are interested, refer 1. navigation bar

The navigation bar (navbar) differs from the navigation bar (nav) introduced in the previous section by a single word, with an additional "entry. In fact, they are quite different in the Bootstrap framework. There is a background color (more prominent) in the navigation bar (navbar), and the navigation bar can be a pure Link (similar to navigation) or a form, there are also forms and navigation combined with multiple forms. In this section, we will discuss how to use the navigation bar in the Bootstrap framework.

Like navigation, the navigation bar is an independent component in the Bootstrap framework, so you can use different versions as needed:

LESS version: corresponding source fileNavbar. less
Sass version: corresponding source file_ Navbar. scss
Compiled version: 3,642nd ~ Row 4,111st (note that the Bootstrap version is 3.1.1, and the positions of other versions are inconsistent ).

2. Basic navigation bar

In the Bootstrap box, there are not many differences between the navigation bar and the navigation bar, but in actual use, the navigation bar is much more complex than the navigation bar. Let's first look at the most basic navigation bar-the basic navigation bar.

1) usage:

When creating a basic navigation bar, take the following steps:

• Step 1: first create a navigation list (
  ) And add the class name "navbar-nav"
  • Step 2: Add a container (p) outside the list and use the class name "navbar" and "navbar-default"

   
     
     
   
      
      
  Homepage
   
      
      
  Series tutorials
   
      
      
  Instructor Introduction
   
      
      
  Success stories
   
      
      
  About us
   
     
     
  

  The main function of the ". navbar" style is to set the effect of the left and right padding and the rounded corner, but the style related to the color is not set. The main source code is as follows:

  /Source Code bootstrap.css file 3,642nd lines ~ 3,647th rows/

  .navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent;}

  2) Principle Analysis:

  The color of the navigation bar is controlled by ". navbar-default:

  /Source Code bootstrap.css file 3,940th lines ~ 3,943rd rows/

  .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7;}

  The navbar-nav style is based on navigation. nav, and the floating and inner margins of menu items are adjusted. At the same time, do not set the same color. For the source code, refer to the 3,785th lines of the bootstrap.css file ~ In the 3830th row, we select the code section and place it in the bootstrap.css on the right side.

  The color and other styles are implemented together with the parent container "navbar-default:

  /For the source code, refer to the 3,955th lines of the bootstrap.css file ~ 3,974th rows/

  .navbar-default .navbar-nav> li > a { color: #777;}.navbar-default .navbar-nav> li >a:hover,.navbar-default .navbar-nav> li >a:focus { color: #333; background-color: transparent;}.navbar-default .navbar-nav> .active > a,.navbar-default .navbar-nav> .active >a:hover,.navbar-default .navbar-nav> .active >a:focus { color: #555; background-color: #e7e7e7;}.navbar-default .navbar-nav> .disabled > a,.navbar-default .navbar-nav> .disabled >a:hover,.navbar-default .navbar-nav> .disabled >a:focus { color: #ccc; background-color: transparent;}

  3. Add title, level-2 menu, and status for the navigation bar

  1) Add the navigation bar title

  In Web page creation, there is often a title in front of the menu (the text font size is slightly larger than other texts). In fact, the Bootstrap framework also makes this consideration for everyone, it is implemented through "navbar-header" and "navbar-brand.

   　
  MOOC
   
     
     
   
      
      
  Homepage
   
      
      
  Series tutorials
   
      
      
  Instructor Introduction
   
      
      
  Success stories
   
      
      
  About us
   
     
     
  

  2) Principle Analysis:

  This function mainly provides a reminder function. Of course, the improvement can be regarded as a logo (not described too much here ). The style mainly increases the font setting and sets the maximum width:

  /Source Code bootstrap.css file 3,739th lines ~ 3,755th rows/

  .navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px;}.navbar-brand:hover,.navbar-brand:focus { text-decoration: none;}@media (min-width: 768px) { .navbar> .container .navbar-brand, .navbar> .container-fluid .navbar-brand { margin-left: -15px; }}

  Similarly, under the default navigation bar (navbar-default), navbar-brand is also colored:

  /For the source code, refer to the 3,947th lines of the bootstrap.css file ~ 3951 rows/

  .navbar-default .navbar-brand {color: #777;}.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus {color: #5e5e5e;background-color: transparent;}

  3) navigation bar status, level-2 menu

  Similarly, the basic navigation bar provides the current status, disabled status, floating status, and other effects for the menu, and can also have a navigation bar with a level-2 menu.

   　
  MOOC
   
     
     
   
      
      
  Homepage
   
      
      
  Series tutorials 
       
   
        
  CSS3
   
        
  JavaScript
   
        
  PHP
   
       
   
   
      
      
  Instructor Introduction
   
      
      
  Success stories
   
      
      
  About us
   
     
     
  

  As follows:

  4. navigation bar with Form

  Some navigation bars contain search forms, such as Sina Weibo navigation Bars:

  The Bootstrap framework provides a "navbar-form", which is easy to use. Place a form with the navbar-form class name in the navbar container.

   　
  MOOC
   
     
     
   
      
      
  Homepage
   
      
      
  Series tutorials 
       
   
        
  CSS3
   
        
  JavaScript
   
        
  PHP
   
       
   
   
      
      
  Instructor Introduction
   
      
      
  Success stories
   
      
      
  About us
   
     
     
   
  

  To view the sample code source code of a table in a real-time navigation bar, please refer to the bootstrap.css file for 3,839th lines ~ 3,904th rows.

  In the above example, we can see that "navbar-left" allows the form to float left to achieve better alignment. In the Bootstrap framework, the "navbar-right" style is also provided to align elements on the right of the navigation bar.

  /For the source code, refer to the 3,831st lines of the bootstrap.css file ~ 3,838th rows/

  @media (min-width: 768px) { .navbar-left { float: left !important;}.navbar-right { float: right !important; }}

  Note: There is a condition that only when the browser window width is greater than 768px.

  5. Buttons, text, and links in the navigation bar

  In addition to using the element in navbar-brand and the ul and navbar-form of navbar-nav, the navigation bar of the Bootstrap framework can also use other elements. The Framework provides three other styles:

  • 1. Click navbar-btn in the navigation bar.
  • 2. navbar-text in the navigation bar
  • 3. General link navbar-link in the navigation bar

  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.

  Let's take a look at the source code corresponding to these three styles:

  /For the source code, refer to the 3,914th lines of the bootstrap.css file ~ 3,939th rows/

  . Navbar-btn {margin-top: 8px; margin-bottom: 8px ;}. navbar-btn.btn-sm {margin-top: 10px; margin-bottom: 10px ;}. navbar-btn.btn-xs {margin-top: 14px; margin-bottom: 14px ;}. navbar-text {margin-top: 15px; margin-bottom: 15px;} @ media (min-width: 768px ){. navbar-text {float: left; margin-right: 15px; margin-left: 15px ;}. navbar-text.navbar-right: last-child {margin-right: 0;}/bootstrap.css file 3,952nd ~ Row 3,954th/. navbar-default. navbar-text {color: #777;}/bootstrap.css file row 4,035th ~ Row 4,037th/. navbar-inverse. navbar-text {color: #999;}/boostrap.css file row 4,017th ~ 4,022nd rows /. navbar-default. navbar-link {color: #777 ;}. navbar-default. navbar-link: hover {color: #333;}/bootstrap.css file 4,106th ~ Row 3/. navbar-inverse. navbar-link {color: # 4,111st;}. navbar-inverse. navbar-link: hover {color: # fff ;}

  Navbar-btn and navbar-link have been mentioned in the previous section. Now let's take a look at a simple application of navbar-text.

   　
  MOOC
   
     
     
   
      
      
  Navbar Text
   
      
      
  Navbar Text
   
      
      
  Navbar Text
   
     
     
  

  Check the results in the results window to see the obvious problems.

  Through the browser debugging tool, we can see that the value of the tag includes margin-top and margin-bottom is 15px. to align it, we will make some adjustments to the above structure.

  Replace tags

  OK.

  6. Fixed navigation bar

  In many cases, the designer wants the navigation bar to be fixed at the top or bottom of the browser, which is more common in mobile development. 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:

  ...
  I am content
  ...

  1) implementation principle:

  The implementation principle is very simple. In navbar-fixed-top and navbar-fixed-bottom, the position: fixed attribute is used, and the top value of navbar-fixed-top is set to 0, the bottom value of navbar-fixed-bottom is 0. The specific source code is as follows:

  /For the source code, refer to the 3,717th lines of the bootstrap.css file ~ 3,738th rows/

  .navbar-fixed-top,.navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030;}@media (min-width: 768px) {.navbar-fixed-top,.navbar-fixed-bottom { border-radius: 0; }}.navbar-fixed-top { top: 0; border-width: 0 0 1px;}.navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0;}

  2) bugs and solutions:

  From the running effect, it is not difficult to find that the top and bottom of the page's main content are covered by a fixed navigation bar. To avoid covering the content with a fixed navigation bar, we need to do some processing on the body:

  Body {padding-top: 70px;/* set when there is a fixed navigation bar at the top */padding-bottom: 70px;/* set when there is a fixed navigation bar at the bottom */}

  Because the default height of a fixed navigation bar is 50px, we usually set the values of padding-top and padding-bottom to 70px. Of course, you still need to analyze the actual situation.

  3). solution 2:

  In fact, in addition to this solution, we also have other solutions to put the fixed navigation bar in front of the page content:

  ...
  ...
  I am content

  Add the following style code to the file:

  .navbar-fixed-top ~ .content { padding-top: 70px;}.navbar-fixed-bottom ~ .content { padding-bottom: 70px;}

  Of course, this method sometimes requires specific analysis.

  7. Responsive navigation bar

  Today, the terminals that browse Web pages are not the same. The navigation bar implemented in the previous example can only be adapted to a large-screen browser, but it is not suitable when the browser screen is smaller. Therefore, responsive design comes along. Therefore, in a responsive Web page, the responsive navigation bar is very important. For example, the navigation bar of the official Bootstrap framework Website:

  (Effects of wide screen timeliness)
  

  (Timeliness of the screen)
  

  (Narrow screen timeliness results)
  

  In this section, we will discuss how to use the Bootstrap framework to implement responsive navigation bar effects.

  First run the Code:

   
   　
        Toggle Navigation 
       MOOC
   
       
   
      
      
    
       
       
  Homepage
    
       
       
  Series tutorials
    
       
       
  Instructor Introduction
    
       
       
  Success stories
    
       
       
  About us
   
      
      
   
  

  1 ),

  Usage:

  • 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   

  • 3. 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. For example:

  (1) The p code segment to be folded (represented by id ):

   
      
      
  
       
        … 
      
      
  

  The code snippet of the icon displayed when the screen is narrow:

   ...

  (2) You can also write the p code segment to be folded (represented by class ):

   
      
      
  
       
        … 
      
      
  

  The icon to be displayed when the screen is narrow:

   ...

  8. Reversed navigation bar

  The reversed navigation bar is actually the second style of navigation bar provided by the Bootstrap framework. Compared with the default navigation bar, there is no difference in usage, except that the navbar-deafult class name is changed to navbar-inverse. Only the background color and text of the navigation bar are modified. As follows:

  MOOC
      
      
   
       
       
  Homepage
   
       
       
  Tutorial
   
       
       
  About us
      
      
  

  The running effect is as follows:

  For the source code, please refer to the 4,023rd line of the bootstrap.css file ~ 4,111st rows

  9. Paging navigation (paging navigation with page numbers)

  Paging navigation is visible to almost any website. Good paging navigation can provide users with a better user experience. The Bootstrap framework provides two types of paging Navigation:

  ☑Page navigation
  ☑Page navigation
  1) page navigation

  Page navigation with page numbers may be the most common paging navigation, especially when there are too many page content in the list, you will be given a paging navigation method. The Bootstrap framework provides developers with different versions:

  ☑LESS version: The corresponding source file pagination. less

  ☑Sass version: corresponding source file _ pagination. scss

  ☑Compiled version: 4,130th lines to the bootstrap.css File ~ 4,222nd rows

  Usage:

  Most people usually like to use the p> a and p> span structures to create paging navigation with page numbers. However, the structure ul> li> a is used in the Bootstrap framework, and the pagination method is added to the ul Tag:

      
      
   
       
       
  «
   
       
       
  1
   
       
       
  2
   
       
       
  3
   
       
       
  4
   
       
       
  5
   
       
       
  »
      
      

  Running effect:

  2) implementation principle:

  It can be seen from the effect that the current status page is highlighted and cannot be clicked. The last page is disabled and cannot be clicked. Implementation style:

  /Bootstrap.css file 4,170th lines ~ 4,192nd rows/

  .pagination> .active > a,.pagination> .active > span,.pagination> .active >a:hover,.pagination> .active >span:hover,.pagination> .active >a:focus,.pagination> .active >span:focus {z-index: 2;color: #fff;cursor: default;background-color: #428bca;border-color: #428bca;}.pagination> .disabled > span,.pagination> .disabled >span:hover,.pagination> .disabled >span:focus,.pagination> .disabled > a,.pagination> .disabled >a:hover,.pagination> .disabled >a:focus {color: #999;cursor: not-allowed;background-color: #fff;border-color: #ddd;}

  Note: To disable the current status and the disabled status, you cannot click it. We also need to rely on js to implement it, or change the label in the two statuses to the span label.

  3) set the size:

  In the Bootstrap framework, you can also set the size in several different cases. Similar to buttons:

  • "Pagination-lg" is used to increase paging navigation;
  • Use pagination-sm to reduce the paging Navigation:

      
      
  
       
        …
      
      
      
      
  
       
        …
      
      
      
      
  
       
        …
      
      

  4) implementation principle of size setting:

  In practice, the corresponding padding font-size and angular sizes are added. The source code is 4,193rd rows for the bootstrap.css file ~ 4,222nd rows.

  10. Paging navigation (paging navigation)

  In addition to paging navigation with page numbers, the Bootstrap framework also provides paging navigation. This type of paging navigation is often seen on some simple websites, such as personal blogs and magazine websites. In this paging navigation mode, no specific page number is displayed. Only the buttons for "Previous Page" and "next page" are provided.

  The Bootstrap framework makes it a separate part:

  ☑LESS version:The corresponding source file is pager. less.

  ☑Sass version:The corresponding source file is _ pager. scss.

  ☑Compiled version:Line 3 of the bootstrap.css File ~ 4,260th rows

  Usage:

  In actual use, paging navigation is similar to paging navigation with page numbers. Add pager class to ul labels:

      
      
   
       
       
  «Previous Page
   
       
       
  Next page»
      
      

  Running effect:

  «Previous Page
  Next page»
  1) implementation principle:

  Corresponding style code:

  /Bootstrap.css file 4,223rd lines ~ 4,244th rows/

  .pager {padding-left: 0;margin: 20px 0;text-align: center;list-style: none;}.pager li {display: inline;}.pager li > a,.pager li > span {display: inline-block;padding: 5px 14px;background-color: #fff;border: 1px solid #ddd;border-radius: 15px;}.pager li >a:hover,.pager li >a:focus {text-decoration: none;background-color: #eee;}

  2) Align style settings:

  By default, the paging navigation is centered, but sometimes we need a left-to-right navigation. The Bootstrap framework provides two styles:

  ☑Previous:Place the previous button to the left
  ☑Next:Set the "Next" button to the right
  To use this function, you only need to add the corresponding class name on the li Tag:

      
      
   
       
       
  «Previous Page
   
       
       
  Next page»
      
      

  Running effect:

  «Previous Page
  Next page»
  3) implementation principle:

  The implementation principle is very simple, that is, a float on the left and a floating on the right:

  /Bootstrap.css file 4,245th lines ~ 4,252nd rows/

  .pager .next > a,.pager .next > span {float: right;}.pager .previous > a,.pager .previous > span {float: left;}

  4) status style settings:

  Like paging navigation with page numbers, if the disabled class name is added to the li label, the paging button is disabled, but cannot be clicked. You can use js for processing, or change the tag to the span tag.

      
      
   
       
       
  «Previous Page
   
       
       
  Next page»
      
      

  Running effect:

  «Previous Page
  Next page»
  5) implementation principle of the state style:

  /Bootstrap.css file 4,253rd lines ~ 4,260th rows/

  .pager .disabled > a,.pager .disabled >a:hover,.pager .disabled >a:focus,.pager .disabled > span { color: #999; cursor: not-allowed; background-color: #fff;}

  The above is all the content of this article, hoping to help you learn.