This article will help you learn the navigation bar and paging navigation in Bootstrap

This article will take you through the navigation bar and paging navigation in Bootstrap, and introduce labels and badges by the way. I hope it will be helpful to everyone!

1. Basics of navigation bar

The navigation bar (navbar) is different from the navigation (nav) introduced in the previous section. One word, one more word "tiao". 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 a pure link (similar to navigation), a form, or a combination of form and navigation. [Related recommendations: "bootstrap tutorial"]

2. Basic navigation bar

In the Bootstrap box, the navigation bar and navigation are visually The difference is not too big, but in actual use the navigation bar is much more complicated than navigation.

How to use:

When making a basic navigation bar, there are mainly the following steps:

Step one: First, make the navigation bar Add the class name "navbar-nav" based on the list (73a72cdc17fc2b29bb35d64b4687fa7c) Step 2: Add a container (div) outside the list, and use the class names "navbar" and "navbar-default"

Principle analysis:

And navigation The color of the bar is controlled through ".navbar-default".

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

In Web page production, there is often a title in front of the menu (the text font size is larger than other The text is slightly larger). In fact, the Bootstrap framework has also considered this aspect for everyone. It is implemented through "navbar-header" and "navbar-brand". This function mainly serves as a reminder function. Of course, it can be regarded as an improvement after improvement. logo (not to elaborate too much here). The main style is to increase the font setting and set the maximum width. Also under the default navigation bar (navbar-default), the navbar-brand is also color processed. Similarly, the menu is provided in the basic navigation bar. Current state, disabled state, suspended state and other effects, and can also have a navigation bar with a secondary menu.

4. Navigation bar with form

provides a "navbar-form" in the Bootstrap framework. The method of use is very simple. Place a navigation bar with a form in the navbar container. For forms with the navbar-form class name, the Bootstrap framework also provides the "navbar-right" style to align the elements to the right of the navigation bar. There is a condition here, which only takes effect when the browser window width is greater than 768px.

5. Buttons, text and links in the navigation bar

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

1) Button in navbar navbar-btn

2) Text in navbar navbar-text

3) Navigation bar Ordinary links in navbar-link

However, these three styles are subject to certain restrictions when used in the framework and need to be used in conjunction with navbar-brand and navbar-nav. There is also a certain limit on the quantity. Generally, there will be no problem if you use one or two, but there will be problems if you use more than two.

6. Fixed navigation bar

One of many situations, designers want the navigation bar to be fixed at the top or bottom of the browser. The application of this fixed navigation bar is in 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

☑ .navbar-fixed-bottom: The navigation bar Fixed at the bottom of the browser window

The method of use is very simple. You only need to append the corresponding class name to the navbar, the outermost container of the navigation bar.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

7. Responsive navigation bar

Nowadays, the terminal for browsing Web pages is no longer the same. The navigation bar implemented in the previous example can only be adapted to A browser with a large screen, but when the browser screen becomes smaller, it is not suitable. So responsive design follows. So in a responsive Web page, the responsive navigation bar is very important.

Usage:

1) Ensure that the content that needs to be folded in a narrow screen must be wrapped in a div, and add collapse and navbar-collapse to this div. Two class names. Finally, add a class name or id name to this 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>

3) And add data-target=".class name/#id name" to the button, Is it the class name or the id name? Determined by the div that needs to be folded.

The div code segment that needs to be folded:

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>也可以这么写，需要折叠的div代码段：<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时要显示的图标：

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

8、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。 

9、分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：  

☑   带页码的分页导航  

☑   带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

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

10、分页导航（翻页分页导航）

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

使用方法：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

11、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类。只要在span标签上添加vertical-align: super; 就可以实现标签定位在右上角了。

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

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

12、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

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

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

The above is the detailed content of This article will help you learn the navigation bar and paging navigation in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!