class :
\
navbar-fixed-top 导航头部对其\ navbar-right 悬浮在右边 container 居中块\ &:focus 焦点\ &:hover 鼠标悬浮
导航：
\
<!DOCTYPE html>\
<html lang="Zn-cn">\
<head>\
<meta charset="UTF-8">\
<meta http-equiv="X-UA-Compatible" content="IE=edge">\
<meta name="viewport" content="width=device-width, initial-scale=1.0">\
<title></title>\
<link rel="stylesheet" href=".![]()s![]()rmalize.css">
<!--重置 --> \
<link rel="stylesheet" href=".![]()s/bootstrap.min.css">\
<link rel="stylesheet" href=".![]()s/index.css">\
</head>\
<body>\
\
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">\
<div class="container">\
<div class="navbar-header">\
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">\
<!-- 缩小后的按钮 -->\
<span class="sr-only">Toggle navigation</span>\
<span class="icon-bar"></span>\
<span class="icon-bar"></span>\
<span class="icon-bar"></span>\
<![]()tton>\
<a class="navbar-brand" href="#">HPIT学院</a> \
</div>\
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> \
<ul class="nav navbar-nav navbar-right ">\
<li class="">\
<a href="#">首页</a>\
<![]()>\
<li>\
<a href="#bbs">论坛</a>\
<![]()>\
<li>\
<a href="#web">前端开发</a>\
<![]()>\
<li>\
<a href="#new">最新课程</a>\
<![]()>\
<li>\
<a href="#app">移动app</a>\
<![]()>\
<li>\
<a href="#about">联系我们</a>\
<![]()>\
</ul>\
</div>\
\
</div>\
</nav>\
\
<script src="./js/jquery-3.3.1.min.js"></script>\
<script src="./js/bootstrap.min.js"></script>\
</body>\
<![]()ml>\
\
复制代码\
```\
\
 （移动端可视）\\
导航：\
\
> container-fluid 大屏\\
> col-md-10 col-md-offset-1 栅栏布局\\
> text-center 文字居中\\
> center-block 转块级居中\\
> img-responsive 图片响应式布局（自适应）\
\
css样式：\
\
> background-size: cover; （平铺）\\
> box-shadow: 1px 1px 4px #ccc; （阴影）\
\
\\
\
