这里有新鲜出炉的 Bootstrap v3 教程,程序狗速度看过来!
Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/html 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范,它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA 的 MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。
这篇文章主要介绍了 BootStrap 实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果,非常不错,具有参考借鉴价值, 对 bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
废话不多说了,直接给大家贴代码了,具体代码如下所示:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- bootstrap实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="bootstrap.min.css" rel="stylesheet">
- <style type="text/css">
- .nav-logo{ float: left; height: 40px; margin-top: 5px; overflow: hidden;
- } .nav-logo a{ margin: 0; padding: 0; }
- </style>
- </head>
- <body>
- <!--导航-->
- <div class="navbar navbar-fixed-top navbar-inverse">
- <div class="container">
- <div class="nav-logo">
- <a class="" href="#">
- <img class="img-responsive" src="logo.png" alt="北京市慧谷阳光科技有限公司" style="height: 100%;width: auto;"
- />
- </a>
- </div>
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- </button>
- </div>
- <div class="collapse navbar-collapse navbar-right" id="navBar">
- <ul class="nav navbar-nav">
- <li>
- <a href="#">
- 首页
- </a>
- </li>
- <li>
- <a href="#">
- 公司介绍
- </a>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- 产品中心
- <span class="caret">
- </span>
- </a>
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="#">
- SmartCall智能呼
- </a>
- </li>
- <li>
- <a href="#">
- 运营管理平台OMS
- </a>
- </li>
- <li>
- <a href="#">
- 客户关系管理系统
- </a>
- </li>
- <li>
- <a href="#">
- 电销系统
- </a>
- </li>
- <li>
- <a href="#">
- 知识库管理
- </a>
- </li>
- <li>
- <a href="#">
- 排班管理模块
- </a>
- </li>
- <li>
- <a href="#">
- 考试培训系统
- </a>
- </li>
- <li>
- <a href="#">
- 多媒体调度指挥系统
- </a>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- 行业方案
- <span class="caret">
- </span>
- </a>
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="#">
- 多媒体呼叫中心
- </a>
- </li>
- <li>
- <a href="#">
- 保险行业
- </a>
- </li>
- <li>
- <a href="#">
- 制造行业
- </a>
- </li>
- <li>
- <a href="#">
- 政府部门
- </a>
- </li>
- <li>
- <a href="#">
- 教育行业
- </a>
- </li>
- <li>
- <a href="#">
- 酒店/旅游
- </a>
- </li>
- <li>
- <a href="#">
- 电子商务
- </a>
- </li>
- <li>
- <a href="#">
- 社区服务
- </a>
- </li>
- <li>
- <a href="#">
- 铁路/客运
- </a>
- </li>
- <li>
- <a href="#">
- 医疗卫生
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- 公司新闻
- </a>
- </li>
- <li>
- <a href="#">
- 典型客户
- </a>
- </li>
- <li>
- <a href="#">
- 合作伙伴
- </a>
- </li>
- <li>
- <a href="#">
- 联系我们
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <script src="../assets/js/jquery-2.2.1.min.js">
- </script>
- <script src="bootstrap.min.js">
- </script>
- </body>
- </html>
以上所述是小编给大家介绍的 BootStrap 实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0525/330042.html