search

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

Bootstrap implements the default navigation bar effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:23:061484browse

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 c787b9a589a3ece771e842a6176cf8e9 tag
  • Add role="navigation" to the above element to help increase accessibility.
  • Add a header class .navbar-header to the dc6dce4a544fdca2df29d5ac0ea9906b element, which contains an 3499910bf9dac5ae3c52d5ede7383485 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

Related articles

See more