本小节中，我们将其修正为Bootstrap的固有样式。首先，我们来到bootstrap的[https://getbootstrap.net/docs/components/navbar/](https://getbootstrap.net/docs/components/navbar/)，并找到我们计划使用的效果，比如我们感觉以下方案还不错。  ## 初始化 然后参考官方的示例代码，将官方代码整体复制到nav/nav.component.html中 ``` <h2>欢迎使用河北工业大学教务管理系统</h2> <ul> <li><a routerLink="">首页</a></li> <li><a routerLink="teacher">教师管理</a></li> <li><a routerLink="klass">班级管理</a> </li> </ul> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> ``` #### 测试  ## 按需求修正 此项内容大体上就是考核我们对基本的html的掌握能力的，没有用的删除掉，有用的留下，需要修正的进行修正。修正后代码如下： nav.component.html ``` <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">教务管理系统</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" routerLink="">首页 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" routerLink="teacher">教师管理</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="klass">班级管理</a> </li> </ul> </div> </nav> ``` #### 测试  # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.2.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.2.2) | - | | 导航栏 | [https://getbootstrap.net/docs/components/navbar](https://getbootstrap.net/docs/components/navbar) | 5 |