When the whole world is about to rain, let's make it clear in our heart together

热爱前端开发,专注于前端

bootstrap-导航二

<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮图标</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript">
</script>
</head>
<body >
<!--导航条-->
<div   class="navbar">
          <div  class="navbar-inner">
                    <a class="brand"  href="#">Title</a>
                    <ul  class="nav">
                          <li  class="active"><a href="#">Home</a><li>
                          <li  class=""><a href="#">SHOW</a><li>
                          <li  class=""><a href="#">LINK</a><li>
                    </ul>
          </div>

</div>

<form class="navbar-form pull-left">
             <input type="text" class="span2" id="fname">
             <button type="submit" class="btn">submit</button>
</form>
<!--navbar-search失效-->
<form class="navbar-search" accept-charset="utf-8">
            <input type="text" class="search-query" placeholder="Search">
</form>

<div class="header">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- 始终显示导航条的名字 -->
<a href="#" class="brand">Project Name</a>
<!-- 把所有需要隐藏的项目添加到这里 -->
<div class="nav-collapse collapse">
<!-- .nav、.navbar-search 等等 -->
</div>
</div>
</div>
</div>






























































 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

 

posted @ 2016-06-03 10:42  婷风  阅读(156)  评论(0编辑  收藏  举报