1. Basic navigation bar

The navbar is one more word than the nav in the last section. In fact, there are obvious differences in the Bootstrap framework. The navbar has a background color, and the navbar can be a pure link (similar to navigation), a form, or a combination of forms and navigation.

2. Basic navigation bar

In the Bootstrap box, the navigation bar and navigation are not very different in appearance, but in real use, the navigation bar is much more complicated than the navigation.

Usage:

In the production of a basic navigation bar, mainly divided into the following steps:

Step 2: Add a container (div) outside the list and use the class names “navbar” and “navbar-default”.

Principle analysis:

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

3. Add the title, secondary menu and status for the navigation bar

In Web page creation, it is common to have a title in front of the menu (the text size is slightly larger than other text). In fact, the Bootstrap framework also provides this for you. It uses “navbar-header” and “Navbar-brand” to implement this function. Of course, the improvement could be a logo(not too much here). In the navbar-default navigation bar, the color of the Navbar-brand is also changed. In the same way, the menus in the basic navigation bar are provided with current, disabled, and hover effects. It can also have a navigation bar with a secondary menu.

4. Navigation bar with forms

The Bootstrap framework also provides a “navbar-Form” style that aligns elements to the right of the navigation bar. It is simple to place a form with the class name navbar-Form in the navBar container. There is a condition that only works if the browser window width is larger than 768px.

Buttons, text, and links in the navigation bar

In addition to navbar-brand’s A element and Navbar-Nav’s UL and Navbar-form, the Bootstrap framework can use other elements in its navigation bar. The framework provides three other styles:

1) The button navbar-bTN in the navigation bar

2) Navbar-text in the navigation bar

3) Navbar-link in the navigation bar

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 limits to the number, the general situation in the use of one to two will not have a problem, more than two will have a problem.

6. Fix the navigation bar

In many cases, the designer wants the navigation bar to be fixed at the top or bottom of the browser. This kind of fixed navigation bar application is more common in mobile development. The Bootstrap framework provides two ways to fix the navigation bar:

Navbar-fixed-top: The navigation bar is fixed at the top of the browser window

The navbar-fixed-bottom navigation bar is fixed at the bottom of the browser window

To use this method, you simply need to append the corresponding class name to navbar, the outer container of the navigation bar.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">... </div> <div class="content"> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">... </div>Copy the code

Responsive navigation bar

The terminal for browsing Web pages is no longer the same. The navigation bar implemented in the previous example works only with browsers with large screens, but it doesn’t work when the browser screen is smaller. Hence responsive design. In a responsive Web page, a responsive navigation bar is very important.

Usage:

1) Make sure that everything you want to collapse on a narrow screen is enclosed in a div, and give it the class name of Collapse and Navbar-Collapse. Finally, add a class or ID name to the div.

2) Ensure the icon style to be displayed in narrow screen (fixed writing method) :

<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>Copy the code

3) Add data-target=”. Class name /#id name “to button. Depends on which div you want to fold.

Div snippets to collapse:

<div class="collapse navbar-collapse" id="example"> <div class="collapse navbar-collapse" id="example">... </ul> </div>Copy the code

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

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example"> ... <div class="collapse navbar-collapse example" > <div class="collapse navbar-collapse example" > <div class="collapse navbar-collapse example" > </ul> </div>Copy the code

ICONS to display on a narrow screen:

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>
Copy the code

8. Invert color navigation bar

Invert-color navigation bars are the second type of navigation bar provided by the Bootstrap framework. They can be used in the same way as the default navigation bar, except that they change the navbar-Deafult class name to Navbar-Inverse. The only changes are the background color and text of the navigation bar.

9. Paging navigation (paging navigation with page numbers)

Paging navigation can be seen on almost any web site. Good paging navigation can lead to a better user experience. There are two types of paging navigation provided in the Bootstrap framework:

Paging navigation with page numbers

Paging navigation with page turning

Paging navigation with page numbers

Paging navigation with page numbers is probably the most common type of paging navigation, especially when the list page content is very large, will provide the user with paging navigation.

Usage:

Many students like to use div> A and DIV >span structure to make paging navigation with page numbers. For 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>Copy the code

10. Pagination navigation (pagination navigation)

The Bootstrap framework provides page-turning navigation in addition to page-numbered paging navigation. This type of paging navigation is often found on simple websites such as personal blogs, magazine sites, etc. This type of paging navigation does not see specific page numbers, but only provides a “previous” and “next” button.

Usage:

In practice, paging navigation is similar to paging navigation with page numbers. Add a pager class to ul tags:

<ul class="pager"> <li><a href="#">&laquo; < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important;" </a></li> </ul>Copy the code

11, labels,

In some Web pages, it is common to add a tag to tell the user some additional information. For example, when a new navigation item is added to the navigation, it may add a “new” tag to tell the user. This is the newly added navigation item. The Bootstrap framework is designed to extract this effect as a label component and highlight it with a “.label “style. If you use the a tag element, in order to make it more beautiful, remove the underline and so on in the hover state. Just add vertical-align: super to the span tag; The tag is positioned in the upper right corner.

Principle of use:

To do this, you can use an in-line tag like span:

<h3>Example heading <span class="label label-default">New</span></h3>
Copy the code

12, badges

In a sense, the badge effect is very similar to the tag effect described earlier. It is also used to do some prompt information. What happens is that the system sends a message, for example, when you log in to your Twitter account, if you don’t read the message, the system will tell you how much message you have unread. In the Bootstrap framework, this effect is called badge effect, and you implement it using a badge style. Unlike the tag component, the badges component doesn’t provide multiple colors and styles, but you can quickly customize them by using badges. Less or _reads.scss.

Usage:

How to use it, there is not much to say about it, you can use the span tag just like the tag, and then add badge class for it:

<a href="#">Inbox <span class="badge">42</span></a>
Copy the code

The appendix

Read the original: blog.mazey.net/2195.html