Bootstrap introductory book (5) Navigation bar, paging navigation

Navigation bar

Navigation bar (navbar) and the Bootstrap introductory book - (4) menu, button and navigation introduced in the previous section. Navigation (nav) is only one word different, with an additional word "bar". 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. They collapse (and can be opened and closed) on mobile devices and gradually expand horizontally as the viewport width increases.

Basic navigation bar

Actually, the difference in appearance between navigation bar and navigation is not that big, but in actual use, navigation bar is much more complicated than navigation. Let's implement a basic navigation bar.

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
 <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>

Copy after login

The effect that can be achieved is as follows:

Widescreen:

Narrow screen:

When making a basic navigation bar, pay attention to the following points:

1. First, add the class name .navbar-nav
based on the navigation list (

2. Add a container (div) outside the list. If allowed here, it is recommended to use

and use the class names .navbar and .navbar-default

3. The main function of the navbar class is to set effects such as left and right padding and rounded corners. Use .navbar-default to control the color of the navigation bar, such as .navbar-inverse.

With title, secondary menu

In web page production, you can usually see a title in front of the menu (the text size is slightly larger than other text). In fact, the Bootstrap framework has also taken this into consideration for everyone, through .navbar-header And .navbar-brand to achieve, such as:

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
</div>

Copy after login

Of course it can also be used to make a logo, as described on the Chinese official website, which will not be described in detail here.

Needless to say more about the secondary menu. It has been explained in detail in the previous blog. If you still don’t understand it, you can read my previous blog again. Let’s take a look at the following paragraph. Code and achievable effects: (note that the navbar-inverse navigation bar is used here)

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</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>

Copy after login

The effect is as follows:

With form

We often see search forms in the navigation bar, such as Zhihu, Sina Weibo, etc. Of course, the Bootstrap framework cannot lack such a thing. The method of use is also very simple:

A .navbar-form is provided in the Bootstrap framework. Place a form with the .navbar-form class name in the .navbar container; then add .navbar-left to make the form float left for better alignment.

In Bootstrap, the .navbar-right style is also provided to align elements to the right of the navigation bar.

Copy this code into the code and see the effect:

<form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
</form>

Copy after login

Buttons, text and links

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

1. The button navbar-btn in the navigation bar makes the buttons not in the

vertically centered in the navigation bar

2. The text navbar-text in the navigation bar generally uses the

element to achieve optimal line spacing

3. Normal links in the navigation bar navbar-link, non-navigation links, add this class to have the correct default color and inverse color settings
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.

Fixed navigation bar

Sometimes, we want the navigation bar to be fixed at the top or bottom of the browser. Bootstrap conveniently provides us with two classes to achieve such a style:

.navbar-fixed-top: The navigation bar is fixed at the top of the browser window
.navbar-fixed-bottom: The navigation bar is 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 outermost container (navbar) of the navigation bar.

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

Copy after login

这个固定的导航条会遮住页面上的其它内容，除非你给元素底部设置了 padding 。提示：导航条的默认高度是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还直接把所有的导航项直接展现出来就不适合了。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <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>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="#" class="navbar-brand">WEB开发</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <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>
</div>

Copy after login

分析：

和普通导航条一样，最外层使用

Bootstrap introductory book (5) Navigation bar, paging navigation_javascript skills