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

前面的版面太過陽春、不好看
我們重頭來過一個新的專案，這次導入 `Bootstrap` 做切版效果

## 重新開始新專案 project02

### 建立全新的專案

> ng new project02

### 建立store、role區塊

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

### 導入bootstrap部件

在此使用 [**ng-bootstrap**](https://ng-bootstrap.github.io/#/home) 套件

> ng add @ng-bootstrap/ng-bootstrap


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

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


在 `package-lock.json` 中也會有對應的更新
1. 在 `angular.json` 中的 `styles` 底下多了 `node_modules/bootstrap`


這裡放置了專案全域都能吃到的CSS樣式
現在放入了`bootstrap`，代表現在專案在任一元件都能夠加上`bootstrap`的用法
> 個人習慣在開發時換成 `node_modules/bootstrap/dist/css/bootstrap.css`
> 因為原始檔案保留了換行符號，在寫程式時比較好追蹤及閱讀
>
> 

1. 在 `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樣板


> 恭喜到這一步已完成Angular93.21%進度