Bootstrap Introductory Book (v) navigation bar, paging navigation _javascript tips

Navigation bar

The navigation bar (NavBar) and the bootstrap Introductory book (iv) menu, buttons, and navigation that are described in the previous section. Navigation (NAV), on the difference between a word, a more "bar" word. In fact, they are clearly 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), can also be a form, and there are forms and navigation combined, and so on. They can be folded (and open) on a mobile device and become horizontally expanded when the width of the viewport (viewport) increases.

Base navigation Bar

In fact, the difference in the appearance of navigation bars and navigation is not that big, but in practice the navigation bar is much more complex than navigation. Here's how to implement a most basic navigation bar.

<div class= "NavBar navbar-default" role= "navigation" ><!--role is to facilitate screen readers to understand this content--> <ul class=
 "Nav Navbar-nav ">
 <li class=" active "><a href=" # ">HTML</a></li>
 <li><a href = "#" >CSS</a></li>
 <li><a href= "#" >JavaScript</a></li>
 <li> <a href= "#" >PHP</a></li>
 </ul>
</div>

The effect that can be achieved is this:

Widescreen:

Narrow screen:

When making a basic navigation bar, focus on the following points:

1. First add the class name based on the list (<ul class= "NAV" >) that makes the navigation. Navbar-nav

2. Add a container (div) outside the list to allow the recommended use of <nav>, and use the class name. NavBar and Navbar-default

The main function of the 3.navbar class is to set the effect of padding and rounded corners, and to control the color of the navigation bar by Navbar-default. Navbar-inverse.

With title, Level two menu

In the production of Web pages, you can generally see a title in front of the menu (text size is slightly larger than other text), in fact, in the bootstrap framework for everyone to do this consideration, its adoption. Navbar-header and. Navbar-brand to implement, such as:

<div class= "Navbar-header" >
 <a href= "# #" class= "Navbar-brand" >web development </a>
</div>

Of course, can also be used to do the logo, the Civil Service network description, this is not described in detail.

Second-level menu naturally needless to say, in the previous blog has been explained in detail, if you still do not know, you can go over my last blog, we look at the following code and can be achieved: (Note that this is the use of navbar-inverse-color navigation bar)

<div class= "NavBar 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>
 <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>
 <li><a href= "#" >Vue</a></li>
 <li><a href= "#" >NodeJS</a></li>
 </ul>
 </li>
 <li > <a href= "#" >PHP</a></li>
 </ul>
</div>

The effect is as follows:

With form

We often see the search form in the navigation bar, such as the knowledge, Sina Weibo and so on have, bootstrap framework of course it is impossible to miss such things. The use method is also very simple:

A. Navbar-form is provided in the bootstrap framework, a form with a. Navbar-form class name is placed in the. NavBar container, and then added. Navbar-left lets the form float left to better align.

In Bootstrap, the. Navbar-right style is also provided so that elements are aligned to the right of the navigation bar.

Copy the code into the code to see how it works:

<form action= "# #" class= "Navbar-form navbar-left" rol= "search" > <div class= "
 form-group" >
 < Input type= "text" class= "Form-control" placeholder= "Please input keyword"/>
 </div>
 <button type= "Submit" class= "btn Btn-default" > Search </button>
</form>

buttons, text, and links

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

1. The button navbar-btn in the navigation bar, so that the buttons in the <form> are centered vertically in the navigation bar.

2. The text navbar-text in the navigation bar, the general use of <p> elements to achieve the best line spacing

3. The normal link navbar-link in the navigation bar, the navigation link, adds this class, may have the correct default color and the inverse color setting
However, these three styles are limited when used in the framework and need to be used in conjunction with Navbar-brand and Navbar-nav. And there are certain restrictions on the number, the general situation in the use of one or two will not have problems, more than two will have problems.

Fixed navigation bar

Sometimes we want the navigation bar to be anchored to the top or bottom of the browser, and Bootstrap provides us with two classes to implement this style easily:

. Navbar-fixed-top: Navigation bar docked at the top of the browser window
. Navbar-fixed-bottom: Navigation bar docked at the bottom of the browser window

Using the method is simple, simply append the corresponding class name to the outermost container (navbar) of the navigation bar.

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

This fixed navigation bar will obscure other content on the page unless you set a padding to the bottom of the <body> element. Tip: The default height of the navigation bar is 50px. such as: body {padding-bottom:70px;}, of course, you can also use your own values.

Response Navigation Bar

In the above example, the navigation bar can only have a good effect on the big screen, in the case of small screen, but also direct all the navigation items directly out of the fit. In order to have a better display effect, the response-style navigation bar design will follow. Let's take a look at the effect first and then analyze it one step at a a while!

Narrow screen, click on the Right button icon to expand, the effect and the above expansion effect in addition to the active state no longer overflow the container, the other basically the same. The implementation code is as follows:

<div class= "NavBar navbar-default" role= "navigation" > <div class= "Navbar-header" > <!--. The Navbar-toggle style is used to toggle the contents of the contraction, that is, the nav-collapse collapse style element--> <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 Navbar-brand shows--> <a href=" # "class=", whether widescreen or narrow screen Navbar-brand ">web Development </a> </div> <!--screen width is less than 768px, The contents of the Div.navbar-responsive-collapse container will be hidden, displaying the Icon-bar icon, and then expanding when the Icon-bar icon is clicked. When the screen is larger than 768px, the default display. --> <div class= "collapse navbar-collapse navbar-responsive-collapse" > <ul class= "Nav navbar-nav" > <l I class= "active" ><a href= "#" >HTML</a></li> <li><a href= "#" >css</a></li > <li><a href= "#" >javascripT</a></li> <li><a href= "#" >PHP</a></li> </ul> </div> </div> 

Analysis:

As with the common navigation bar, the outermost layer uses <div class= "NavBar navbar-default" role= "navigation" > Container packages, mainly. NavBar and. Navbar-default classes.

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

Ensure that the icon style (fixed notation) to be displayed when the screen is narrow:

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

and add data-target= ". Class name/#id名" to the button, is the class name or ID name? decided by the div that needs to be folded. (Here is the key, you can change the above code here, you will find that it cannot be expanded)

Page-Navigation

Pagination navigation can be seen in almost all the websites, good paging navigation can bring users a better amount of user experience, but also can facilitate the crawler in the web search.

Pager with page numbering

Pagination navigation with page numbering should be the most common kind of paging navigation, especially when the content of the list page is many, will give the user with the page numbering pager, in bootstrap use is ul>li>a such structure, in the UL tag add pagination class:

<ul class= "pagination" >
 <li><a href= "#" >«first page </a></li>
 <li><a href= "#" >6</a></li>
 <li class= "active" ><a href= "#" >7</a></li>
 <li ><a href= "#" >8</a></li>
 <li><a href= "#" >9</a></li>
 <li ><a href= "#" >10</a></li>
 <li class= "disabled" ><a href= "#" > Last page»</a> </li>
</ul>

The implementation effect is as follows:

You can see that there will also be hover, active, disabled, and so on, and of course it can be resized: after the. Pagination class in the outer container, Add. PAGINATION-LG make paging navigation larger;. PAGINATION-SM make Paging navigation change Small:

Page Paging navigation

In fact, this way, is not to see the specific page numbers, will only provide a previous page and the next page of the button.

The use of the way is very simple, that is, in the UL tag added pager class:

<ul class= "Pager" >
 <li><a href= "#" >«previous page </a></li>
 <li><a href= "#" > next page»</a></li>
</ul>

It is centered by default, and if we need a left-right display, add two styles: previous let the "back" button reside left, and next let the "next" button reside on the right. (You can also use disabled to indicate a disabled state)

<ul class= "Pager" >
 <li class= "previous disabled" ><a href= "#" >«previous page </a></li>
 <li class= "Next" ><a href= "#" > Next page»</a></li>
</ul>

Other

Label

In some Web pages, a tag is often added to tell the user about additional information, such as adding a new navigation item to the navigation and perhaps adding a "new" tag to tell the user. This is the newly added navigation item.

The bootstrap is specifically designed to extract such effects into a separate label component. You can use inline labels such as <span> to add. Label classes to control the size, and then use the story class to control the highlighted colors such as Label-default, Label-danger, and so on (in the original note, this kind of scenario, Just need to add a different prefix here.

Coat of arms (angular standard)

In fact, and the above label effect is a large part of the similar, generally used as information tips, such as how many unread information, and so on, which we often see in the upper-right corner of unread information prompts. In bootstrap, this effect is described as a badge effect and is implemented using the badge class.

Nesting elements such as links, navigation, and <span class= "badge" > elements, can be very eye-catching to 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 looking at the source, we can find that Bootstrap also uses: empty pseudo elements to set up when there is no content to hide:

. badge:empty {
 Display:none
}

It should be noted that IE8 does not support: Empty selector, so will not be hidden by default;

The badge in the Bootstrap will fit the activation state 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" Badge ">3</span></a></li>
</ul>

About Bootstrap Introduction Books (v) navigation, pagination navigation to introduce you here, I hope to help you!