search

Home  >  Article  >  Web Front-end  >  Bootstrap implements responsive navigation bar effect_javascript skills

Bootstrap implements responsive navigation bar effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:22:591676browse

In order to add responsive features to the navbar, the content you want to collapse must be wrapped in a dc6dce4a544fdca2df29d5ac0ea9906b 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 45a2772a6b6107b401db3c9b82c049c2 with class .icon-bar create so-called hamburger buttons. These will switch to elements in .nav-collapse dc6dce4a544fdca2df29d5ac0ea9906b. 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>

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

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：Why can't js handle decimal operations correctly? _javascript skillsNext article：Why can't js handle decimal operations correctly? _javascript skills

Related articles

See more