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="#">运营管理平台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实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏),希望对大家有所帮助
来源:http://blog.csdn.net/mazhili1991/article/details/53406868
0
投稿
猜你喜欢
- 如何最大限度地实现安全登录功能? 具体方法如下(这是一个程序,为便于说明,中间用虚线“------”将代
- 你不得不承认,今天网络发展之迅速,信息流动速度之快、量之大,是我们不曾考虑过的,但现在它就真真切切地摆在我们面前。如何接纳信息,怎么处理、消
- 中间件中间件是放在客户端和服务端的中间。 当你的客户端对某个接口发起一个请求,但是在到达接口2之前,这里是有一层中间件的处理。一般
- 如何用Sleep函数编译一个定时组件?见下: Private Declare Sub Sleep L
- 相关的题外话:一、操作系统window系统内部都是unicode的。文件夹名,文件名等都是unicode的,任何语言系统下都能正常显示。二、
- 我认为在ASP中最好的办法是用编程实现定时刷新Cache,也就是说给Application中储存的设一个过期时间。当然,在ASP中Appli
- alt的准确含义是,当照片不存在或者load错误时的提示。但同时img也同时支持alt和title,再有某些浏览器的错误解析,因此经常被误导
- asp中使用addnew方法添加一条记录后,我们经常使用取得自递增的ID,而使用bookmark很容易实现这样的功能。rs.open&nbs
- 需求如下: 1.模板页右边包含了一个登陆div,想让没登陆的时候这个div显示,登陆后该div隐藏 2.显示一个欢迎用户的div,主要是想通
- 很多人对于CSS都是边干边学习,因为它不像C#之类的语言那么复杂,看起来似乎挺简单,然而正是这种对CSS的不完整的理解,导致了许多的CSS代
- 关于asp缓存函数,类什么的,在网上可以说笔笔皆是,为啥我要不辞辛苦去写一个呢?大概看了下,各有各的优点吧,可是大部分好像不可以缓存数据额,
- 一、函数的变量作用域和可见性1.全局变量在main函数执行之前初始化,全局可见2.局部变量在函数内部或者if、for等语句块有效,使用之后外
- 背景尽管到目前为止HTML4和XHTML1仍能够很好地满足我们的要求,但是它们仍然存在不足。为了满足用户丰富的基于Web应该程序的需要,达到
- 终于能出来透口气,写点东西了。前段太忙,也很郁闷,现在调整过来点了。我的设计原则就是在满足需求的前提下,尽可能的简化,简化,再简化。有一次跟
- 修改my.ini或my.conf,将sql-mode="STRICT_TRANS_TABLES,NO_AUTO_CREATE_US
- 在ACCESS中更改控件的默认属性 Lisa Friedrichsen, 欧弗兰帕克,堪萨斯州 如果您在设计一个Microsoft ACCE
- jQuery.sheet 是一个用于创建 Web 电子表格的 jQuery插件,其功能及界面风格和微软的 Excel 非常相似,使得用户不至
- 1 lambdalambda原型为:lambda 参数:操作(参数)lambda函数也叫匿名函数,即没有具体名称的函数,它允许快速定义单行函
- 我们可使用Haskeys属性判别每个条目是否为一个集合,遍历完整的Request.Cookies集合,以来取得所有cookie的列表及其值:
- 先给大家介绍下Python读取文件夹按数字排序的代码,内容如下所示:python中 os.listdir()方法用于返回指定的文件夹包含的文