转载

响应式自动折叠的导航条

响应式的导航栏

小屏幕自动折叠。为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 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教程 Java设计模式 Jenkins进阶系列 openfire参考指南 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 Ant教程 java实例教程 SpringCloud Elastic-Job-Lite XStream教程 深入浅出MyBatis Hazelcast教程 springcloud-demo ibaties教程 SVN教程 rabittmq教程 WebService CXF学习 solr教程 Hadoop教程 JPA教程 ActiveMQ中文指南 java-demo Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 Python3访问MySQL数据库快速入门Demo
  2. 2 Github开源项目作者可以免费申请 JetBrains 全家桶
  3. 3 Spring Cloud Vault快速入门Demo
  4. 4 Spring Cloud Gateway快速入门Demo
  5. 5 Spring Cloud Contract快速入门Demo
  6. 6 Spring Cloud Consul快速入门Demo
  7. 7 Spring Boot集成SQL Server快速入门Demo
  8. 8 如何自己实现事件的订阅和发布呢？
  9. 9 Java字节码增强库ByteBuddy
  10. 10 如何找出爬取网站的罪魁祸首？
网站信息
  • 文章总数：82,712 篇
  • 文件总数：284,281 个
  • 标签总数：2,391 个
  • 分类总数：85 个
  • 留言数量：2,560 条
  • 在线人数：610 人
  • 运行天数：4,404天
  • 最后更新：2024年11月17日23点
Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号 HBLOG HBLOG