網路程式設計

附錄: Bootstrap設定

前端元件庫 Bootstrap

https://bootstrap.hexschool.com/

在Angular專案使用Bootstrap

在index.html加入必要的css, js檔連結
安裝外部套件ng-bootstrap（內含NgbModule）
修改app.module.ts, 加入NgbModule
準備資料 (app.component.ts)
編輯頁面(app.component.html)
- 靈活運用Bootstrap 4 元件
- 必要時設定app.component.css

專案版型 BS4前置作業 (1/7)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DirectiveExample</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

</head>
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

index.html

連結Bootstrap CSS檔

參考：https://bootstrap.hexschool.com/docs/4.2/getting-started/introduction/

1.在index.html加入必要的css, js檔連結（共4個）

連結Bootstrap JS檔

cd 專案資料夾
ng add @ng-bootstrap/ng-bootstrap

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class AppModule {
}

2. 安裝外部套件ng-bootstrap（官網在此）

3. 修改app.module.ts, 加入NgbModule

專案版型 BS4前置作業 (2/7)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '教士會館';
  menu = ["教士會館","會館訊息","特色餐點","交通資訊"];
  logo = "/assets/images/house_icon_white.png";
}

設定三個成員變數

assets下建立images資料夾，放，放入圖片檔

app.component.ts

專案版型 BS4前置作業 (3/7)

4. 在ts檔準備頁面所需資料

<nav class="navbar navbar-expand-sm bg-dark">
  <div class="container">
    <div class="navbar-brand">
      <span class=""><img src="{{ logo }} "></span>
      <span class="text-white display-title">
        {{title}}
      </span>
    </div>
    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item mr-5 display-5 dropdown" *ngFor="let menuitem of menu">
          <a href="#" class="text-white nav-link">{{menuitem}}</a>
        </li>
      </ul>
      <button class="btn btn-lg btn-outline-warning">
        我要登入
      </button>
    </div>
  </div>
</nav>

使用<nav></nav>標籤(Bootstrap 4 導覽列元件)

使用navbar相關css類別

navbar.component.html

參考網址：https://bootstrap.hexschool.com/docs/4.2/components/navbar/

專案版型 BS4前置作業 (4/7)

5. 在html檔以css類別設定頁面

插播-Bootstrap 4 導覽列元件(1/3)

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img class="d-inline-block align-top" src="/assets/brand/bootstrap-solid.svg" width="30" height="30"  alt="">
    Bootstrap
  </a>
</nav>

<nav></nav>搭配navbar類別
navbar-brand: 標題類別

logo搭配標題

插播-Bootstrap 4 導覽列元件(2/3)

<nav class="navbar navbar-expand-sm bg-dark">
  <div class="container">
    <div class="navbar-brand">
      logo, 標題 在此
    </div>
    <button class="navbar-toggler navbar-dark" type="button"......>
       <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item mr-5 display-5 dropdown" *ngFor="let menuitem of menu">
          <a href="#" class="text-white nav-link">{{menuitem}}</a>
        </li>
      </ul>
      <button class="btn btn-lg btn-outline-warning">
        我要登入
      </button>
    </div>
  </div>
</nav>

collapse 可折疊

漢堡按鈕

data-target設定要與collpase段落id一樣

網站標題

參考：http://bootstrap.hexschool.com/docs/4.0/utilities/borders/

顏色： text-primary (文字顏色)、bg-dark (背景色)

間隔： ml-auto, mr-1, mx-0, my-5, pt-1, pb-2

文字、尺寸、邊框

插播-Bootstrap 4 通用類別(3/3)

練習

使用卡片(Card) 製作「關於我」的頁面

https://bootstrap.hexschool.com/docs/4.2/components/card/

使用Snippets加快頁面製作

什麼是snippets?

網頁片段範例

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
    	<div class="col-md-4 col-md-offset-4">
    		<div class="panel panel-default">
			  	<div class="panel-heading">
			    	<h3 class="panel-title">Login via site</h3>
			 	</div>
			  	<div class="panel-body">
			    	<form accept-charset="UTF-8" role="form">
                    <fieldset>
			    	  	<div class="form-group">
			    		    <input class="form-control" placeholder="yourmail@example.com" name="email" type="text">
			    		</div>
			    		<div class="form-group">
			    			<input class="form-control" placeholder="Password" name="password" type="password" value="">
			    		</div>
			    		<div class="checkbox">
			    	    	<label>
			    	    		<input name="remember" type="checkbox" value="Remember Me"> Remember Me
			    	    	</label>
			    	    </div>
			    		<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
			    	</fieldset>
			      	</form>
                      <hr/>
                    <center><h4>OR</h4></center>
                    <input class="btn btn-lg btn-facebook btn-block" type="submit" value="Login via facebook">
			    </div>
			</div>
		</div>
	</div>
</div>

.white{
    color:#000;
    background-color:#fff;
}

.btn-facebook {
    color: #ffffff;
    -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #2b4b90;
    *background-color: #133783;
    background-image: -moz-linear-gradient(top, #3b5998, #133783);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#133783));
    background-image: -webkit-linear-gradient(top, #3b5998, #133783);
    background-image: -o-linear-gradient(top, #3b5998, #133783);
    background-image: linear-gradient(to bottom, #3b5998, #133783);
    background-repeat: repeat-x;
    border-color: #133783 #133783 #091b40;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

    .btn-facebook:hover,
    .btn-facebook:focus,
    .btn-facebook:active,
    .btn-facebook.active,
    .btn-facebook.disabled,
    .btn-facebook[disabled] {
        color: #ffffff;
        background-color: #133783 !important;
        *background-color: #102e6d !important;
    }

    .btn-facebook:active,
    .btn-facebook.active {
        background-color: #0d2456 \9 !important;
    }

對應的HTML

對應的CSS

對應的JavaScript

使用Snippets

搜尋

bootstrap 4 snippets

https://bootsnipp.com/

搜尋

以login snippets為例

預覽畫面

1. 將JavaScript及其他設定加到index.html

2.將html部份加到元件的HTML檔

(例如：app.component.html)

3.將css部份加到元件的CSS檔

(例如：app.component.css)

以login snippets為例

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Login via site</h3>
        </div>
        <div class="panel-body">
          <form accept-charset="UTF-8" role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="yourmail@example.com" name="email" type="text">
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Password" name="password" type="password" value="">
              </div>
              <div class="checkbox">
                <label>
                  <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                </label>
              </div>
              <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
            </fieldset>
          </form>
          <hr />
          <h4 class="text-center">OR</h4>
          <input class="btn btn-lg btn-facebook btn-block" type="submit" value="Login via facebook">
        </div>
      </div>
    </div>
  </div>
</div>

對應的HTML

1~3行加入index.html的HEAD標籤內

第6行之後加到app.component.html

以login snippets為例

加到app.component.css

.white{
    color:#000;
    background-color:#fff;
}

.btn-facebook {
    color: #ffffff;
    -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #2b4b90;
    *background-color: #133783;
    background-image: -moz-linear-gradient(top, #3b5998, #133783);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#133783));
    background-image: -webkit-linear-gradient(top, #3b5998, #133783);
    background-image: -o-linear-gradient(top, #3b5998, #133783);
    background-image: linear-gradient(to bottom, #3b5998, #133783);
    background-repeat: repeat-x;
    border-color: #133783 #133783 #091b40;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

    .btn-facebook:hover,
    .btn-facebook:focus,
    .btn-facebook:active,
    .btn-facebook.active,
    .btn-facebook.disabled,
    .btn-facebook[disabled] {
        color: #ffffff;
        background-color: #133783 !important;
        *background-color: #102e6d !important;
    }

    .btn-facebook:active,
    .btn-facebook.active {
        background-color: #0d2456 \9 !important;
    }

對應的CSS