转载

响应式自动折叠的导航条

响应式的导航栏

小屏幕自动折叠。为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。

响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。

折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。

第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。

三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。

下面的实例演示了这点：

 
  1.  
  2. <!DOCTYPE html> 
  3. <html> 
  4. <head> 
  5.    <title>Bootstrap 实例 - 响应式的导航栏</title> 
  6.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  7.    <script src="/scripts/jquery.min.js"></script> 
  8.    <script src="/bootstrap/js/bootstrap.min.js"></script> 
  9. </head> 
  10. <body> 
  11.  
  12. <nav class="navbar navbar-default" role="navigation"> 
  13.    <div class="navbar-header"> 
  14.       <button type="button" class="navbar-toggle" data-toggle="collapse"  
  15.          data-target="#example-navbar-collapse"> 
  16.          <span class="sr-only">切换导航</span> 
  17.          <span class="icon-bar"></span> 
  18.          <span class="icon-bar"></span> 
  19.          <span class="icon-bar"></span> 
  20.       </button> 
  21.       <a class="navbar-brand" href="#">W3Cschool</a> 
  22.    </div> 
  23.    <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  24.       <ul class="nav navbar-nav"> 
  25.          <li class="active"><a href="#">iOS</a></li> 
  26.          <li><a href="#">SVN</a></li> 
  27.          <li class="dropdown"> 
  28.             <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  29.                Java <b class="caret"></b> 
  30.             </a> 
  31.             <ul class="dropdown-menu"> 
  32.                <li><a href="#">jmeter</a></li> 
  33.                <li><a href="#">EJB</a></li> 
  34.                <li><a href="#">Jasper Report</a></li> 
  35.                <li class="divider"></li> 
  36.                <li><a href="#">分离的链接</a></li> 
  37.                <li class="divider"></li> 
  38.                <li><a href="#">另一个分离的链接</a></li> 
  39.             </ul> 
  40.          </li> 
  41.       </ul> 
  42.    </div> 
  43. </nav> 
  44.  
  45.  
  46. </body> 
  47. </html> 

浏览器折叠后或小屏幕浏览时的效果如下：

响应式自动折叠的导航条

为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

正文到此结束
所属分类： bootstrap3

热门推荐

相关文章

阿里云首购8折
bootstrap3
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 Maven教程 springcloud-demo java-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用screw来对比数据库表和字段差异
  2. 2 Spring Boot 实现防盗链功能
  3. 3 在Spring Boot中的实现国际化（i18n）
  4. 4 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  5. 5 Spring Boot 3.x嵌入MongoDB 进行测试
  6. 6 java如何解析和生成yaml文件？
  7. 7 java如何解析和生成sql？
  8. 8 Spring Cloud Zookeeper 快速入门demo
  9. 9 如何在 Spring Cloud 集成 Micrometer Tracing?
  10. 10 如何利用EasyExcel导出带有选择校验框的excel？
网站信息
  • 文章总数：82,731 篇
  • 文件总数：284,305 个
  • 标签总数：2,414 个
  • 分类总数：85 个
  • 留言数量：2,558 条
  • 在线人数：680 人
  • 运行天数：4,435天
  • 最后更新：2024年12月18日15点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG