Bootstrap implements responsive navigation bar effect_javascript skills-JS Tutorial-php.cn

Bootstrap implements responsive navigation bar effect_javascript skills

WBOY

Release： 2016-05-16 15:22:59

Original

1684 people have browsed it

In order to add responsive features to the navbar, the content you want to collapse must be wrapped in a

with classes .collapse, .navbar-collapse. The collapsed navigation bar is actually a button with class .navbar-toggle and two data- elements. The first is data-toggle, which tells JavaScript what to do with the button, and the second is data-target, which indicates which element to switch to. Three with class .icon-bar create so-called hamburger buttons. These will switch to elements in .nav-collapse

. In order to achieve these features, you must include the Bootstrap Collapse plugin.
Rendering:

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-default" role="navigation"> 
 <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse"> 
   <span class="sr-only">切换导航</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">12345</a> 
 </div> 
 <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">iOS</a></li> 
   <li><a href="#">fgghh</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    Java <b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">vgghhr</a></li> 
    <li><a href="#">dg</a></li> 
    <li><a href="#">sfg</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>

Copy after login

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

Related labels：

bootstrap navigation

source：php.cn

Previous article：Why can't js handle decimal operations correctly? _javascript skills Next article：Implementation of month selection plug-in based on jQuery with source code download_jquery

Statement of this Website

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