Bootstrap实现响应式导航栏效果

前端技术 2023/09/02 JavaScript

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。
效果图：

下面的实例演示了这点：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/3280

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案