來到src/app文件夾，并使用以下能力初始化登錄組件： ``` panjiedeMac-Pro:web-app panjie$ cd src/app/ panjiedeMac-Pro:app panjie$ ng g c login CREATE src/app/login/login.component.sass (0 bytes) CREATE src/app/login/login.component.html (20 bytes) CREATE src/app/login/login.component.spec.ts (621 bytes) CREATE src/app/login/login.component.ts (266 bytes) UPDATE src/app/app.module.ts (1194 bytes) ``` bootstrap4提供的表單示例便是一個適用的登錄界面： src/app/login/login.component.html ```html <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ``` 接下來在使用格珊將其居中顯示： ```html <div class="row justify-content-center"> <div class="col-4"> <form> ... </form> </div> </div> ``` 最后啟用單元測試來查看最終的效果： src/app/login/login.component.spec.ts ```javascript fit('should create', () => { expect(component).toBeTruthy(); }); ```  基本的樣式有了，繼續修正V層的顯示內容，把一些模板的文字改成適用于當前系統的： src/app/login/login.component.html ```html <div class="row justify-content-center"> <div class="col-4"> <form> <div class="form-group"> <label for="username">用戶名</label> <input type="text" class="form-control" id="username" aria-describedby="usernameHelp" placeholder="用戶名"> <small id="usernameHelp" class="form-text text-muted">系統對您提交的用戶信息嚴格保密</small> </div> <div class="form-group"> <label for="password">密碼</label> <input type="password" class="form-control" id="password" placeholder="密碼"> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </div> ``` 最終效果：  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.1) | - | | form表單 | [https://getbootstrap.net/docs/components/forms/](https://getbootstrap.net/docs/components/forms/) | 1 |