2 Bootstrap格式化 · SpringBoot+Angular入門實例教程

本小節中，我們將其修正為Bootstrap的固有樣式。首先，我們來到bootstrap的[https://getbootstrap.net/docs/components/navbar/](https://getbootstrap.net/docs/components/navbar/)，并找到我們計劃使用的效果，比如我們感覺以下方案還不錯。 ![](https://img.kancloud.cn/e6/fc/e6fc92f7b4704df26af3c26270b6366c_1179x80.png) ## 初始化然后參考官方的示例代碼，將官方代碼整體復制到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> ``` #### 測試 ![](https://img.kancloud.cn/a2/73/a27397246a91f1df856bdebdfffbed79_1184x205.png) ## 按需求修正此項內容大體上就是考核我們對基本的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://img.kancloud.cn/09/ab/09abae467a7468efcb6649c7beee5348_1106x132.png) # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [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 |