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="./css/normalize.css">      <!--重置  --> 
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/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>
            </button>
            <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>
                <li>
                    <a href="#bbs">论坛</a>
                </li>
                <li>
                    <a href="#web">前端开发</a>
                </li>
                <li>
                    <a href="#new">最新课程</a>
                </li>
                <li>
                    <a href="#app">移动app</a>
                </li>
                <li>
                    <a href="#about">联系我们</a>
                </li>
            </ul>
          </div>
      </div>
    </nav>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>

移动端导航：

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; （阴影）

bootstrap页面

页面导航：

移动端导航：

css样式：