bootstrap伸缩导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="css/action.css"/>-->
        <!--<script type="text/javascript" src="script/require.js" data-main="script/main.js"></script>-->
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <title>测试</title>
    </head>
    <body>
        <div class="navbar navbar-fixed-top navbar-inverse" >  
      <div class="container">  
          <div class="nav-logo">
            <a class="" href="#">
                <img class="img-responsive" 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>
    </body>
 <script type="text/javascript" src="script/jquery/jquery-3.2.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</html>

猜你喜欢

转载自blog.csdn.net/aliven1/article/details/88052947