Slide 1
Slide 1 text
HTML, CSS and Bootstrap
李⾄至青
Slide 2
Slide 2 text
這個早上的⼤大綱
• HTML 簡介與常⽤用標籤⽤用法
• CSS 簡介與常⽤用外觀屬性⽤用法
• Bootstrap 簡介
• Bootstrap 常⽤用元件介紹
• Bootstrap 網格系統
Slide 3
Slide 3 text
⼼心理理建設
• web 易易學難精
• ⽤用數個⼩小時掌握骨幹，⽤用數個⽉月掌握細節
• 那要怎麼辦？善⽤用資源！
• 不必學會所有細節，就像不必倒背⼀一部字典
• 但要能夠查字典，然後知道怎麼⽤用
Slide 4
Slide 4 text
Sli.do
#K694
Slide 5
Slide 5 text
這堂課結束之後我們可以做出什什麼
• 個⼈人網⾴頁 & 專案宣傳⾴頁⾯面
• 如果你都會了了，可以開始寫作業
Slide 6
Slide 6 text
這堂課結束之後我們可以做出什什麼
Slide 7
Slide 7 text
範例例程式碼
git clone https://github.com/x-village/web-html-css-
bootstrap-course.git
Slide 8
Slide 8 text
開發⼯工具
• VScode + Live server (推薦)
• Live reload + local server
• Live reload 讓每次修改程式碼，網⾴頁會⾃自動刷新
• Local server 讓我們可以以 web 環境測試程式碼
• 為什什麼我們需要 Local server
Slide 9
Slide 9 text
html, CSS, JS 的⾓角⾊色
HTML
骨架
CSS
衣服
JavaScript
動作
Slide 10
Slide 10 text
HyperText Markup Language
超⽂文件標⽰示語⾔言：網⾴頁的骨架
Slide 11
Slide 11 text
HyperText Markup Language
Page Title
This is a Heading
This is a paragraph.
Slide 12
Slide 12 text
開始你的第⼀一個網⾴頁專案
• 創立⼀一個空的資料夾作為專案資料夾，命名 personal-page
• 創建⼀一個檔案 index.html
• 把上⾴頁的 html code 貼上
Slide 13
Slide 13 text
如何使⽤用 html 檔案
• 做法⼀一： 可以直接⽤用瀏覽器打開它
Slide 14
Slide 14 text
如何使⽤用 html 檔案
• 做法⼆二（推薦）：開啟測試⽤用本地伺服器
• 使⽤用 VScode 打開專案資料夾，點擊右下⾓角 Go Live
• 即會以瀏覽器打開 http://127.0.0.1 開頭的網址，顯⽰示
index.html 檔案的內容，並即時更更新
• 注意！Live Server 建立的伺服器 ，路路徑是跟據⽬目前打開的資料夾
Slide 15
Slide 15 text
如何使⽤用 html 檔案
• 如果沒有看到 Go Live 的按鈕，可以⽤用以下⽅方法：
• 按下 command+shift+p (macOS)/ ctrl+shift+p (windows)
• 會展開 VScode 的指令列列，輸入 live server ，找到 Open
with Live Server 按下 enter
Slide 16
Slide 16 text
寫出你的第⼀一個網⾴頁
1. 按著「開啟你的第⼀一個網⾴頁專案」的步驟做完
2. Go Live! （參參考前兩兩⾴頁，打開本地伺服器）
3. 把⼤大標題改成你的名字
4. 把段落落改成⼀一句句話介紹你⾃自⼰己
5. 參參考 h1 標籤，嘗試以 h2 標籤，加入⼀一個副標題說明你的
背景，例例如： X-Village 助教、屏東⼈人
Slide 17
Slide 17 text
What does HTML say?
Page Title
This is a Heading
This is a paragraph.
• ⼤大部分標籤需要標⽰示兩兩次<…> <…/>，表⽰示開始和結束 • html 內有 head 跟 body • body 內有 2 個標籤， h1 跟 p • 寫在開始與結束中間的⽂文字會顯⽰示在網⾴頁上，不同的標籤有不同的特性、預設樣式Slide 18
Slide 18 text
What does HTML say?
Page Title
This is a Heading
This is a paragraph.
• 標記這是⼀一個 html ⽂文件 • html 標記⽂文件的範圍 • head 標記網⾴頁的後設資料（metadata），即描述網⾴頁的資料：網⾴頁標題、作者... • 不會直接顯⽰示在網⾴頁上 • body 標記網⾴頁內容，即會直接顯⽰示在網⾴頁上的內容Slide 19
Slide 19 text
What does HTML say?
This is a Heading
This is a paragraph.
• 這堂課，我們會專注於 body 內的網⾴頁內容 •h1, h2, h3, h4, h5, h6 • header ，標題⽂文字的意思 • 標題標籤，h1 最⼤大， h6 最⼩小 •p • paragraph，段落落⽂文字的意思 • 段落落標籤Slide 20
Slide 20 text
還有很多的標籤！
• 接下來來介紹常⽤用的標籤⽤用法：
• 標籤 意義
a anchor
img image
ul unordered list
li list item
div division
span span
b bold
Slide 22
Slide 22 text
沒錯！標籤也有屬性
估狗
• 在標籤開始的 "<" 與 ">" 之間，可以賦予屬性對應的值
• 如： href="https://www.google.com.tw"
• 標籤預設有什什麼屬性，可以給怎樣的值？ 查⽂文件
Slide 23
Slide 23 text
加入圖片：Image 標籤
圖片網址 圖片失效時的顯⽰示⽂文字
img ⽂文件傳送⾨門
這個標籤，不需指定結束！
圖片網址 圖片失效時的顯⽰示⽂文字
img ⽂文件傳送⾨門
這個標籤，不需指定結束！
Slide 24
Slide 24 text
取得圖片的路路徑
1. 相對網址
"./pudding.jpg"
2. 絕對網址
"http://127.0.0.1:5500/pudding.jpg"
"/pudding.jpg"
Slide 25
Slide 25 text
加入清單：ul, li 標籤
- 喜歡喝⿂魚池的⽔水
- 喜歡在⽑毛茸茸的地⽅方打滾
- 對骨頭沒興趣
Slide 26
Slide 26 text
Parent and Child
• HTML 同時也表達階層關係，parent (ul) 有五個 child (li)
- 喜歡喝⿂魚池的⽔水
- 喜歡在⽑毛茸茸的地⽅方打滾
- 對骨頭沒興趣
Slide 27
Slide 27 text
加入粗體⽂文字： bold 標籤
- 喜歡喝⿂魚池的⽔水
- 喜歡在⽑毛茸茸的地⽅方打滾
- 對骨頭沒興趣
Slide 29
Slide 29 text
表單標籤
• 接下來來介紹表單標籤的⽤用法：
• input
• label
• textarea
• button
• form
Slide 30
Slide 30 text
來來製作⼀一個留留⾔言表單吧！
• 留留⼀一次⾔言，需要填哪些資料？
1. 稱謂
2. email
3. 內⽂文
Slide 31
Slide 31 text
使⽤用 Input 加入單⾏行行欄欄位
• Type 指定 input 種類，輸入⽂文字檢查
• placeholder 指定空欄欄位顯⽰示⽂文字
• name 指定回傳給伺服器時，欄欄位的名字
input ⽂文件傳送⾨門
Slide 32
Slide 32 text
使⽤用 label 加入欄欄位說明
Name
Email
• 在 input 加上 id 以識別欄欄位，id 必須是獨⼀一無⼆二的
• 在 label 加上 for ，並給予對應的 input id 作為值
• 點擊 label時，游標會⾃自動聚焦在對應的欄欄位
Slide 33
Slide 33 text
使⽤用 textarea 加入多⾏行行欄欄位
• 有許多屬性可以使⽤用：
• minlength, maxlength
• placeholder
• cols, rows
• …
textarea ⽂文件傳送⾨門
Slide 34
Slide 34 text
使⽤用 form 定義表單動作
…(剛剛定義的所有表單)
• 這代表送出這個表單時，會以 "post" ⽅方法，送出表單內的
資料（name=value），到網址 "/sendmsg"
form ⽂文件傳送⾨門
Slide 35
Slide 35 text
使⽤用 Button 定義送出按鈕
Submit
• Button 要是 form 的 child
• 點擊按鈕送出資料，送出的⽅方式、網址定義在 form 的屬性
內！
button ⽂文件傳送⾨門
Slide 36
Slide 36 text
⽬目前為⽌止的表單程式碼
Name Email
Submit
Slide 37
Slide 37 text
送出的資料
1. 網站端輸入資料，然後點按鈕送出 2. 在開發者介⾯面看 network > request資料
Slide 38
Slide 38 text
表單還有其他的模樣跟⽤用法
• Input: checkbox, radio
• legend
• fieldset
• select
Slide 39
Slide 39 text
語意化的 HTML
• 寫 HTML 除了了要建構骨架
• 也必須和搜尋引擎打好關係（SEO）
• use the right tag
• header
• section
• footer
• …
• 搜尋引擎最佳化 (SEO) 入⾨門指南
Slide 40
Slide 40 text
如何查閱 HTML ⽂文件
• 推薦⽂文件
• htmlreference.io
• w3schools
• 怎麼看？
• 標籤需不需要標記結尾（self-closing）
• ⼀一個標籤有哪些必要屬性，哪些選填屬性
• 屬性接受怎樣的值
Slide 41
Slide 41 text
emmet：召喚 HTML, CSS的⿊黑魔法
• 在 VScode 中打開 .html 檔，輸入語法使⽤用 tab 展開：
1. ! + tab
2. .title + tab
3. ul>li*5 + tab
emmet ⽂文件傳送⾨門
Slide 42
Slide 42 text
Exercise, 個⼈人網⾴頁 !
1. 使⽤用 HTML 寫⼀一個個⼈人網⾴頁，需⾄至少使⽤用以下標籤各⼀一個：
• h1
• h2
• img
• p
• a
2. 參參考以下連結，使⽤用 video 標籤嵌入⼀一個影片，可以是（但不
限於）你的⾃自我介紹影片：
• https://htmlreference.io/element/video/
• https://www.w3schools.com/htmL/html5_video.asp
Slide 43
Slide 43 text
Exercise, 個⼈人網⾴頁 !
Slide 44
Slide 44 text
Cascading Style Sheets
階層式樣式表：網⾴頁的衣服
Slide 45
Slide 45 text
Cascading Style Sheets
h1 {
color: brown;
}
Slide 46
Slide 46 text
如何使⽤用 CSS
• inline CSS
• HTML Style
• 使⽤用 Link 標籤引⽤用 CSS 檔案
• 使⽤用 Link 標籤引⽤用 CDN
Slide 47
Slide 47 text
如何使⽤用 CSS：inline CSS
• 寫在 html 的標籤 style 屬性中
• 只對這個標籤有效
This is a Heading
Slide 48
Slide 48 text
如何使⽤用 CSS：HTML style 標籤
• 通常放在 HTML 的 head 標籤最底部
• 包含 selector, property
h1 {
color: brown;
}
Slide 49
Slide 49 text
如何使⽤用 CSS：使⽤用 Link 標籤引
⽤用 CSS 檔案
• 通常放在 HTML 的 head 標籤最底部
• 引入 css 檔案
• theme.css
h1 {
color: brown;
}
Slide 50
Slide 50 text
如何使⽤用 CSS：使⽤用 Link 標籤引
⽤用 CDN
• 引入網路路上的 CSS 檔案
• 也就是CDN (Content Delivery Network)
• 優勢在速度、缺點在安全性與控制度，但可以使⽤用integrity
確保內容不被惡惡意修改
Slide 51
Slide 51 text
如何使⽤用 CSS
• 那麼，最常⽤用的⽅方式是哪個？
• 使⽤用 Link 標籤引⽤用 CSS 檔案 / CDN
• 因為關注點分離，將樣式與結構分開更更簡潔
• 不過這個原則在現代網⾴頁開發也有不同的看法
Slide 52
Slide 52 text
寫出你的第⼀一⾏行行 CSS
• 創立 theme.css 檔案，輸入把「 H1 ⽂文字的顏⾊色改成
Brown」的樣式，在前幾⾴頁投影片有！
• 使⽤用 link 標籤引入 theme.css
• 注意路路徑，這段路路徑表⽰示 theme.css 要放在專案根⽬目錄
Slide 53
Slide 53 text
What does CSS say?
h1 {
color: brown;
}
• h1 是 Selector（選擇器），想起之前學過的爬蟲嗎？概念念是⼀一樣的
• color 是 Property （屬性）
• brown 是值
• 所有的 h1 ，顏⾊色都要是 Brown!
Slide 54
Slide 54 text
CSS Selector
詳細⽂文件
.myClass
選中 class 中有 myClass
的元素
#myID 選中 id 是 myID 的元素
{tag} ，如： p 選中所有指定標籤
p .myClass
選中 p 的 child 中，所有
class 中有 myClass 的元素
* 選中所有元素
Slide 55
Slide 55 text
CSS Selector
• Selector 詳細⽂文件
• CSS Selector ⼩小遊戲
Slide 56
Slide 56 text
常⽤用 CSS 外觀屬性
Slide 57
Slide 57 text
常⽤用 CSS 外觀屬性
• font-size
• font-family
• box model
• color
• background
• transition
Slide 58
Slide 58 text
font-size 調整⽂文字⼤大⼩小
h1 {
font-size: 36px;
}
• 絕對單位（常⽤用）：pixels (px)
• 相對單位（進階）：em, rem, % ...（補充說明）
Slide 59
Slide 59 text
color 調整⽂文字顏⾊色
h1 {
color: brown;
font-size: 36px;
}
• 顏⾊色可以使⽤用：
• ⾊色碼：#ffffff
• 顏⾊色名字：brown 參參考
• rgba, hsla：rgba(51, 170, 51, .1), hsla(0, 100%, 50%, 0.3)
• 設定背景顏⾊色要使⽤用 background-color 屬性！
Slide 60
Slide 60 text
border 設定邊框
img {
border: 5px solid #00F;
}
• 依序要給三個值：寬度、樣式、顏⾊色，並以空⽩白隔開
Slide 61
Slide 61 text
border-radius 設定邊框圓⾓角
img {
border: 5px solid #00F;
border-radius: 5px;
}
• 若若設定 50%，則會為（橢）圓形！
Slide 62
Slide 62 text
box model 了了解元件的⼤大⼩小與範圍
圖片來來源
在草地上野餐，
會在意這些範圍：
1. ⾃自⼰己的體型
2. 野餐墊的⼤大⼩小
3. 跟其他⼈人的距離
Slide 63
Slide 63 text
box model 了了解元件的⼤大⼩小與範圍
圖片來來源
規劃街道，
會在意這些範圍：
1. 房⼦子⼤大⼩小
2. 院⼦子（含牆壁？）的寬度
3. 街道的寬度
Slide 64
Slide 64 text
box model 了了解元件的⼤大⼩小與範圍
圖片來來源
網⾴頁的元素，
會在意這些範圍：
1. content 內容
2. padding 內距
3. border 邊框
4. margin 外距
Slide 65
Slide 65 text
box model 了了解元件的⼤大⼩小與範圍
• 那，當我們問⼀一個元素的長寬，會包含哪些東⻄西？
• 街道的例例⼦子，問房⼦子多⼤大？
• 房⼦子的⼤大⼩小
• 房⼦子的⼤大⼩小＋院⼦子＋牆壁
圖片來來源
Slide 66
Slide 66 text
box model 了了解元件的⼤大⼩小與範圍
• Box model ⼜又分兩兩種類型，差別在於 width , height 的定義
1. content-box，只有 content（padding, border 不會算進
width，為⼤大部分預設值）
2. border-box，padding + border + content
圖片來來源
Slide 67
Slide 67 text
box model 了了解元件的⼤大⼩小與範圍
圖片來來源
content box
Slide 68
Slide 68 text
box model 了了解元件的⼤大⼩小與範圍
圖片來來源
border box
Slide 69
Slide 69 text
box model 了了解元件的⼤大⼩小與範圍
• 差別在哪？
• 實際上，元件的範圍與 border-box 相同，因此：
• 要精準控制元素⼤大⼩小，使⽤用 border-box
• 要精準控制內容範圍，使⽤用 content-box，但是要知道元
素⼤大⼩小，要⾃自⼰己算（width + padding + border）
• 使⽤用 box-sizing 定義：border-box / content-box
圖片來來源
Slide 70
Slide 70 text
box model 了了解元件的⼤大⼩小與範圍
• width, height ：預設跟據內容來來調整⼤大⼩小
• padding：內距，為元件的⼀一部分，但預設不算在 width,
height中
• margin：外距，跟別⼈人的距離
• border：元件的邊框，即 padding 與 margin 的邊界
Slide 71
Slide 71 text
box model 了了解元件的⼤大⼩小與範圍
button {
width: 200px;
padding: 12px;
margin: 12px;
border: 1px solid black;
}
• Button 會長怎樣？
Slide 72
Slide 72 text
box model 了了解元件的⼤大⼩小與範圍
button {
width: 200px;
padding: 12px;
margin: 12px;
border: 1px solid black;
}
• 這是 border-box!
Slide 73
Slide 73 text
background-color 加入背景⾊色
html {
background-color: #ececec;
}
Slide 74
Slide 74 text
box-shadow 加入陰影
button {
box-shadow:#b9b4b4 0px 2px 2px 2px;
}
顏⾊色 ⽔水平
偏移
垂直
偏移
模糊
半徑
尺⼨寸
半徑
Slide 75
Slide 75 text
:hover 定義滑鼠移到上⽅方的樣式
• 以冒號加在 selector 後⽅方，稱作 Pseudo-classes
• ⽤用來來選擇元件的狀狀態（state）
• 使⽤用 hover 定義滑鼠游標在元件上⽅方時的樣式
Slide 76
Slide 76 text
box-shadow 加入陰影
button:hover {
box-shadow:#b9b4b4 0px 2px 2px 2px;
}
Slide 77
Slide 77 text
transition 加入漸變
button {
width: 200px;
padding: 12px;
margin: 12px;
border: 1px solid black;
transition: box-shadow 0.3s;
}
• 當有樣式變化的時候，以漸變變化
Slide 78
Slide 78 text
font-family 設定字體
html {
font-family: -apple-system,system-
ui,BlinkMacSystemFont,"Segoe
UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
Slide 79
Slide 79 text
font-family 設定字體
html {
font-family: -apple-system,system-
ui,BlinkMacSystemFont,"Segoe
UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
• CSS 的 C：Cascading 階層式，像瀑布⼀一樣
• 如果找不到第⼀一個字型，就找第⼆二個
• 希望使⽤用者看到的字體統⼀一嗎？使⽤用 web font
Slide 80
Slide 80 text
web font 使⽤用雲端字體
• https://fonts.google.com/
1. 新增字型
2. 引入字體，並指定樣式
Slide 81
Slide 81 text
web font 使⽤用雲端字體
• 中⽂文的思源⿊黑體（Noto Sans）仍在 Beta
• https://fonts.google.com/earlyaccess#Noto+Sans+TC
Slide 82
Slide 82 text
CSS 權重
• 重複指定樣式，如何顯⽰示？ CSS 有權重！
• 權重由⾼高到低：
• !important
• inline style
• ID selector
• Class, attributes, pseudo-class selector
• Type and pseudo-elements selector
• 其他：*, +, >, ~ …
• 相同權重時，後指定的適⽤用
Slide 83
Slide 83 text
CSS 權重
• 權重計算：
• #myid 比 .myclass ⾼高，因為 id 比 class ⾼高
• #myid h1 比 h1 ⾼高，因為 id*1 + type*1 比 type ⾼高
• #myid #myelement 比 #myelement ⾼高，因為 id*2 比
id*1 ⾼高
• 相同權重時，後指定的適⽤用
Slide 84
Slide 84 text
CSS 權重
h1 {background-color: yellow;}
h1 {background-color: red;}
• 重複指定兩兩次，後指定的適⽤用
Slide 85
Slide 85 text
CSS 權重
.intro {background-color: yellow;}
h1 {background-color: red;}
• 權重：Class*1 > type*1，因此 color 為 yellow
Slide 86
Slide 86 text
CSS 權重
h1 {
color: red;
}
#content h1 {
color: blue;
}
• 權重分別為
1. type*1
2. inline
3. id*1, type*1
• 權重：2 > 3 > 1 ，因此 color 為 #ffffff
Heading
Slide 87
Slide 87 text
CSS 權重
• 現實有更更多複雜的情況，延伸閱讀：
1. https://ithelp.ithome.com.tw/articles/10196454
2. https://www.w3schools.com/css/css_specificity.asp
3. https://developer.mozilla.org/en-US/docs/Web/CSS/
Specificity
4. https://specificity.keegan.st
Slide 88
Slide 88 text
如何查閱 CSS ⽂文件
• 推薦⽂文件
• cssreference.io
• w3schools
• 怎麼看？
• ⼀一個屬性有哪些欄欄位
• 每個欄欄位接受怎樣的值
Slide 89
Slide 89 text
CSS 的 Cascading
• 階層特性表現在兩兩個地⽅方：
• 屬性的階層處理理，遇到錯誤的值，就往下找另外⼀一個
• 處理理複雜的執⾏行行環境
• CSS 權重
• 製作樣式的雙⾯面刃，⼩小⼼心使⽤用，由⼤大範圍定義到⼩小
Slide 90
Slide 90 text
Exercise, 個⼈人網⾴頁加上 CSS !
1. 使⽤用 CSS，美化你的個⼈人網⾴頁，需⾄至少使⽤用以下屬性各⼀一
個：
• margin
• padding
• font-family
• font-size
• color
• :hover, transition
Slide 91
Slide 91 text
拯救 CSS 地獄，Bootstrap 降臨臨
幫你寫好 CSS，你只要寫 HTML 就好
Slide 92
Slide 92 text
看看 Bootstrap 的⼀一段 CSS 原始碼
.display-1 {
font-size: 6rem;
font-weight: 300;
line-height: 1.2;
}
.display-2 {
font-size: 5.5rem;
font-weight: 300;
line-height: 1.2;
}
.display-3 {
font-size: 4.5rem;
font-weight: 300;
line-height: 1.2;
}
.display-4 {
font-size: 3.5rem;
font-weight: 300;
line-height: 1.2;
}
Slide 93
Slide 93 text
拯救 CSS 地獄，Bootstrap 降臨臨
• what is bootstrap
• front-end component library (CSS + JS)
• Twitter 出品
• ⽤用⼾戶：NASA, FIFA, University of Washington …
Slide 94
Slide 94 text
為什什麼要⽤用 Bootstrap
• design consistent ，⼀一致的設計語⾔言
• responsive，響應式
• compatible，兼容性
Slide 95
Slide 95 text
Bootstrap 你的專案網站
Slide 96
Slide 96 text
看起來來太美好了了吧！
• 凡是看起來來能夠拯救世界的，往往就是下⼀一個⼤大魔王
Slide 97
Slide 97 text
如何使⽤用 Bootstrap
• how to link bootstrap，CSS & JS
• Use CDN!
• 查 Documentation, Documentation, Documentation
Slide 98
Slide 98 text
如何使⽤用 Bootstrap
• 在 head 底部放上：
• 在 body 底部放上：
參參考⽂文件
Slide 99
Slide 99 text
Bootstrap 外觀屬性簡介
• color
• shadow
• size
• border
Slide 100
Slide 100 text
Bootstrap colors
.text-primary
.text-secondary
.text-success
.text-danger
Slide 101
Slide 101 text
Bootstrap colors
.bg-primary
.bg-secondary
.bg-success
.bg-danger
Slide 102
Slide 102 text
Bootstrap colors
Slide 103
Slide 103 text
Bootstrap colors
1. 在⽂文件中可以找到更更多的功能與 class
2. p-3 mb-2 是什什麼意思？
Slide 104
Slide 104 text
Bootstrap Spacing
規則：{margin or pading}{sides}-{size}
舉例例：.mt-1
• 代表margin top : ($space * 0.25) * 1
spacing ⽂文件
Slide 105
Slide 105 text
Bootstrap shadow
Regular
shadow
Larger
shadow
Slide 106
Slide 106 text
Bootstrap 幫我們省下了了什什麼？
• 省下許多規劃介⾯面細節的時間，指定⽤用途就有⼤大略略的細節
• 可以不必寫 CSS，只要按照結構寫語意化的 Class
Slide 107
Slide 107 text
Bootstrap size
Width 25%
Width 50%
Width 75%
Width 100%
Slide 108
Slide 108 text
Bootstrap 元件簡介
• button
• navbar
• jumbotron
Slide 109
Slide 109 text
Bootstrap Button
Primary
Secondary
Success
Danger
1. 先來來看看⽂文件
2. 可以⽤用 a tag，什什麼時候會⽤用 a ?
3. ⼀一併設定了了 hover, active
Slide 110
Slide 110 text
Bootstrap Navbar 導覽列列
• Navbar 只能包含 support items
brand
商標
nav
導覽
form
表單
Slide 111
Slide 111 text
Bootstrap Navbar 導覽列列
• Navbar 使⽤用 .navbar-expand{-sm|-md|-lg|-xl} 給予響應式
折疊
Slide 112
Slide 112 text
Bootstrap Navbar
• Navbar 只能包含 support items：
• navbar-brand
• navbar-nav
• collapse.navbar-collapse
• …
Slide 114
Slide 114 text
Bootstrap Jumbotron
• 網站⾸首⾴頁的標語與介紹
Slide 115
Slide 115 text
Bootstrap Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn moreSlide 116
Slide 116 text
Bootstrap Grid System
Slide 117
Slide 117 text
Bootstrap Grid System
Slide 118
Slide 118 text
Bootstrap Grid System
• 網格系統⽤用於
• 輔助排版
• 同時實現響應式網站
• 不同尺⼨寸螢幕，不同欄欄寬
Slide 119
Slide 119 text
Bootstrap Grid System
• 使⽤用 col ，平均分配欄欄寬
One of three columns
One of three columns
One of three columns
Slide 120
Slide 120 text
Bootstrap Grid System
• 使⽤用 col-sm，製作響應式排版
small break point
small break point
small break point
Slide 121
Slide 121 text
Bootstrap Grid System
• col-sm 是 small
• 什什麼的⼤大⼩小？ 斷點 （breakpoint ）!
• 在斷點之下的尺⼨寸，column 會折疊
Slide 122
Slide 122 text
Bootstrap Grid System
• 使⽤用 col-lg，製作響應式排版
large break point
large break point
large break point
Slide 123
Slide 123 text
Bootstrap Grid System
• ⽬目前學了了平均欄欄寬，那如果我想要不⼀一樣寬呢？
• 可以！使⽤用 col-{數字}
• 每⼀一欄欄總和是 12，製作⼀一個 1:2:1 的網格可以如下：
col-6
col-3 col-3
Slide 124
Slide 124 text
Bootstrap Grid System
• 也可以和平均欄欄寬混合使⽤用！
col is auto width
col for 8
col is auto width
Slide 125
Slide 125 text
Bootstrap Grid System
• col 必須是 row 直接的 child
• row 只能放 col（和其所有變形如 col-sm）
• row 必須放在 container 裏頭
Slide 126
Slide 126 text
Bootstrap 的常⾒見見問題
• css & js 都有引入嗎？
• 先找找官網⽂文件，答案都在網站裡！
• 去 stackoverflow 找找吧
Slide 127
Slide 127 text
Bootstrap 的壞處
• 可以不寫 CSS 了了，但必須換成 Bootstrap 的腦袋思考
• ⽽而且必須按照 bootstrap 的邏輯寫 HTML 與 Class
Slide 128
Slide 128 text
Give it a try, Landing Page !
• 使⽤用 bootstrap 切出⼀一個專案介紹網⾴頁，需使⽤用以下元件：
• Navbar, nav-brand, nav
• Jumbotron
• container, row, col
Slide 129
Slide 129 text
Bootstrap 你的專案網站
Slide 130
Slide 130 text
reference
• buldma, semantic UI
• htmlreference.io
• cssreference.io
• https://medium.com/wdstack/how-to-
bootstrap-94abe3525442