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="北京市XXXX科技有限公司" 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实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏相关推荐

响应式导航栏和响应式底部
使用前端框架Semantic UI实现导航栏和底部的响应功能,效果图如下: 正常网页展示: 手机端响应: 导航栏折叠: 底部手机端展示: 前端代码如下: <!DOCTYPE html> & ...
【css】响应式布局 @media媒介适配平板手机
// 大型设备(大台式电脑,1200px 起) @media screen and (min-width:1200px) {//... }// 中型设备(台式电脑,992px 起) @media sc ...
初学Bootstrap，制作响应式布局
Bootstrap是目前比较受欢迎的前端框架.它是基于 HTML.CSS.JAVASCRIPT 的,简洁灵活.因为在前几个月的学习中有了解到Bootstrap,并且当时就使用Bootstrap制作了简 ...
20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
css学习12：过渡、变化、动画、响应式布局
元素的动效二十二.过渡 transition 在英文中是过渡的意思,过渡可以为一个元素在不同状态之间切换不同的过渡效果.它由四个部分构成,分别是:过渡属性的名称,过渡需要的时间,过渡的方式和过渡的延 ...
面试之响应式布局（转载）
响应式布局介绍参考:维基百科,CSS3 @media 查询,Bootstrap中文官网,鄙视IE,2014年5个最流行前端框架对比,自适应网页设计-阮一峰,响应式网页设计,响应式布局-百度百科,响应 ...
vue如何获取年月日_BootstrapVue——Vue和Bootstrap的相结合，构建响应式应用更简单...
介绍 BootStrap是世界上最受欢迎的构建响应式移动优先网站的框架,Vue是当前最流行的前端框架之一,BootstrapVue则是将两者相结合,使用BootstrapVue,可以使用Vue.js和 ...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...

bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏

bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏相关推荐

最新文章

热门文章