Navigation bar that Bootstrap must learn every day (2)_javascript skills

1. Basic navigation bar

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

Step 1: First, add the class name “navbar-nav” based on the navigation list (

)

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


<div class="navbar navbar-default">
 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>
 <!-- 基础导航条-->
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

1. In Web page production, there is often a title in front of the menu (the text size is slightly larger than other text), which is implemented through "navbar-header" and "navbar-brand".

 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>

2. The secondary menu is implemented through

nesting.

 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>

3. A "navbar-form" is provided in the Bootstrap framework. The method of use is very simple. Place a form with the navbar-form class name in the navbar container.

"navbar-left" makes the form float left, and "navbar-right" style aligns the elements to the right in the navigation bar.


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

2. Inverted navigation bar

The inverse navigation bar is actually the second style of navigation bar provided by the Bootstrap framework. It just replaces the "navbar-deafult" class name with "navbar-inverse".

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="">首页</a></li>
 <li><a href="">教程</a></li>
 <li><a href="">关于我们</a></li>
 </ul>
</div>




3. Fixed navigation bar

One of the many situations where designers want the navigation bar to be fixed at the top or bottom of the browser.

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 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 navbar, the outermost container of the navigation bar.


<!--导航条固定在浏览器窗口顶部-->
<div class="navbar navbar-default navbar-fixed-top">
 　…
</div>
<!--导航条固定在浏览器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
 　…
</div>

4. Responsive navigation bar


<div class="navbar navbar-default">
 <div class="navbar-header">
 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo">
 <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">LOGO</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse" id="demo">
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 </div>
</div>

In widescreen mode:



In narrow screen mode:



Usage:

1. Ensure that the content that needs to be folded in narrow screen must be wrapped in a div, and add two class names of collapse and navbar-collapse to this div. 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. Add data-target=".class name/#id name" to the button

Friends who want to know more about Bootstrap can click "bootstrap Learning Tutorial" for in-depth study.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

You can also combine "Bootstrap navigation bar that you must learn every day" to learn.