• bootstrap实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏 .nav-logo{ float: left; height: 40px; margin-top: 5px; overflow: hidden; } .nav-logo a{
    <!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="#">运营管理平台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 响应式导航栏 2018-04-12 11:16:31
    导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义...
  • bootstrap响应式页面 2019-09-22 17:58:27
    响应式页面(Responsive web page)2010年提出,是可以智能的根据用户使用的设备来选择排版布局和样式的页面的,就是一套代码适用于多个设备,特点是不会出现横向的滚动条。响应式页面设计其实在实际的应用中并不是...
  • 例子选自... 电脑上的效果:   手机上的效果: ...源代码(要先引用bootstrap才可用): &lt;nav class="navbar navbar-default"&gt; &lt;div c...
  • 目录官方地址其他文档地址浮动响应式浮动整体代码 官方地址 https://getbootstrap.com/docs/4.4/utilities/float/ 其他文档地址 菜鸟教程 https://www.runoob.com/bootstrap4/bootstrap4-utilities.html ...
  • 【温故知新】——Bootstrap响应式知识点复习 前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创。  开发工具 1、记事本,Editplus,... ... 2、Sublime,...
  • 一、示例 1、主页 2、博客详情页 3、在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上。 如果你只是做一些简单的静态项目做展示,付出这么大的时间和经济成本去专门购买一台...
  • 菜单样式bootstrap 2016-08-21 19:47:10
    因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使http://write.blog.csdn.net/postedit?ref=toolbar用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。 1.下拉菜单:  ...dropdown ...
  • Bootstrap官网教程整理 2020-06-02 23:31:31
    Bootstrap 响应式实用工具 86 打印类 86 实例 86 Bootstrap 字形图标(Glyphicons) 89 什么是字形图标(Glyphicons)? 89 获取字形图标(Glyphicons) 89 CSS 规则解释 89 用法 91 带有导航栏的字形图标...
  • 这周的很多时间是花在了bootstrap上,把慕课网的基础教学部分看完了,然后看了一下有响应式的部分以及简单看了一下回到顶部按钮是怎么实现的。 基础部分讲的都是一些API如何应用,如果可以很好地应用,可以用很少的...
  • Bootstrap导航栏实例讲解 2015-10-30 21:55:38
    导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义...
  • 基础导航条 要制作一个基础导航条,要在制作导航的列表基础上添加类名“navbar-nav”,然后在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”。例如: div class="navbar navbar-...
  • Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签网格选项row :行col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])col-*-offset-* :列偏移(第一...
  • Bootstrap自适应导航栏 2016-01-11 17:31:12
    Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏 1、向 标签添加 class .navbar、.navbar-default。 2、向上面的元素添加 role="navigation",有助于增加可...
  • bootstrap 常用类名 2019-07-02 10:49:30
    bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签 网格选项 row :行 col-X-X: 列 (第一个X可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个X必须为12以内的[列数]) col-X-offset-X :列偏移...
  •  之所以出现这种情况是因为在html中将汉堡菜单和logo写在了同一个div里,并且这两个在booterstrap样式里是分别左右浮动。  为了达到原图所要的效果,得用到booterstrap中另一个重要的概念:栅格系统。
  • Bootstrap笔记 2017-09-23 21:25:37
    移动设备优先:,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">!...Bootstrap 网格系统1、行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。2、使用行来创建列的
  • BootStrap基础知识学习-No.1 2016-12-06 09:43:50
    Bootstrap基础知识!
  • 想实现鼠标移入导航栏时从透明状态恢复不透明状态 但发现在经过轮播图时整个导航栏会被覆盖 发现原因出现在轮播图的这句代码中 目前没有找到解决办法 ...
1 2 3 4 5 ... 20
收藏数 864
精华内容 345