網路程式設計
附錄: Bootstrap設定
前端元件庫 Bootstrap
在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檔
1.在index.html加入必要的css, js檔連結（共4個）
連結Bootstrap JS檔
cd 專案資料夾
ng add @ng-bootstrap/ng-bootstrapimport {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
專案版型 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一樣
網站標題
- 顏色： text-primary (文字顏色)、bg-dark (背景色)
- 間隔： ml-auto, mr-1, mx-0, my-5, pt-1, pb-2
- 文字、尺寸、邊框
插播-Bootstrap 4 通用類別(3/3)
練習
使用卡片(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
搜尋
以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
網路程式設計
By Leuo-Hong Wang
網路程式設計
Bootstrap 4介紹
