BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPEhtml>
<html>
<head>
<title>bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<linkhref="bootstrap.min.css"rel="stylesheet">
<styletype="text/css">
.nav-logo{
float:left;
height:40px;
margin-top:5px;
overflow:hidden;
}
.nav-logoa{
margin:0;
padding:0;
}
</style>
</head>
<body>
<!--导航-->
<divclass="navbarnavbar-fixed-topnavbar-inverse">
<divclass="container">
<divclass="nav-logo">
<aclass=""href="#">
<imgclass="img-responsive"src="logo.png"alt="北京市慧谷阳光科技有限公司"style="height:100%;width:auto;"/>
</a>
</div>
<divclass="navbar-header">
<buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#navBar">
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
</button>
</div>
<divclass="collapsenavbar-collapsenavbar-right"id="navBar">
<ulclass="navnavbar-nav">
<li><ahref="#">首页</a></li>
<li><ahref="#">公司介绍</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">
产品中心<spanclass="caret"></span>
</a>
<ulclass="dropdown-menu"role="menu">
<li><ahref="#">SmartCall智能呼</a></li>
<li><ahref="#">运营管理平台ＯＭＳ</a></li>
<li><ahref="#">客户关系管理系统</a></li>
<li><ahref="#">电销系统</a></li>
<li><ahref="#">知识库管理</a></li>
<li><ahref="#">排班管理模块</a></li>
<li><ahref="#">考试培训系统</a></li>
<li><ahref="#">多媒体调度指挥系统</a></li>
</ul>
</li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">
行业方案<spanclass="caret"></span>
</a>
<ulclass="dropdown-menu"role="menu">
<li><ahref="#">多媒体呼叫中心</a></li>
<li><ahref="#">保险行业</a></li>
<li><ahref="#">制造行业</a></li>
<li><ahref="#">政府部门</a></li>
<li><ahref="#">教育行业</a></li>
<li><ahref="#">酒店/旅游</a></li>
<li><ahref="#">电子商务</a></li>
<li><ahref="#">社区服务</a></li>
<li><ahref="#">铁路/客运</a></li>
<li><ahref="#">医疗卫生</a></li>
</ul>
</li>
<li><ahref="#">公司新闻</a></li>
<li><ahref="#">典型客户</a></li>
<li><ahref="#">合作伙伴</a></li>
<li><ahref="#">联系我们</a></li>
</ul>
</div>
</div>
</div>
<scriptsrc="../assets/js/jquery-2.2.1.min.js"></script>
<scriptsrc="bootstrap.min.js"></script>
</body>
</html>
以上所述是小编给大家介绍的BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！