---
slideOptions:
transition: slide
tags: 正式社課
---
# RWD 響應式

[TOC]

----

## RWD 響應式概念
- 什麼是RWD響應式網站設計?
RWD響應式網頁設計又稱為回應式網站設計，是指網站能跨平台使用，自動偵測使用者上網的裝置尺寸，能針對不同螢幕的大小而自動調整網頁圖文內容， 讓使用者在用手機瀏覽您的網站時，不用一直忙著縮小放大拖曳，給使用者最佳瀏覽畫面。

----

## RWD 實例
- 上述太複雜，你只需要 *F12 開開看*
- [有響應式](https://hackersir-x-ios.ddns.me/)
- [沒有響應式](http://yltang.net/tutorial/django/7/)

---

# BootStrap

----

## BootStrap 4 簡介
- Bootstrap是目前響應式及行動裝置網頁設計，最知名的框架，提供了包含HTML、CSS及JS等內容的框架。

----

## 完整的Bootstrap包含了?
- bootstrap.css — CSS框架
- bootstrap.js — JavaScript/jQuery 框架
- glyphicons — 圖示集(icon font set)

---

# BootStrap 教學

---

## CDN 環境建置

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

---

## Grid 網格
1. 單位：xs, sm, md, lg
2. 最多12個 column

[--- 範例參考 ---](https://bootstrap.hexschool.com/docs/4.2/examples/grid/)

---

## 內容

----

### 文字排版 (Typography)
- 與 HTML 基本都一樣
- 但有一些更方便的東西可以用
- 可以參考[六角學院](https://bootstrap.hexschool.com/docs/4.2/content/typography/) 或
[W3School](https://www.w3schools.com/bootstrap4/bootstrap_typography.asp)

----

### 圖片 (Images)
- 個人認為很重要的一個部分
- 對齊 縮放 形狀
- 可以參考[六角學院](https://bootstrap.hexschool.com/docs/4.2/content/images/) 或 [W3School](https://www.w3schools.com/bootstrap4/bootstrap_images.asp)

----

### 表格 (Tables)
- 跟基本的HTML一樣
- 但你可以直接套用更漂亮的外觀
- 可以參考[六角學院](https://bootstrap.hexschool.com/docs/4.2/content/tables/) 或 [W3School](https://www.w3schools.com/bootstrap4/bootstrap_tables.asp)

---

## 元件

----

### 導覽列 (Navbar)
[--- 範例參考 ---](https://bootstrap.hexschool.com/docs/4.2/examples/navbars/)

----

### 輪播 (Carousel)
[--- 範例參考 ---](https://bootstrap.hexschool.com/docs/4.2/components/carousel/)

----

### 按鈕 (Buttons)

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

----

### 表單 (Forms)
[--- 範例參考 ---](https://bootstrap.hexschool.com/docs/4.2/components/forms/)

---

## 學習資源介紹
- [Bootstrap - 六角學院](https://bootstrap.hexschool.com/)
- [W3School](https://www.w3schools.com/bootstrap4/default.asp)

---

## 實作練習

----

請先下載模型並依照上述文件實作
https://github.com/yitsewu1998/AAA/

----

完成的案例
https://yitsewu1998.github.io/Flask_BootStrapHW/

----

最後提供一個懶人方式
https://www.layoutit.com/build