Bootstrap navigation bar, pagination navigation

Navigation Bar Basics

The navigation bar (NavBar) and the Navigation (NAV) described in the previous section have a different word and a "bar". In fact, in the bootstrap framework they are still the obvious difference. There is a background color in the navigation bar (NavBar), and the navigation bar can be a pure link (like navigation), a form, and a combination of forms and navigation.   Basic navigation Bar

How to use:

When making a basic navigation bar, the main points are the following steps:

First step: first add the class name "Navbar-nav" based on the list of production navigation (<ul class= "NAV" >)

Step Two: Add a container (div) outside the list, and use the class name "NavBar" and "Navbar-default"

  add a title, level two menu, and status to the navigation bar

Add navigation bar Title

In the Web page production, often in front of the menu will have a title (text font size is slightly larger than other text), in fact, in the bootstrap framework for everyone to do this consideration, which through the "Navbar-header" and "Navbar-brand" to achieve.

Note: The class of Div is Navbar-header,a class is Navbar-brandlevel two menu and status and navigation.   navigation bar with formto add a form to the navigation bar, such as a search box, simply set a Navbar-form class on the form, and the other settings are the same as the form. but the buttons are no longer button but a. Additionally, adding navbar-left and Navbar-right to the form allows the form to float to the left or right   buttons, text, and links in the navigation bar

Other elements can be used in the navigation bar of the bootstrap framework, in addition to the UL and navbar-form of the A element and Navbar-nav in Navbar-brand. The framework provides three different styles:

1. Button navbar-btn in the navigation bar

2. Text navbar-text in the navigation bar

3, the navigation bar in the ordinary link navbar-link

However, these three styles are limited when used in the frame, and need to be used in conjunction with Navbar-brand and Navbar-nav . And there is a certain limit on the number, the general situation in the use of one to two no problem, more than two will have problems.

Use  . Navbar-btnTo<button> elements that are not in <form>Add a button, and the button is centered vertically on the navigation bar. . Navbar-btnCan be used on <a> and <input> elements.  If you need to include a text string in your navigation, use the class . Navbar-text。 This is usually used in conjunction with the <p> label to ensure proper preamble and color.If you have only one text, you might not need a div, but if multiple text wants to navigate, you'll need a div and a div to add. Nav and. Navbar-nav  If you do not want to use standard links within a regular navigation bar navigation component, use the class. Navbar-linkTo add the appropriate color for the default and inverted navigation bar options about when to use div package p, refer to above.In addition, . Navbar-left and . Navbar-right can also be used on p or div.navbar to make it floating aroundFrom:     Http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html Fixed navigation barIn many cases, the designer wants the navigation bar to be fixed at the top or bottom of the browser, and the application of this stationary navigation bar is more common in mobile development.

Using the method is simple, simply append the corresponding class name to the outer container navbar of the authoring navigation bar:

Navbar-fixed-top navbar-fixed-bottom"role=" navigation "> ...</div>

  There are bugs and workarounds:

It is easy to see from the running effect that the top and bottom of the page main content are obscured by the fixed navigation bar. In order to avoid the fixed navigation bar covering the content, we need to do some processing on the body:

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

Because the fixed navigation bar default height is 50px, we generally set the value of Padding-top and Padding-bottom to 70px, of course, sometimes it is necessary to specifically analyze the situation.

There's a second way, but it looks more complicated and doesn't look closely. Http://www.imooc.com/code/3123   Responsive navigation barNow browsing the Web page of the terminal is not a dust is not changed, the previous example implementation of the navigation bar can only fit on the big screen browser, but when the browser screen becomes smaller, it is not appropriate. So the responsive design comes with it. In a responsive web page, it is also very important for a responsive navigation bar. For example, the bootstrap Frame official website navigation bar:  

How to use:

1, ensure that the content needs to be folded in the narrow screen must be wrapped in a div, and for this div to add collapse,navbar-collapse two class names. Finally, add a class name or ID name for this div .

2, to ensure that the narrow screen to display the icon style (fixed wording):

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

3. Add data-target= ". Class name/#id名" for the button, is the class name or ID name? is determined by the div that needs to be collapsed. Such as:

Div code snippet that needs to be collapsed:

<div class= "Collapse Navbar-collapse" id= "Example" >      <ul class= "Nav navbar-nav" >      ...      </ul></div>

Icon snippet to display when narrow screen:

<button class= "Navbar-toggle" type= "button" data-toggle= "Collapse" data-target= "#example" >  ... </ Button>

You can also write a div snippet that needs to be collapsed:

<div class= "collapse navbar-collapse example" >      <ul class= "Nav navbar-nav" >      ...      </ul></div>

The icon to display when the screen is narrow:

<button class= "Navbar-toggle" type= "button" data-toggle= "Collapse" data-target= ". Example" > ...  </ Button>

   looks like a can also be in front of the button? In addition, note data-target = "" double quotes inside there. or #, depending on whether the div to be collapsed is a class or an ID.   Inverse color navigation barInverse color navigation bar is actually the bootstrap framework for everyone to provide the second style of navigation bar, compared with the default navigation bar, the use of the method is no different, just to change the Navbar-deafult class name to Navbar-inverse. Its change is only the background color of the navigation bar and the text has been modified.   Pager (pager with page number)

The paging navigation is visible on almost any web site. Good pager navigation can give users a better user experience. There are two types of paging navigation available in the bootstrap framework:

? Paged Navigation with page numbers

? Paging Navigation with page flipping

How to use:

At ordinary times many students div>a like div>span to use and structure to make pages with page navigation. However, using this structure in the bootstrap framework ul>li>a , add the pagination method to the UL tag:

<ul class= "pagination" >   <li><a href= "#" >&laquo;</a></li>   <li> <a href= "#" >1</a></li>   <li><a href= "#" >2</a></li>   <li> <a href= "#" >3</a></li>   <li><a href= "#" >4</a></li>   <li> <a href= "#" >5</a></li>   <li><a href= "#" >&raquo;</a></li></ul >

Operating effect:

 Note: The one on the left of the first page is &laquo; the last page on the right is $raquo; don't forget the semicolon.The disabled state of the last page is a disabled class added. In addition, Li has a parcel of content. Note: To disable the current state and disable the state cannot be clicked, we also rely on JS to implement, or the two states of the a tag to the span tag.

Size setting:

In the bootstrap framework, you can also set its size in several different situations. Similar to buttons:

1, through "PAGINATION-LG" to make paging navigation become larger;

2, through the "PAGINATION-SM" to make the paging navigation become smaller:

  Paging Navigation (Paging page navigation)The Bootstrap Framework provides page-turn navigation in addition to page-paged navigation. This paging is often seen on some simple websites, such as personal blogs, magazine sites, and so on. This pager is not a specific page number, only a "previous" and "Next" buttons are provided.

How to use:

In actual use, paging page navigation is similar to page navigation with page numbering, adding classes for UL tags pager :

<ul class= "pager" >   <li><a href= "#" >&laquo; previous </a></li>   <li ><a href= "#" > Next &raquo;</a></li></ul>

 

To align style settings:

By default, page paging navigation is centered, such as:

But sometimes we need a left and a right. The bootstrap framework provides two styles:

? Previous: Let the "back" button reside on the left

? Next: Let the "next" button reside right

For specific use, simply li add the corresponding class name to the label:

<ul class= "Pager" >   <li class= "previous" ><a href= "#" >&laquo; previous </a></ li>   <li class= "next" ><a href= "#" > Next &raquo;</a></li></ul>

Implementation principle:

The principle of implementation is very simple, that is, a left float, a right float.

 

State style settings:

As with page pager navigation, if the disabled class name is added to the Li label, the paging button is disabled, but it is also not possible to disable the click function . You can use JS to process, or change the label to a a span label.

<ul class= "Pager" >  <li class= "disabled" ><span>&laquo; Previous Page </span></li>  <li><a href= "#" > Next &raquo;</a></li></ul>

  labelIn some Web pages, a tag is often added to tell the user some extra information, such as adding a new navigation item to the navigation, and perhaps adding a "new" tag to the user. This is the newly added navigation item. As shown in the following:  

Principle of Use:

The use of the method is simple, you can use a span such as in-line tags:

<span class= "label Label-default" >New</span>
Color style settings:
Like the button Element button, the label style also provides multiple colors:
? Label-deafult: Default label, dark grey
? Label-primary: Main label, dark blue
? Label-success: Success Tag, green
? Label-in: Information label, light blue
? Label-warning: Warning Label, Orange
? Label-danger: Error tag, red
The main ones are to modify the background color and the text color by these class names:
<span class= "label Label-default" > Default label </span><span class= "label label-primary" > Main tab </span> <span class= "Label label-success" > Success Tag </span><span class= "Label label-info" > Info Tags </span> <span class= "label label-warning" > Warning label </span><span class= "label Label-danger" > Error tags </span>
 badgeIn the bootstrap framework, this effect is described as a badge effect and is implemented using the "badge" style. 
How to use:
In fact, there's not much to say, you can use the span tag to make it like a tag, and then add the class for him badge :
<a href= "#" >inbox <span class= "badge" >42</span></a>
You can use badges in conjunction with buttons or navigation:
<ul class= "Nav navbar-nav" >         <li class= "active" ><a href= "# #" > Homepage </a></li>         <li><a href= "# #" > Series Tutorials </a></li>         <li><a href= "# #" > Famous teachers </a></li >         <li><a href= "# #" > Success Stories <span class= "badge" >23</span></a></li >         <li><a href= "# #" > About us </a></li>  </ul>
Note: There can be numbers in span
button and capsule-shaped navigation settings badges:
In addition, badges can have similar styles in button element buttons and capsule-shaped navigation nav-pills, except that they are of different colors.
from: http://www.imooc.com/code/3110 finishing      
 Bootstrap navigation bar, pager