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实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)

    利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)

    1.0 为什么要做这个博客站? 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号中,我们中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为宝库:可以借此巩固加强一下自己的"全栈&qu

  • Bootstrap实现响应式导航栏效果

    Bootstrap实现响应式导航栏效果

    为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮.这些会切换

  • BootStrap创建响应式导航条实例代码

    BootStrap创建响应式导航条实例代码

    首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www

  • 谈一谈bootstrap响应式布局

    谈一谈bootstrap响应式布局

    随着移动端的用户越来越多,传统的web系统架构无法兼容很多移动终端的正常使用.在工作中也会发现,现在很多的客户都有在手机.平板等移动终端上使用管理系统的需求.如果单独为每一个终端开发相应的响应网页,这必定增加项目的成本和开发人员的压力.这时候了解响应式布局就很有必要,响应式布局就是为解决多终端问题而生的.本次介绍的是轻量级.开源的.免费的bootstrap. 搭建开发环境 首先下载官网的boostrap源码包:http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有c

  • Bootstrap响应式表格详解

    Bootstrap响应式表格详解

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机 下面是手机端显示的样式 代码如下: 1.test.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link type="text/css"

  • 20分钟成功编写bootstrap响应式页面 就这么简单

    20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备 一.安装 最简单的方式是直接在网页中

  • Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下 1.简介 1)  .环境配置 2)  .提取页面 3).动态生成菜单(无限级别树) 2.系统环境配置  项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读)  运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012  解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.M

  • Bootstrap响应式侧边栏改进版

    Bootstrap响应式侧边栏改进版

    侧边栏在响应式设计中起到很大的作用,当屏幕小到手机的屏幕时,能够自适应屏幕大小的侧边栏固然能够为网站添加色彩,那么在Bootstrap的框架中提供了导航条和下拉菜单的组件,详情请自行到官网Bootstrap的文档查看,这里就不作介绍了. 本文是将其中的导航条和下拉菜单进行结合,然后设计并改进了侧边栏的制作. html: <div class="container"> <nav class="navbar navbar-default mynavbar&quo

  • Bootstrap每天必学之响应式导航、轮播图

    本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分. 基本导航组件+响应式: //基本导航组件+响应式 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class=

  • Bootstrap实现圆角、圆形头像和响应式图片

    Bootstrap实现圆角、圆形头像和响应式图片

    Bootstrap提供了四种用于<img>类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角: .img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形. .img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框. .img-responsive:图片响应式 (将很好地扩展到父元素). 使用: 将类样式直接添加到class中即可

随机推荐