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="css/bootstrap.css" rel="stylesheet">  //注意自己的路径

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> //同上

    <script type="text/javascript" src="js/bootstrap.min.js"></script>  //同上

    <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" style="background-color: aquamarine;">

      <div class="container">

          <div class="nav-logo">

            <a class="" href="#">

                <img class="img-responsive" src="" alt="中国XX科技有限公司" 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="#">多媒体呼叫中心</a></li>

                    <li><a href="#">保险行业</a></li>

                    <li><a href="#">制造行业</a></li>

                </ul>

            </li>

            <li><a href="#">典型客户</a></li>

            <li><a href="#">联系我们</a></li>

          </ul>

        </div>

      </div>

    </div>

</body>

</html>

这是pc端的页面效果：

这是phone端的效果：

Bootstrap 前端框架 遇到的问题 解决方案的更多相关文章

  1. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架：

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...

  2. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  3. bootCDN引用的bootstrap前端框架套件和示例

    这是bootCDN上引用的bootstrap前端框架套件,由多个框架组合而成,方便平时学习和测试使用.生产环境要仔细琢磨一下,不要用开发版,而要用生产版.bootCDN的地址是:https://www ...

  4. BootStrap前端框架

    BootStrap前端框架 Bootstrap 教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html BpptStrap操作手册:htt ...

  5. Bootstrap前端框架快速入门专题

    1.Bootstrap简介 Bootstrap,出自自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 W ...

  6. bootstrap 前端框架学习笔记

    下面是一个基于 bootstrap 前端架构的最最基本的模板: (这里添加慕课网的学习笔记.) 1.认识一下 bootstrap 带来的优雅效果: 代码: <!DOCTYPE html> ...

  7. bootstrap前端框架使用总结分享

    1.bootstrap 排版 全局样式style.css: 1.移除body的margin声明 2.设置body的背景色为白色 3.为排版设置了基本的字体.字号和行高 4.设置全局链接颜色,且当链接处 ...

  8. django使用bootstrap前端框架

    一.下载bootstrap相关文件,放在项目目录中.在blog 应用中新建static目录,bootstrap文件放在此目录下. bootstrap下载网址:http://v3.bootcss.com ...

  9. MUI - sortable在mui.js前端框架不兼容的解决方案

    关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github

随机推荐

  1. python黑科技：还在为没有wifi而烦心吗？这篇文章解决你的困扰

    python作为一门高级编程语言,它的定位是优雅.明确和简单.阅读Python编写的代码感觉像在阅读英语一样,这让使用者可以专注于解决问题而不是去搞明白语言本身.Python虽然是基于C语言编写,但是 ...

  2. mfc启动画面

    目标 用一张位图来作为启动画面,在进入程序时显示. 策略 在应用程序类的I n i t I n s t a n c e ()函数中,在最早时刻创建启动窗口.启动窗口用一个位图类显示在普通窗口中. 步骤 ...

  3. JavaSE-管道流

    1,)创建管道输出流PipedOutputStream pos和管道输入流PipedInputStream pis 2,)将pos和pis匹配,pos.connect(pis); 3,)将pos赋给信 ...

  4. iPhone6 AirDrop找不到我的mac解决方法！注销mac和iPhone的icloud账号

    注销mac和iPhone的icloud账号,icloud 会自动同步个人热点,个人热点开启状态,mac 和 iPhone 无法看到对方!

  5. 【STM32H7教程】第9章 STM32H7重要知识点数据类型，变量和堆栈

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第9章   STM32H7重要知识点数据类型,变量和堆栈 ...

  6. CART决策树和随机森林

    CART 分裂规则 将现有节点的数据分裂成两个子集,计算每个子集的gini index 子集的Gini index: \(gini_{child}=\sum_{i=1}^K p_{ti} \sum_{ ...

  7. 为自己搭建一个分布式 IM 系统二【从查找算法聊起】

    前言 最近这段时间确实有点忙,这篇的目录还是在飞机上敲出来了的. 言归正传,上周更新了 cim 第一版:没想到反响热烈,最高时上了 GitHub Trending Java 版块的首位,一天收到了 3 ...

  8. 『Möbius函数与Möbius反演』

    Möbius函数 定义 设正整数\(n\)算数基本定理分解后为\(n=\prod_{i=1}^{k}p_i^{a_i}\),定义函数 \[ \mu(n)= \begin{cases} 0\ \ (\e ...

  9. 我敢说你不一定完全理解try 块，catch块，finally 块中return的执行顺序

    大家好,今天我们来讲一个笔试和面试偶尔都会问到的问题,并且在工作中不知道原理,也会造成滥用. 大家可能都知道,try 块用来捕获异常,catch块是处理try块捕获的异常,finally 块是用来关闭 ...

  10. Spring Boot入门(六)：使用MyBatis访问MySql数据库(注解方式)

    本系列博客记录自己学习Spring Boot的历程,如帮助到你,不胜荣幸,如有错误,欢迎指正! 本篇博客我们讲解下在Spring Boot中使用MyBatis访问MySql数据库的简单用法. 1.前期 ...