BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
作者：孤烟淡酒 时间：2023-08-29 17:16:11
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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="#">运营管理平台ＯＭＳ</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实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏），希望对大家有所帮助
来源：http://blog.csdn.net/mazhili1991/article/details/53406868
标签：bootstrap,响应式,导航栏
0
投稿猜你喜欢
Dojo Style Javascript 编程规范
2007-10-25 17:24:00
Python编解码问题及文本文件处理方法详解
2021-04-13 07:52:06
sqlserver中Case的使用方法(上下篇)第1/2页
2024-01-19 06:29:18
由日文出错的Bug，重新认识 Replace 函数
2009-07-07 22:28:00
javascript设计模式 – 桥接模式原理与应用实例分析
2024-04-26 17:12:09
使用Python处理Excel表格的简单方法
2023-12-07 08:05:04
MyBatis实现MySQL批量插入的示例代码
2024-01-14 01:48:23
css把超出的部分显示为省略号的方法兼容火狐
2010-10-07 09:02:44
在 TypeScript 中使用泛型的方法
2023-08-23 21:55:00
合理设置内存让数据库与其他程序共存
2009-05-21 16:24:00
千篇一律的JS运算符讲解,一起来看看
2024-05-13 10:06:52
python 调试器pdb的简单使用
2023-08-03 19:13:20
Python实现比较两个列表(list)范围
2022-07-20 18:08:04
后端算法题解LeetCode前缀和示例详解
2023-03-16 17:31:54
MySQL Workbench安装及使用详解
2024-01-27 10:52:15
Python通过matplotlib画双层饼图及环形图简单示例
2021-09-14 11:08:18
安全校验Session验证码并避免绕开验证码攻击
2022-06-30 20:15:41
趣用文化元素
2009-09-03 11:53:00
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2022-03-06 05:52:27
ASP XMLDom在服务器端操作XML文件的主要方法和实现
2011-03-09 11:09:00