您的位置：首页 > Web前端 > BootStrap

BootStrap导航条表单，搜索，固定，下拉式按钮

2015-08-04 00:57 711 查看
摘自《极客学院》

1、效果图：



2、html代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<title>BootStrap navbar</title>
</head>
<body>
<!--class=navbar-fixed-top导航条固定在顶部，class=navbar-inverse黑色背景-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">匆匆</a>
</div>

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="mytab">
<li class="active"><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>

<form class="narbar-form navbar-left" role="search">
<div class="form-group col-xs-9" style="margin-top: 10px;">
<input type="text" placeholder="搜索" class="form-control">
</div>
<button type="submit" class="btn btn-default col-xs-3" style="margin-top: 10px">搜索</button>
</form>

<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<!--data-toggle与JS文件有关-->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
点我
`                           <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="" role="menuitem">fff</a></li>
<li><a href="" role="menuitem">fff</a></li>
<li><a href="" role="menuitem">fff</a></li>
<li><a href="" role="menuitem">fff</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
hello
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
hheefd

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<ol class="breadcrumb">
<li><a href="">home</a></li>
<li><a href="">library</a></li>
<li><a href="">data</a></li>
</ol>
</nav>
<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$("#mytab a").click(function(e){
e.preventDefault();
$(this).tab("show");
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航