Day13 【牙起來】 導入 Bootstrap - 套件

前面的板面太醜
我們重頭來過一個新的專案，並且導入Bootstrap做切版效果

重新開始新專案 project02

建立全新的專案

> ng new project02

建立store、role區塊

> cd src/app
> ng g c store
> ng g c role

導入bootstrap部件

在此使用 ng-bootstrap 套件

> ng add @ng-bootstrap/ng-bootstrap

加入boostrap套件這個動作，主要改變了三樣東西

1. 在 package.json 中多了 @ng-bootstrap/ng-bootstrap

   

   在 package-lock.json 中也會有對應的更新

2. 在 angular.json 中的 styles 底下多了 node_modules/bootstrap

   

   這裡放置了專案全域都能吃到的CSS樣式
   現在放入了bootstrap，代表現在專案在任一元件都能夠加上bootstrap的用法

   個人習慣在開發時換成 node_modules/bootstrap/dist/css/bootstrap.css
   因為原始檔案保留了換行符號，在寫程式時比較好追蹤及閱讀

   

3. 在 node_modules 資料夾底下多了 bootstrap包
   

把程式運行起來

若有以下情況，保險起見要將程式關閉重新運行

> ng serve

• 安裝新套件
• 改動到 angular.json
• 改動到任何 module

實作程式

app.component

修改 app.component.html

希望將 role、store 兩個元件都水平置中
並且擺的好看一些、還要有RWD效果

於是加入了 container、row、col-12 格線系統

<div class="container-fluid">
  <div class="row">
    <div class="col-12 text-center">
      <app-role></app-role>
      <app-store></app-store>
    </div>
  </div>
</div>

role.component

修改 role.component.ts

與之前相同，加入hp、money等元素

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.css']
})
export class RoleComponent implements OnInit {

  hp = 5
  money = 0

  constructor() { }

  ngOnInit(): void {
  }

}

修改 role.component.html

將成員hp、money在樣板中呈現出來

<div class="container-fluid mb-5">
  <div class="row">
    <div class="col-12">
      <div class="h1">角色區塊</div>
      <div>血量：{{hp}}</div>
      <div>金錢：{{money}}</div>
    </div>
  </div>
</div>

store.component

修改 store.component.ts

一樣添加weapons陣列，代表商店販賣的武器

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css']
})
export class StoreComponent implements OnInit {

  weapons = [
    {name: '小劍', atk: '5'},
    {name: '彎刀', atk: '7'},
    {name: '大魔劍', atk: '11'}
  ];

  constructor() {
  }


  ngOnInit(): void {
  }

}

修改 store.component.html

給每件裝備加上格線系統與 card 的class
利用迴圈 *ngFor 印出每件裝備

<div class="h1">商店區塊</div>
<div class="row justify-content-center">
  <div class="col-8">
    <div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4">
      <div class="py-3"
           *ngFor="let weapon of weapons; let i = index">
        <div class="card h-100">
          <div class="card-header">
            <div>裝備編號: {{i + 1}}</div>
            <div>裝備名稱: {{weapon.name}}</div>
          </div>
          <div class="card-body">
            <div *ngIf="weapon.atk">裝備攻擊力: {{weapon.atk}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

修改 store.component.css

透過CSS添加 hover 效果
讓滑鼠移上商品時出現選取到的感覺

.card:hover {
  background: whitesmoke;
  outline: solid 0.1em gray;
}

完成結果

完成了一個還不錯的RWD樣板