---
# System prepended metadata

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

---

# 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

![](https://i.imgur.com/HQxozOb.png)

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

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

    ![](https://i.imgur.com/52YZfFb.png)
    
    在 `package-lock.json` 中也會有對應的更新
1. 在 `angular.json` 中的 `styles` 底下多了 `node_modules/bootstrap`
    
    ![](https://i.imgur.com/iNkQl5m.png)
    
    這裡放置了專案全域都能吃到的CSS樣式
    現在放入了`bootstrap`，代表現在專案在任一元件都能夠加上`bootstrap`的用法
    > 個人習慣在開發時換成 `node_modules/bootstrap/dist/css/bootstrap.css`
    > 因為原始檔案保留了換行符號，在寫程式時比較好追蹤及閱讀
    > 
    > ![](https://i.imgur.com/TgyfyG4.gif)


1. 在 `node_modules` 資料夾底下多了 `bootstrap`包
![](https://i.imgur.com/NIIG6g0.png) 


## 把程式運行起來

    > ng serve

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

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


## 實作程式

### app.component

修改 `app.component.html`

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

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

```html=
<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`等元素

```typescript=
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`在樣板中呈現出來

```html=
<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`陣列，代表商店販賣的武器

```typescript=
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` 印出每件裝備

```html=
<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` 效果
讓滑鼠移上商品時出現**選取到**的感覺

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


## 完成結果

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

![](https://i.imgur.com/q5idSDC.gif)


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