# Web企業運算_Week8_許家維

### 學習清單
1. 調整期中網頁需修改部分
2. 練習Angular的完整安裝
3. 了解Angular內部架構
4. 閱讀Bootstrap4原始碼
5. (技術影片)Bootstrap原始碼導讀 : https://www.youtube.com/watch?v=YgYFMnysL6Y
6. 本文網址 : https://hackmd.io/k-I4jzd6TQWybdNS15Ptmw?both

### Code
**利用Bootswatch製作簡易的網站框架**

**HTML**

<!-- navbar -->
<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="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<!-- jumbotron -->
<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>


<!-- card style -->
<div class="card border-dark mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Dark card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<div class="card border-dark mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Dark card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<router-outlet></router-outlet>

**CSS**

<!-- 號稱僅用html就能完成整個網頁 -->
@import"https://bootswatch.com/4/journal/bootstrap.min.css";

### 成果

**Angular 安裝完整步驟**
1. 需事先安裝 Node.js (Node.js內包含npmn指令)
1. 欲確定檔案夾內是否有Node，使用```node -v```指令
2. 安裝 Angular Cli : ```npm install -g @angular/cli```
3. ```ng new 資料夾名稱``` : 建立要安裝Angular Cli環境的資料夾
4. 選擇欲使用的預處理器(css,sass,scss..)
5. ```cd 資料夾名稱``` : 移動到該資料夾內，此時資料夾內應有angular檔案結構
6. ```ng serve --open``` : 開啟Angular Server 預設port4200

**導入bootstrap 4種方法**
1. npm 安裝 ```npm install --save bootstrap```
2. import 匯入 ```@import"https://bootswatch.com/4/journal/bootstrap.min.css";```
3. CDN 線上存取 : 複製網路上CDN網址，link及script過去即可
4. 下載後存取 : 下載後透過檔案連結，link及script過去即可

### 心得
本週首先Demo了大家的期中網站設計，了解了自己網站能再提升的部分。其實這次的作業自己沒有到非常滿意，因為在效能部分沒有做的非常好，我會花時間把效能及圖片處理過，讓整個網頁更加地完整。

再來複習了上次課程中的Angular安裝，透過上課的練習及這兩次心得的整理，我想我已熟稔安裝的部分，接下來要了解的就是框架內每個檔案放什麼，該做什麼?這禮拜老師示範將bootstrap套入到網頁中，透過他人定義的CSS，甚至可以只寫HTML就能完整刻畫一個網站。之前有使用過bootstrap的經驗，所以這次我稍微去讀了一下他的source code，了解每個class的樣式與寫法，讓之後再使用時能夠做自己的修改。

* Bootstrap Source Code : https://github.com/twbs/bootstrap