[CS Foundation] Web - 2 - HTML and CSS Web Course

HTML, CSS and Bootstrap 李⾄至青

這個早上的⼤大綱 • HTML 簡介與常⽤用標籤⽤用法 • CSS 簡介與常⽤用外觀屬性⽤用法 • Bootstrap 簡介
• Bootstrap 常⽤用元件介紹 • Bootstrap 網格系統

⼼心理理建設 • web 易易學難精 • ⽤用數個⼩小時掌握骨幹，⽤用數個⽉月掌握細節 • 那要怎麼辦？善⽤用資源！ • 不必學會所有細節，就像不必倒背⼀一部字典
• 但要能夠查字典，然後知道怎麼⽤用

Sli.do #K694

這堂課結束之後我們可以做出什什麼 • 個⼈人網⾴頁 & 專案宣傳⾴頁⾯面 • 如果你都會了了，可以開始寫作業

這堂課結束之後我們可以做出什什麼

範例例程式碼 git clone https://github.com/x-village/web-html-css- bootstrap-course.git

開發⼯工具 • VScode + Live server (推薦) • Live reload
+ local server • Live reload 讓每次修改程式碼，網⾴頁會⾃自動刷新 • Local server 讓我們可以以 web 環境測試程式碼 • 為什什麼我們需要 Local server

html, CSS, JS 的⾓角⾊色 HTML 骨架 CSS 衣服 JavaScript 動作

HyperText Markup Language 超⽂文件標⽰示語⾔言：網⾴頁的骨架

HyperText Markup Language <!DOCTYPE html> <html> <head> <title>Page Title</title> </head>
<body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>

開始你的第⼀一個網⾴頁專案 • 創立⼀一個空的資料夾作為專案資料夾，命名 personal-page • 創建⼀一個檔案 index.html • 把上⾴頁的 html
code 貼上

如何使⽤用 html 檔案 • 做法⼀一：可以直接⽤用瀏覽器打開它

如何使⽤用 html 檔案 • 做法⼆二（推薦）：開啟測試⽤用本地伺服器 • 使⽤用 VScode 打開專案資料夾，點擊右下⾓角 Go
Live • 即會以瀏覽器打開 http://127.0.0.1 開頭的網址，顯⽰示 index.html 檔案的內容，並即時更更新 • 注意！Live Server 建立的伺服器，路路徑是跟據⽬目前打開的資料夾

如何使⽤用 html 檔案 • 如果沒有看到 Go Live 的按鈕，可以⽤用以下⽅方法： • 按下
command+shift+p (macOS)/ ctrl+shift+p (windows) • 會展開 VScode 的指令列列，輸入 live server ，找到 Open with Live Server 按下 enter

寫出你的第⼀一個網⾴頁 1. 按著「開啟你的第⼀一個網⾴頁專案」的步驟做完 2. Go Live! （參參考前兩兩⾴頁，打開本地伺服器） 3. 把⼤大標題改成你的名字 4.
把段落落改成⼀一句句話介紹你⾃自⼰己 5. 參參考 h1 標籤，嘗試以 h2 標籤，加入⼀一個副標題說明你的背景，例例如： X-Village 助教、屏東⼈人

What does HTML say? <!DOCTYPE html> <html> <head> <title>Page Title</title>
</head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> • ⼤大部分標籤需要標⽰示兩兩次<…> <…/>，表⽰示開始和結束 • html 內有 head 跟 body • body 內有 2 個標籤， h1 跟 p • 寫在開始與結束中間的⽂文字會顯⽰示在網⾴頁上，不同的標籤有不同的特性、預設樣式

What does HTML say? <!DOCTYPE html> <html> <head> <title>Page Title</title>
</head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> • <!DOCTYPE html> 標記這是⼀一個 html ⽂文件 • html 標記⽂文件的範圍 • head 標記網⾴頁的後設資料（metadata），即描述網⾴頁的資料：網⾴頁標題、作者... • 不會直接顯⽰示在網⾴頁上 • body 標記網⾴頁內容，即會直接顯⽰示在網⾴頁上的內容

What does HTML say? <h1>This is a Heading</h1> <p>This is
a paragraph.</p> • 這堂課，我們會專注於 body 內的網⾴頁內容 •h1, h2, h3, h4, h5, h6 • header ，標題⽂文字的意思 • 標題標籤，h1 最⼤大， h6 最⼩小 •p • paragraph，段落落⽂文字的意思 • 段落落標籤

還有很多的標籤！ • 接下來來介紹常⽤用的標籤⽤用法： • 標籤意義 a anchor img image
ul unordered list li list item div division span span b bold

加入連結：Anchor 標籤 <a href="https://www.google.com.tw">估狗</a> 連結網址點下去會打開的網⾴頁連結連結⽂文字預設會顯⽰示藍藍⾊色底線

沒錯！標籤也有屬性 <a href="https://www.google.com.tw">估狗</a> • 在標籤開始的 "<" 與 ">" 之間，可以賦予屬性對應的值 •
如： href="https://www.google.com.tw" • 標籤預設有什什麼屬性，可以給怎樣的值？查⽂文件

加入圖片：Image 標籤 <img src="./pudding.jpg" alt="Pudding"> 圖片網址圖片失效時的顯⽰示⽂文字 img ⽂文件傳送⾨門這個標籤，不需指定結束！

取得圖片的路路徑 1. 相對網址 "./pudding.jpg" 2. 絕對網址 "http://127.0.0.1:5500/pudding.jpg" "/pudding.jpg"

加入清單：ul, li 標籤 <ul> <li>喜歡喝⿂魚池的⽔水</li> <li>喜歡在⽑毛茸茸的地⽅方打滾</li> <li>對骨頭沒興趣</li> </ul> ul ⽂文件傳送⾨門
li 必定與 ul 或 ol ⼀一起使⽤用！

Parent and Child • HTML 同時也表達階層關係，parent (ul) 有五個 child (li)
<ul> <li>喜歡喝⿂魚池的⽔水</li> <li>喜歡在⽑毛茸茸的地⽅方打滾</li> <li>對骨頭沒興趣</li> </ul>

加入粗體⽂文字： bold 標籤 <ul> <li>喜歡喝⿂魚池的⽔水</li> <li>喜歡在⽑毛茸茸的地⽅方打滾</li> <li>對<b>骨頭</b>沒興趣</li> </ul> 加粗⽂文字

加入 div, span • 使⽤用時機：製造群組，分隔元素，⽅方便便給予樣式 • （此處link是無效的路路徑，僅⽰示意） <div> <a href="link1">1-1</a>
<a href="link2">1-2</a> </div> <div> <a href="link3">2-1</a> <a href="link4">2-2</a> <a href="link5">2-3</a> </div>

表單標籤 • 接下來來介紹表單標籤的⽤用法： • input • label • textarea •
button • form

來來製作⼀一個留留⾔言表單吧！ • 留留⼀一次⾔言，需要填哪些資料？ 1. 稱謂 2. email 3. 內⽂文

使⽤用 Input 加入單⾏行行欄欄位 <input type="text" placeholder="Dog Pudding" name="name"> <input type="email"
placeholder="[email protected]" name="email"> • Type 指定 input 種類，輸入⽂文字檢查 • placeholder 指定空欄欄位顯⽰示⽂文字 • name 指定回傳給伺服器時，欄欄位的名字 input ⽂文件傳送⾨門

使⽤用 label 加入欄欄位說明 <label for="form-name"> Name </label> <input type="text" placeholder="Li
Pudding" name="name" id="form-name"> <label for="form-email"> Email </label> <input type="email" placeholder="[email protected]" name="email" id="form- email"> • 在 input 加上 id 以識別欄欄位，id 必須是獨⼀一無⼆二的 • 在 label 加上 for ，並給予對應的 input id 作為值 • 點擊 label時，游標會⾃自動聚焦在對應的欄欄位

使⽤用 textarea 加入多⾏行行欄欄位 <textarea name="message" cols="60" rows="10"></textarea> • 有許多屬性可以使⽤用： •
minlength, maxlength • placeholder • cols, rows • … textarea ⽂文件傳送⾨門

使⽤用 form 定義表單動作 <form action="/sendmsg" method="post"> …(剛剛定義的所有表單) </form> • 這代表送出這個表單時，會以
"post" ⽅方法，送出表單內的資料（name=value），到網址 "/sendmsg" form ⽂文件傳送⾨門

使⽤用 Button 定義送出按鈕 <button type="submit">Submit</button> • Button 要是 form 的
child • 點擊按鈕送出資料，送出的⽅方式、網址定義在 form 的屬性內！ button ⽂文件傳送⾨門

⽬目前為⽌止的表單程式碼 <form action="/sendmsg" method="post"> <p> <label for="form-name"> Name </label> <input
type="text" placeholder="Li Pudding" name="name" id="form-name"> <label for="form-email"> Email </label> <input type="email" placeholder="[email protected]" name="email" id="form-email"> </p> <textarea name="message" id="form-message" cols="60" rows="10"></textarea> <p> <button type="submit">Submit</button> </p> </form>

送出的資料 1. 網站端輸入資料，然後點按鈕送出 2. 在開發者介⾯面看 network > request資料

表單還有其他的模樣跟⽤用法 • Input: checkbox, radio • legend • ﬁeldset •
select

語意化的 HTML • 寫 HTML 除了了要建構骨架 • 也必須和搜尋引擎打好關係（SEO） • use
the right tag • header • section • footer • … • 搜尋引擎最佳化 (SEO) 入⾨門指南

如何查閱 HTML ⽂文件 • 推薦⽂文件 • htmlreference.io • w3schools •
怎麼看？ • 標籤需不需要標記結尾（self-closing） • ⼀一個標籤有哪些必要屬性，哪些選填屬性 • 屬性接受怎樣的值

emmet：召喚 HTML, CSS的⿊黑魔法 • 在 VScode 中打開 .html 檔，輸入語法使⽤用 tab
展開： 1. ! + tab 2. .title + tab 3. ul>li*5 + tab emmet ⽂文件傳送⾨門

Exercise, 個⼈人網⾴頁 ! 1. 使⽤用 HTML 寫⼀一個個⼈人網⾴頁，需⾄至少使⽤用以下標籤各⼀一個： • h1 •
h2 • img • p • a 2. 參參考以下連結，使⽤用 video 標籤嵌入⼀一個影片，可以是（但不限於）你的⾃自我介紹影片： • https://htmlreference.io/element/video/ • https://www.w3schools.com/htmL/html5_video.asp

Exercise, 個⼈人網⾴頁 !

Cascading Style Sheets 階層式樣式表：網⾴頁的衣服

Cascading Style Sheets h1 { color: brown; }

如何使⽤用 CSS • inline CSS • HTML Style • 使⽤用
Link 標籤引⽤用 CSS 檔案 • 使⽤用 Link 標籤引⽤用 CDN

如何使⽤用 CSS：inline CSS • 寫在 html 的標籤 style 屬性中 •
只對這個標籤有效 <h1 style="color:brown;">This is a Heading</h1>

如何使⽤用 CSS：HTML style 標籤 • 通常放在 HTML 的 head 標籤最底部
• 包含 selector, property <style> h1 { color: brown; } </style>

如何使⽤用 CSS：使⽤用 Link 標籤引⽤用 CSS 檔案 • 通常放在 HTML
的 head 標籤最底部 • 引入 css 檔案 <link rel="stylesheet" type="text/css" href="theme.css"> • theme.css h1 { color: brown; }

如何使⽤用 CSS：使⽤用 Link 標籤引⽤用 CDN • 引入網路路上的 CSS 檔案
• 也就是CDN (Content Delivery Network) • 優勢在速度、缺點在安全性與控制度，但可以使⽤用integrity 確保內容不被惡惡意修改 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/ K68vbdEjh4u" crossorigin="anonymous">

如何使⽤用 CSS • 那麼，最常⽤用的⽅方式是哪個？ • 使⽤用 Link 標籤引⽤用 CSS 檔案
/ CDN • 因為關注點分離，將樣式與結構分開更更簡潔 • 不過這個原則在現代網⾴頁開發也有不同的看法

寫出你的第⼀一⾏行行 CSS • 創立 theme.css 檔案，輸入把「 H1 ⽂文字的顏⾊色改成 Brown」的樣式，在前幾⾴頁投影片有！ •
使⽤用 link 標籤引入 theme.css • 注意路路徑，這段路路徑表⽰示 theme.css 要放在專案根⽬目錄 <link rel="stylesheet" type="text/css" href="/theme.css">

What does CSS say? h1 { color: brown; } •
h1 是 Selector（選擇器），想起之前學過的爬蟲嗎？概念念是⼀一樣的 • color 是 Property （屬性） • brown 是值 • 所有的 h1 ，顏⾊色都要是 Brown!

CSS Selector 詳細⽂文件 .myClass 選中 class 中有 myClass 的元素 <div
class="myClass"></div> #myID 選中 id 是 myID 的元素 <div id="id"></div> {tag} ，如： p 選中所有指定標籤 <p></p> p .myClass 選中 p 的 child 中，所有 class 中有 myClass 的元素 <p> <span class=“myClass"></ span> </p> * 選中所有元素

CSS Selector • Selector 詳細⽂文件 • CSS Selector ⼩小遊戲

常⽤用 CSS 外觀屬性

常⽤用 CSS 外觀屬性 • font-size • font-family • box model
• color • background • transition

font-size 調整⽂文字⼤大⼩小 h1 { font-size: 36px; } • 絕對單位（常⽤用）：pixels (px)
• 相對單位（進階）：em, rem, % ...（補充說明）

color 調整⽂文字顏⾊色 h1 { color: brown; font-size: 36px; } •
顏⾊色可以使⽤用： • ⾊色碼：#ffffff • 顏⾊色名字：brown 參參考 • rgba, hsla：rgba(51, 170, 51, .1), hsla(0, 100%, 50%, 0.3) • 設定背景顏⾊色要使⽤用 background-color 屬性！

border 設定邊框 img { border: 5px solid #00F; } •
依序要給三個值：寬度、樣式、顏⾊色，並以空⽩白隔開

border-radius 設定邊框圓⾓角 img { border: 5px solid #00F; border-radius: 5px;
} • 若若設定 50%，則會為（橢）圓形！

box model 了了解元件的⼤大⼩小與範圍圖片來來源在草地上野餐，會在意這些範圍： 1. ⾃自⼰己的體型 2. 野餐墊的⼤大⼩小
3. 跟其他⼈人的距離

box model 了了解元件的⼤大⼩小與範圍圖片來來源規劃街道，會在意這些範圍： 1. 房⼦子⼤大⼩小 2. 院⼦子（含牆壁？）的寬度
3. 街道的寬度

box model 了了解元件的⼤大⼩小與範圍圖片來來源網⾴頁的元素，會在意這些範圍： 1. content 內容 2.
padding 內距 3. border 邊框 4. margin 外距

box model 了了解元件的⼤大⼩小與範圍 • 那，當我們問⼀一個元素的長寬，會包含哪些東⻄西？ • 街道的例例⼦子，問房⼦子多⼤大？ • 房⼦子的⼤大⼩小 •
房⼦子的⼤大⼩小＋院⼦子＋牆壁圖片來來源

box model 了了解元件的⼤大⼩小與範圍 • Box model ⼜又分兩兩種類型，差別在於 width , height
的定義 1. content-box，只有 content（padding, border 不會算進 width，為⼤大部分預設值） 2. border-box，padding + border + content 圖片來來源

box model 了了解元件的⼤大⼩小與範圍圖片來來源 content box

box model 了了解元件的⼤大⼩小與範圍圖片來來源 border box

box model 了了解元件的⼤大⼩小與範圍 • 差別在哪？ • 實際上，元件的範圍與 border-box 相同，因此： •
要精準控制元素⼤大⼩小，使⽤用 border-box • 要精準控制內容範圍，使⽤用 content-box，但是要知道元素⼤大⼩小，要⾃自⼰己算（width + padding + border） • 使⽤用 box-sizing 定義：border-box / content-box 圖片來來源

box model 了了解元件的⼤大⼩小與範圍 • width, height ：預設跟據內容來來調整⼤大⼩小 • padding：內距，為元件的⼀一部分，但預設不算在 width,
height中 • margin：外距，跟別⼈人的距離 • border：元件的邊框，即 padding 與 margin 的邊界

box model 了了解元件的⼤大⼩小與範圍 button { width: 200px; padding: 12px; margin:
12px; border: 1px solid black; } • Button 會長怎樣？

box model 了了解元件的⼤大⼩小與範圍 button { width: 200px; padding: 12px; margin:
12px; border: 1px solid black; } • 這是 border-box!

background-color 加入背景⾊色 html { background-color: #ececec; }

box-shadow 加入陰影 button { box-shadow:#b9b4b4 0px 2px 2px 2px; }
顏⾊色⽔水平偏移垂直偏移模糊半徑尺⼨寸半徑

:hover 定義滑鼠移到上⽅方的樣式 • 以冒號加在 selector 後⽅方，稱作 Pseudo-classes • ⽤用來來選擇元件的狀狀態（state） •
使⽤用 hover 定義滑鼠游標在元件上⽅方時的樣式

box-shadow 加入陰影 button:hover { box-shadow:#b9b4b4 0px 2px 2px 2px; }

transition 加入漸變 button { width: 200px; padding: 12px; margin: 12px;
border: 1px solid black; transition: box-shadow 0.3s; } • 當有樣式變化的時候，以漸變變化

font-family 設定字體 html { font-family: -apple-system,system- ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }

font-family 設定字體 html { font-family: -apple-system,system- ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
• CSS 的 C：Cascading 階層式，像瀑布⼀一樣 • 如果找不到第⼀一個字型，就找第⼆二個 • 希望使⽤用者看到的字體統⼀一嗎？使⽤用 web font

web font 使⽤用雲端字體 • https://fonts.google.com/ 1. 新增字型 2. 引入字體，並指定樣式

web font 使⽤用雲端字體 • 中⽂文的思源⿊黑體（Noto Sans）仍在 Beta • https://fonts.google.com/earlyaccess#Noto+Sans+TC

CSS 權重 • 重複指定樣式，如何顯⽰示？ CSS 有權重！ • 權重由⾼高到低： • !important
• inline style • ID selector • Class, attributes, pseudo-class selector • Type and pseudo-elements selector • 其他：*, +, >, ~ … • 相同權重時，後指定的適⽤用

CSS 權重 • 權重計算： • #myid 比 .myclass ⾼高，因為 id
比 class ⾼高 • #myid h1 比 h1 ⾼高，因為 id*1 + type*1 比 type ⾼高 • #myid #myelement 比 #myelement ⾼高，因為 id*2 比 id*1 ⾼高 • 相同權重時，後指定的適⽤用

CSS 權重 h1 {background-color: yellow;} h1 {background-color: red;} • 重複指定兩兩次，後指定的適⽤用

CSS 權重 .intro {background-color: yellow;} h1 {background-color: red;} • 權重：Class*1
> type*1，因此 color 為 yellow

CSS 權重 h1 { color: red; } <div id="content"><h1 style="color:
#ffffff">Heading</h1></div> #content h1 { color: blue; } • 權重分別為 1. type*1 2. inline 3. id*1, type*1 • 權重：2 > 3 > 1 ，因此 color 為 #ffffff

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

如何查閱 CSS ⽂文件 • 推薦⽂文件 • cssreference.io • w3schools •
怎麼看？ • ⼀一個屬性有哪些欄欄位 • 每個欄欄位接受怎樣的值

CSS 的 Cascading • 階層特性表現在兩兩個地⽅方： • 屬性的階層處理理，遇到錯誤的值，就往下找另外⼀一個 • 處理理複雜的執⾏行行環境 •
CSS 權重 • 製作樣式的雙⾯面刃，⼩小⼼心使⽤用，由⼤大範圍定義到⼩小

Exercise, 個⼈人網⾴頁加上 CSS ! 1. 使⽤用 CSS，美化你的個⼈人網⾴頁，需⾄至少使⽤用以下屬性各⼀一個： • margin
• padding • font-family • font-size • color • :hover, transition

拯救 CSS 地獄，Bootstrap 降臨臨幫你寫好 CSS，你只要寫 HTML 就好

看看 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; }

拯救 CSS 地獄，Bootstrap 降臨臨 • what is bootstrap • front-end
component library (CSS + JS) • Twitter 出品 • ⽤用⼾戶：NASA, FIFA, University of Washington …

為什什麼要⽤用 Bootstrap • design consistent ，⼀一致的設計語⾔言 • responsive，響應式 • compatible，兼容性

Bootstrap 你的專案網站

看起來來太美好了了吧！ • 凡是看起來來能夠拯救世界的，往往就是下⼀一個⼤大魔王

如何使⽤用 Bootstrap • how to link bootstrap，CSS & JS •
Use CDN! • 查 Documentation, Documentation, Documentation

如何使⽤用 Bootstrap • 在 head 底部放上： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/ 4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/ SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> • 在 body 底部放上： <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/ X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/ popper.min.js" integrity="sha384- ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/ bootstrap.min.js" integrity="sha384- ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 參參考⽂文件

Bootstrap 外觀屬性簡介 • color • shadow • size • border

Bootstrap colors <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p>

Bootstrap colors <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2
bg-secondary text-white"> .bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>

Bootstrap colors <span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border
border-success"></span> <span class="border border-danger"></span>

Bootstrap colors 1. 在⽂文件中可以找到更更多的功能與 class 2. p-3 mb-2 是什什麼意思？

Bootstrap Spacing 規則：{margin or pading}{sides}-{size} 舉例例：.mt-1 • 代表margin top :
($space * 0.25) * 1 spacing ⽂文件

Bootstrap shadow <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div> <div
class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

Bootstrap 幫我們省下了了什什麼？ • 省下許多規劃介⾯面細節的時間，指定⽤用途就有⼤大略略的細節 • 可以不必寫 CSS，只要按照結構寫語意化的 Class

Bootstrap size <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> <div class="w-50
p-3" style="background-color: #eee;">Width 50%</div> <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>

Bootstrap 元件簡介 • button • navbar • jumbotron

Bootstrap Button <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> 1. 先來來看看⽂文件 2. 可以⽤用 a tag，什什麼時候會⽤用 a ? 3. ⼀一併設定了了 hover, active

Bootstrap Navbar 導覽列列 • Navbar 只能包含 support items brand 商標
nav 導覽 form 表單

Bootstrap Navbar 導覽列列 • Navbar 使⽤用 .navbar-expand{-sm|-md|-lg|-xl} 給予響應式折疊

Bootstrap Navbar • Navbar 只能包含 support items： • navbar-brand •
navbar-nav • collapse.navbar-collapse • …

Bootstrap Navbar <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria- label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <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> </ul> </div> </nav>

Bootstrap Jumbotron • 網站⾸首⾴頁的標語與介紹

Bootstrap Jumbotron <div class="jumbotron"> <h1 class="display-4">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> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div>

Bootstrap Grid System

Bootstrap Grid System • 網格系統⽤用於 • 輔助排版 • 同時實現響應式網站 •
不同尺⼨寸螢幕，不同欄欄寬

Bootstrap Grid System <div class="container"> <div class="row"> <div class="col"> One
of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div> • 使⽤用 col ，平均分配欄欄寬

Bootstrap Grid System <div class="container"> <div class="row"> <div class="col-sm"> small
break point </div> <div class="col-sm"> small break point </div> <div class="col-sm"> small break point </div> </div> </div> • 使⽤用 col-sm，製作響應式排版

Bootstrap Grid System • col-sm 是 small • 什什麼的⼤大⼩小？斷點
（breakpoint ）! • 在斷點之下的尺⼨寸，column 會折疊

Bootstrap Grid System <div class="container"> <div class="row"> <div class="col-lg"> large
break point </div> <div class="col-lg"> large break point </div> <div class="col-lg"> large break point </div> </div> </div> • 使⽤用 col-lg，製作響應式排版

Bootstrap Grid System • ⽬目前學了了平均欄欄寬，那如果我想要不⼀一樣寬呢？ • 可以！使⽤用 col-{數字} • 每⼀一欄欄總和是
12，製作⼀一個 1:2:1 的網格可以如下： col-6 col-3 col-3

Bootstrap Grid System <div class="container"> <div class="row"> <div class="col-lg"> col
is auto width </div> <div class="col-lg-8"> col for 8 </div> <div class="col-lg"> col is auto width </div> </div> </div> • 也可以和平均欄欄寬混合使⽤用！

Bootstrap Grid System • col 必須是 row 直接的 child •
row 只能放 col（和其所有變形如 col-sm） • row 必須放在 container 裏頭

Bootstrap 的常⾒見見問題 • css & js 都有引入嗎？ • 先找找官網⽂文件，答案都在網站裡！ •
去 stackoverﬂow 找找吧

Bootstrap 的壞處 • 可以不寫 CSS 了了，但必須換成 Bootstrap 的腦袋思考 • ⽽而且必須按照
bootstrap 的邏輯寫 HTML 與 Class

Give it a try, Landing Page ! • 使⽤用 bootstrap
切出⼀一個專案介紹網⾴頁，需使⽤用以下元件： • Navbar, nav-brand, nav • Jumbotron • container, row, col

Bootstrap 你的專案網站

reference • buldma, semantic UI • htmlreference.io • cssreference.io •
https://medium.com/wdstack/how-to- bootstrap-94abe3525442

[CS Foundation] Web - 2 - HTML and CSS Web Course

[CS Foundation] Web - 2 - HTML and CSS Web Course

More Decks by x-village

Other Decks in Programming

Featured

Transcript