Home >Web Front-end >JS Tutorial >Bootstrap implements the default navigation bar effect_javascript skills

Bootstrap implements the default navigation bar effect_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 15:23:061559browse

The navigation bar is a great feature and a prominent feature of a Bootstrap website. Navigation bar is a responsive meta component that serves as the navigation header of an application or website. The navigation bar collapses in mobile viewports and expands horizontally as the available viewport width increases. At its core, the Bootstrap navigation bar includes defining styles for the site name and basic navigation.
The steps to create a default navigation bar are as follows:

Add class .navbar, .navbar-default (black text on white background), navbar-inverse (white text on black background) to the
tag
Add role="navigation" to the above element to help increase accessibility.

Add a header class .navbar-header to the

element, which contains an element with class navbar-brand. This will make the text appear larger.

To add links to the navigation bar, simply add an unordered list with class .nav, .navbar-nav.

The following example demonstrates this:

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 默认的导航栏</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
 
<nav class="navbar navbar-inverse" role="navigation"> 
 <div class="navbar-header"> 
 <a class="navbar-brand" href="#">林炳文在此～</a> 
 </div> 
 <div> 
 <ul class="nav navbar-nav"> 
  <li class="active"><a href="#">导航一</a></li> 
  <li><a href="#">导航二</a></li> 
  <li class="dropdown"> 
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  下拉菜单 
  <b class="caret"></b> 
  </a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">我是谁呢？</a></li> 
  <li><a href="#">我也不知道</a></li> 
  <li><a href="#">你是谁呢？</a></li> 
  <li class="divider"></li> 
  <li><a href="#">分离的链接</a></li> 
  <li class="divider"></li> 
  <li><a href="#">另一个分离的链接</a></li> 
  </ul> 
  </li> 
 </ul> 
 </div> 
</nav> 
</body> 
</html>

The effect is as follows:

Put it

<nav class="navbar navbar-inverse" role="navigation">

changed to

<nav class="navbar navbar-default" role="navigation">

The effect is as follows:

The above is the code for Bootstrap to implement the default navigation bar effect. I hope it will be helpful to everyone's learning.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript imitation Alipay password input box_javascript skillsNext article：JavaScript imitation Alipay password input box_javascript skills

See more

Bootstrap implements the default navigation bar effect_javascript skills

Related articles