Shulou(Shulou.com)06/02 Report--

This article mainly introduces the Bootstrap navigation bar and paging navigation how to achieve, the article is very detailed, has a certain reference value, interested friends must read it!

This article takes you to learn about the navigation bar and paging navigation in Bootstrap, and introduce the tags and badges by the way. I hope it will be helpful to you!

1. The basis of navigation bar

The difference between the navigation bar (navbar) and the navigation described in the previous section (nav) is one word, and the word "bar" is added. In fact, they are still obviously different in the Bootstrap framework. There is a background color in the navigation bar (navbar), and the navigation bar can be pure link (similar to navigation), it can also be a form, there is a combination of form and navigation, and so on.

2. Basic navigation bar

In the Bootstrap box, the navigation bar is not much different from the navigation in appearance, but in practice, the navigation bar is much more complex than navigation.

How to use it:

When making a basic navigation bar, it is mainly divided into the following steps:

Step 1: first add the class name "navbar-nav" to the navigation list (). 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 title, secondary menu and status to the navigation bar

In the production of Web pages, there is often a title in front of the menu (the font size is slightly larger than other text), in fact, the Bootstrap framework has also done this for you to consider, its through "navbar-header" and "navbar-brand" to achieve, this function mainly plays a reminder function, of course, an improvement can be regarded as logo (here do not elaborate too much). Its style is mainly to increase the font setting, and set the maximum width, also in the default navigation bar (navbar-default), the navbar-brand is also done color processing, similarly, in the basic navigation bar for the menu to provide the current state, disabled state, suspension state and other effects, and can also have a secondary menu navigation bar.

4. Navigation bar with form

A "navbar-form" is provided in the Bootstrap framework, which is easy to use by placing a form with the navbar-form class name in the navbar container, and in the Bootstrap framework, providing a "navbar-right" style to align the elements to the right in the navigation bar. There is a condition that takes effect only if the browser window width is greater than 768px.

5. Buttons, text and links in the navigation bar

You can use other elements in the navigation bar of the Bootstrap framework in addition to the an element in navbar-brand and the ul and navbar-form of navbar-nav. The framework provides three other styles:

1) Button navbar-btn in the navigation bar

2) text navbar-text in the navigation bar

3) normal link navbar-link in the navigation bar

However, the use of these three styles in the framework is limited and needs to be used in conjunction with navbar-brand and navbar-nav. And there are certain restrictions on the number, in general, there will be no problem in the use of one or two, more than two will be a problem.

6. Fixed navigation bar

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

☑ .navbar-fixed-top: the navigation bar is pinned to the top of the browser window

☑ .navbar-fixed-bottom: the navigation bar is docked at the bottom of the browser window

The method is easy to use, just append the corresponding class name to the outermost container navbar of the navigation bar.

. I am the content... 7. Responsive navigation bar

Today, the terminal for browsing Web pages is no longer the same, and the navigation bar implemented in the previous example is only suitable for large-screen browsers, but not when the browser screen becomes smaller. Therefore, responsive design follows. Then in a responsive Web page, the responsive navigation bar is also very important.

How to use it:

1) make sure that the content that needs to be folded in the narrow screen must be wrapped in a div, and add two class names collapse and navbar-collapse to the div. Finally, add a class class name or id name to the div.

2) ensure the icon style to be displayed when the screen is narrow (fixed writing):

Toggle Navigation

3) and add data-target= ". Class name / # id name" for button. Is it a class name or an id name? It is determined by the div that needs to be folded.

The div snippet that needs to be collapsed:

...

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

... You can also write this: the div code snippet that needs to be collapsed:...

The icon to display when the screen is narrow:

.. 8. Inverse navigation bar

The inverse navigation bar is actually the second style navigation bar provided by the Bootstrap framework. Compared with the default navigation bar, there is no difference in how to use it, just change the name of the navbar-deafult class to navbar-inverse. The change is only the background color and text of the navigation bar have been modified.

9. Paging navigation (paging navigation with page number)

Paging navigation is visible on almost any website. Good paging navigation can bring users a better user experience. Two types of paging navigation are provided in the Bootstrap framework:

☑ pagination navigation with page number

☑ pagination navigation with page flipping

Paging navigation with page number

Paging navigation with page numbers is probably the most common form of paging navigation, especially when there is too much content on the list page, it will provide users with paging navigation.

How to use it:

Usually, many students like to use div > an and div > span structures to make paging navigation with page numbers. However, a structure such as ul > li > an is used in the Bootstrap framework, adding the pagination method to the ul tag:

«1 2 3 4 5 »10. Paging navigation (paging navigation)

The Bootstrap framework provides paging navigation in addition to paging navigation with page numbers. This kind of paging navigation is often seen on some simple websites, such as personal blogs, magazine websites, etc. This paging navigation does not see the specific page number, but only provides a "previous page" and "next page" buttons.

How to use it:

In practice, paging navigation is similar to paging navigation with page numbers, adding a pager class to the ul tag:

«previous page next page »11, label

In some Web pages, a tag is often added to tell the user 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 a newly added navigation item. Then this effect is deliberately extracted into a label component in the Bootstrap framework and highlighted in the ".label" style. If you are using the a tag element to make it more beautiful, remove the underscore and so on in the hover state. Just add vertical-align: super; to the span tag and you can position the tag in the upper right corner.

How to use it:

It's easy to use. You can use inline tags such as span:

Example heading New12, badge

In a sense, the badge effect is very similar to the label effect introduced earlier. It is also used to do some hints. Often appear are some messages sent by the system, such as you log in to your twitter, if you do not read the message, the system will tell you how much information is unread, in the Bootstrap framework, this effect is called badge effect, using the "badge" style to achieve. However, unlike the tag component, there is no multi-color style effect in the badge component, but you can also quickly customize it through badges.less or _ badges.scss.

How to use it:

There is not much to say about how to use it. You can use the span tag to make it like a tag, and then add the badge class to it:

Inbox 42 and above are all the contents of this article entitled "how to achieve navigation bar and paging navigation in Bootstrap". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.