<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--匹配移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>导航条</title>
<!--安装bootstrap-->
<!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的-->
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--生成占位图-->
<script src="../bs/js/holder.js"></script>
<!--css-->
<link rel="stylesheet" href="../bs/css/bootstrap.css">
<!--bootstrap.js-->
<script src="../bs/js/bootstrap.js"></script>
<style>
*{
font-family:微软雅黑;
}
body{
padding-top:50px;
}
</style>
</head>
<body>
<div class="container"> <!--外层的div类container是为了吧所有的内容部分限制为居中-->
<h1 class="page-header">BootStarp导航栏</h1>
<!--导航条最外部 navbar-fixed-top 表示固定在顶部,(直接固定在顶部会使得标题被遮住,所以需要给body添加一个padding-top值)-->
<nav class="navbar navbar-inverse navbar-fixed-top"> <!-- navbar-inverse 是整个导航条为黑色, 默认是navbar-default -->
<div class="container"> <!--这里再加一个div 类container是为了当导航条固定在顶部的时候,把里边的内容居中-->
<!-- 1 . 左侧logo部分和右侧汉堡菜单部分-->
<div class="navbar-header">
<!--这里可以直接给a标签里放一个img,作为logo-->
<a href="" class="navbar-brand">BootStarp</a> <!-- 左侧logo部分 a连接加 navbar-brand 起对齐作用 -->
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <!-- 右侧汉堡菜单部分,点击后出现navbar菜单栏 , 主要靠 data-target="id名" ,然后去寻找下方的合并区内容-->
<!--这里的三个span是代表汉堡菜单的标签,一个span代表一根横线 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 2 . 这里是手机端显示出来的合并区,点击汉堡按钮出现的内容,加上collapse类默认手机端是隐藏-->
<div class="collapse navbar-collapse" id="mynavbar">
<!-- 2.1 这里是合并区显示的横条菜单栏,使用nav标签后边跟navbar-nav-->
<ul class="nav navbar-nav">
<li class="active"><a href="">起步</a></li> <!--class="active" 代表默认选中的表单,使用JQuery事件滑动到谁身上就添加一个active-->
<li><a href="">全局 CSS 样式</a></li>
<li><a href="">组件</a></li>
<li><a href="">JavaScript 插件</a></li>
<li><a href="">定制</a></li>
<li><a href="">网站实例</a></li>
<li class="dropdown"> <!--这里一个下拉菜单的按钮,里边的 a标签来匹配内容-->
<a href="" class="dropdown-toggle" data-toggle="dropdown" >下拉菜单 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">下拉菜单选项1</a></li>
<li><a href="">下拉菜单选项2</a></li>
<li><a href="">下拉菜单选项3</a></li>
</ul>
</li>
</ul>
<!-- 2.2 这里是合并区右侧的一个网站标志,这里将他设置为右浮动-->
<ul class="nav navbar-nav navbar-right"> <!--这里是浮动到右边的一个标志,需要用navbar-right对齐到右侧-->
<li><a href="">Bootstrap中文网</a></li>
</ul>
<!-- 2.3 这里是合并区右侧的表单元素,这里将他设置为右浮动,因为BootStarp先浮动,所以他在前者左侧-->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="输入查找内容">
</div>
<div class="form-group">
<button type="submit" class="btn btn-warning">搜索 <spna class="glyphicon glyphicon-search "></spna></button>
</div>
</form>
<!--直接放一个按钮-->
<!--<button type="submit" class="btn btn-warning navbar-btn">搜索 <spna class="glyphicon glyphicon-search "></spna></button>-->
<!--直接放一个文本-->
<!--<p class="navbar-text">导航条中的文本</p>-->
</div>
</div>
</nav>
</div>
</body>
</html>
