bootstrap 第十五章导航条

最新推荐文章于 2024-05-14 09:55:02 发布

小涛涛啊！

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量134

点赞数

分类专栏： Boostrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/t5555666/article/details/108908345

版权

Boostrap 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第十五章导航条

案例解释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
	</head>
	<body>
		<nav class="navbar  navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#one">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="#" class="navbar-brand">Brand</a>
				</div>
				
				<div class="collapse navbar-collapse" id="one">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">Link</a>
						</li>
						<li>
							<a href="#">Link</a>
						</li>
						<li class="dropdown">
						          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >Dropdown <span class="caret"></span></a>
						          <ul class="dropdown-menu">
						            <li><a href="#">111111</a></li>
						            <li><a href="#">222222</a></li>
						            <li><a href="#">333333</a></li>
						          </ul>
						        </li>
					</ul>
					
					<form class="navbar-form navbar-right">
					        <div class="form-group">
					          <input type="text" class="form-control" placeholder="Search">
					        </div>
					        <button type="submit" class="btn btn-default">Submit</button>
					      </form>
				</div>
			</div>
		</nav>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="../bs/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>