bootstrap4.2 navigation search box

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
        <style>
        div>form>ul>.list>a:hover{
        background: #337ab7;
        }
        </style>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script> <div class="container"> <form class="navbar-form navbar-left"> <ul class="nav nav-tabs"> <li class="dropdown list"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 首页 </a>








<ul class="dropdown-menu">


<li class="active">
<a href="#">菜单一</a>
</li>
<li>
<a href="#">菜单二</a>
</li>


</ul>
</li>


<li class="dropdown list">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
官网
</a>
<ul class="dropdown-menu">


<li class="active">
<a href="#">菜单三</a>
</li>
<li>
<a href="#">菜单四</a>
</li>


</ul>
</li>


<li class="dropdown list">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
关于
</a>
<ul class="dropdown-menu">


<li class="active">
<a href="#">菜单五</a>
</li>
<li>
<a href="#">菜单六</a>
</li>


</ul>
</li>
</ul>
</form>


<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</div>
<input type="text" class="form-control" placeholder="搜索" />
</div>


</div>
<button type="button" class="btn btn-danger">搜索</button>
</form>


</div>
</body>
</html>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324821060&siteId=291194637