HTML & Bootstrap

HTML & Bootstrap Tutorial In Action NTUST Jeremy Yen

HTML REVIEW http://ofﬁce.ntustsg.com/bootstrap.zip 2

基本⾴頁⾯面 <!DOCTYPE html> <html> <head> ! <title>頁面標題</title> ! <meta http-equiv="content-type"
content="text/ html;charset=utf-8" /> </head> <body> !  </body> </html> 3

連結 <a href="連結位置" title="滑鼠小提示文字" target="_blank">顯示文字</a> 加入 target="_blank" 會使連結在新視窗開啟
4

圖⽚片 <img src="圖片位置" alt="圖片說明" title="滑鼠小提示文字"/> 5

可點選的圖⽚片 <a href="http:/ /www.google.com"> ! <img src="google.png"> </a> 6

標題 <h1>標題</h1> <h2>標題</h2> <h3>標題</h3> <h4>標題</h4> 數字越大字型越小 7

⽂文件結構 <p>文章段落</p> <div>分區標籤</div> <span>小分區標籤</span> <br/> 換行 <hr/> 水平線 8

⽂文字樣式 <strong>粗體</strong> <i>斜體</i> <del>刪除線</del> 9

列表 <ul> ! <li>項目</li> ! <li>項目</li> </ul> 10

表單 <form method="POST" action=""> ! <legend>標題</legend> ! <input type="text" value="輸入值">
! <select> ! ! <option value="">下拉選單</option> ! </select> ! <button>按鈕</button> </form> 11

ID / Class <a href="連結位置" id="link" class= "link">顯示文字</a> 同 ID
在同一個頁面只能出現一個 12

ID 選擇器 <style> ! #link { ! ! color: red;
! } </style> 13

Class 選擇器 <style> ! .link { ! ! color: red;
! } </style> 14

Try It 在⼀一個⾴頁⾯面中隨便加⼊入上述元素 15

Twitter Bootstrap 開放的 CSS 樣式資源庫 16

使⽤用⽅方法 <link href="bootstrap.css" rel="stylesheet"> 17

⾺馬上⽣生效 18

運作原理將你的 HTML 加⼊入特定 class 後，Bootstrap CSS 會⾃自動套⽤用樣式上去 19

參考 • 官⽅方⽂文件與範例 • http://getbootstrap.com/2.3.2/base-css.html • COSCUP 2012 簡報 •
https://speakerdeck.com/evenwu/twitter- bootstrap-hao-yong-de-wang-ye-she-ji- kuang-jia-1 20

⾺馬上動⼿手⾄至參考網站複製 HTML 並編輯教材裡的 index.htm 21

HTML & Bootstrap

HTML & Bootstrap

Jeremy Yen

More Decks by Jeremy Yen

Other Decks in Technology

Featured

Transcript

HTML & Bootstrap Tutorial In Action NTUST Jeremy Yen

HTML REVIEW http://ofﬁce.ntustsg.com/bootstrap.zip 2

基本⾴頁⾯面 <!DOCTYPE html> <html> <head> ! <title>頁面標題</title> ! <meta http-equiv="content-type"

連結 <a href="連結位置" title="滑鼠小提示文字" target="_blank">顯示文字</a> 加入 target="_blank" 會使連結在新視窗開啟

圖⽚片 <img src="圖片位置" alt="圖片說明" title="滑鼠小提示文字"/> 5

可點選的圖⽚片 <a href="http:/ /www.google.com"> ! <img src="google.png"> </a> 6

標題 <h1>標題</h1> <h2>標題</h2> <h3>標題</h3> <h4>標題</h4> 數字越大字型越小 7

⽂文件結構 <p>文章段落</p> <div>分區標籤</div> <span>小分區標籤</span> <br/> 換行 <hr/> 水平線 8

⽂文字樣式 <strong>粗體</strong> <i>斜體</i> <del>刪除線</del> 9

列表 <ul> ! <li>項目</li> ! <li>項目</li> </ul> 10

表單 <form method="POST" action=""> ! <legend>標題</legend> ! <input type="text" value="輸入值">

ID / Class <a href="連結位置" id="link" class= "link">顯示文字</a> 同 ID

ID 選擇器 <style> ! #link { ! ! color: red;

Class 選擇器 <style> ! .link { ! ! color: red;

Try It 在⼀一個⾴頁⾯面中隨便加⼊入上述元素 15

Twitter Bootstrap 開放的 CSS 樣式資源庫 16

使⽤用⽅方法 <link href="bootstrap.css" rel="stylesheet"> 17

⾺馬上⽣生效 18

運作原理將你的 HTML 加⼊入特定 class 後，Bootstrap CSS 會⾃自動套⽤用樣式上去 19

參考 • 官⽅方⽂文件與範例 • http://getbootstrap.com/2.3.2/base-css.html • COSCUP 2012 簡報 •

⾺馬上動⼿手⾄至參考網站複製 HTML 並編輯教材裡的 index.htm 21