BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
作者：孤烟淡酒 发布时间：2023-08-29 17:16:11
标签：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="#">运营管理平台ＯＭＳ</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
0
投稿猜你喜欢
- select a.*,b.SumPoint from Expert_Topic_Index a,(
1 。打开您的Microsoft Visual Basic:点击确定,以下就按照蓝色的数字步骤.2 。修改工程名和类模块的名称:- 今天尝试着将引用文献的格式按照IEEE的标准重新排版，感觉手动一条一条改太麻烦，而且很容易出错，所以尝试着用Python写了一个小程序用于根
- 现在有一个员工字典，类似这样的结构staff_dic = {"name":"灭霸", "a
- 我是用来移动图片的，其他格式的文档也是可以的，改下后缀列表就可以了import os,shutilimport datetime
- 一、pyqt5的UI中嵌入matplotlib的方法1、导入模块导入模块比较简单，首先声明使用pyqt5，通过FigureCanvasQTA
- 基本介绍pandas是Python数据挖掘、数据分析中常用的库。而DataFrame生成excel中的sheet表，以及在excel中增加s
- 阅读上一篇：FrontPage XP设计教程3——网页的布局 FrontPage XP可以保证用户设计网页与不同的浏览器兼容，它所提供的样式
- <!DOCTYPE html><html lang="en"><head> <
- 很多时候，希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时，会把连续的空格解析成一个，所以我们会使用
- 我就废话不多说了，直接上代码吧！# -*- coding: utf-8 -*-import pandas as pdimport matpl
- Oracle的分析函数功能非常强大，工作这些年来经常用到。这次将平时经常使用到的分析函数整理出来，以备日后查看。我们拿案例来学习，这样理解起
- 是在CSDN论坛看到的一个问题，平常我也没有注意，或者说没有这样用吧。看代码 <body id="ww
- 如何计算方差简单展示一下pandas里怎么计算方差：官方文档：def def_std(df): for ix,row in df
- 前言编写条件分支代码是编码过程中不可或缺的一部分。如果用道路来做比喻，现实世界中的代码从来都不是一条笔直的高速公路，而更像是由无数个岔路口组
- 导入线程包import threading准备函数线程，传参数t1 = threading.Thread(target=func,args=
- Howdy, 大家好，又是我~ 上一次我们简单的谈了一下font set和一些要注意的基本问题。今天我们继续字体这一话题，深入讲讲上次提到
- 网易云音乐排行榜歌曲及评论爬取主要注意问题：selenium 模拟登录、iframe标签定位、页面元素提取。在利用selenium定位元素并
- 前段时间练习过的一个小项目，今天再看看，记录一下~项目结构说明：datefile文件夹：保存车辆信息表的xlsx文件file文件夹：保存图片
- 本文实例讲述了PHP cookie，session的使用与用户自动登录功能实现方法。分享给大家供大家参考，具体如下：cookie的使用//生
