<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 倒置的导航栏</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>
</head>
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-toggle='collapse' data-target='#demo'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a href="" class='navbar-brand'>菜鸟教程</a>
</div>
<div>
<form class='navbar-form navbar-left col-lg-3' role='search'>
<div class='form-group'>
<input type="text" class='form-control' placeholder="Search">
</div>
<button type='submit' class='btn btn-info'>提交</button>
</form>
</div>
<div class='collapse navbar-collapse' id='demo'>
<ul class='nav navbar-nav'>
<li class='active'><a href="">IOS</a></li>
<li><a href="">Python</a></li>
<li class='dropdown'>
<a href="" class='dropdown-toggle' data-toggle='dropdown'>Java <b class='caret'></b></a>
<ul class='dropdown-menu' role='menu'>
<li><a href="">jmeter</a></li>
<li><a href="">EJB</a></li>
<div class='divider'></div>
<li><a href="">Jasper Report</a></li>
</ul>
</li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li><a href=""><span class='glyphicon glyphicon-user'></span>注册</a></li>
<li><a href=""><span class='glyphicon glyphicon-log-in'></span>登录</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
bootstrap 导航栏,有form查询,下拉菜单,响应式折叠,登录注册
最新推荐文章于 2019-08-20 21:00:18 发布