Bootstrap_ responsive navbar, hamburger button, overlay

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example - Basic Form</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/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>    
     <!--Navigation-->    
    <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="Beijing XXXX Technology Co., Ltd." 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">  
                    Product Center<span class="caret"></span>  
                </a>  
                <ul class="dropdown-menu" role="menu">  
                    <li><a href="#">SmartCall智能呼</a></li>  
                    <li><a href="#">Operation Management Platform OMS</a></li>  
                    <li><a href="#">Customer Relationship Management System</a></li>  
                    <li><a href="#">电销系统</a></li>  
                    <li><a href="#">Knowledge Base Management</a></li>  
                    <li><a href="#">Shift Management Module</a></li>  
                    <li><a href="#">Exam Training System</a></li>  
                    <li><a href="#">Multimedia dispatch command system</a></li>  
                </ul>  
            </li>  
            <li class="dropdown">  
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
                    Industry Program<span class="caret"></span>  
                </a>  
                <ul class="dropdown-menu" role="menu">  
                    <li><a href="#">Multimedia Call Center</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="#">E-commerce</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>    
	<table class="table" style="margin-top:100px">
	  <caption>Basic table layout</caption>
	  <thead>
		<tr>
		  <th>Name</th>
		  <th>city</th>
		</tr>
	  </thead>
	  <tbody>
		<tr>
		  <td>Tanmay</td>
		  <td>Bangalore</td>
		</tr>
		<tr>
		  <td>Sachin</td>
		  <td>Mumbai</td>
		</tr>
	  </tbody>
	</table>
</body>
</html>

Put in: http://www.runoob.com/try/try.php?filename=bootstrap3-table-basic

Just overwrite the source code and look at it directly.

According to: https://blog.csdn.net/mazhili1991/article/details/53406868 This big brother has changed

The requirement is that when the hamburger button is clicked in the responsive navigation bar, the element below is not directly squeezed to the bottom like the official website, but directly covered.

Bootstrap_ responsive navbar, hamburger button, overlay

Guess you like