HTML & Bootstrap

Tutorial In Action

Transcript

1. HTML & Bootstrap Tutorial In Action NTUST Jeremy Yen
2. HTML REVIEW http://office.ntustsg.com/bootstrap.zip 2
3. 基本⾴頁⾯面 <!DOCTYPE html> <html> <head> ! <title>頁面標題</title> ! <meta http-equiv="content-type" content="text/ html;charset=utf-8" /> </head> <body> ! <!-- 頁面內容 --> </body> </html> 3
4. 連結 <a href="連結位置" title="滑鼠小提示文 字" target="_blank">顯示文字</a> 加入 target="_blank" 會使連結在新視窗 開啟 4
5. 圖⽚片 <img src="圖片位置" alt="圖片說明" title="滑鼠小提示文字"/> 5
6. 可點選的圖⽚片 <a href="http:/ /www.google.com"> ! <img src="google.png"> </a> 6
7. 標題 <h1>標題</h1> <h2>標題</h2> <h3>標題</h3> <h4>標題</h4> 數字越大字型越小 7
8. ⽂文件結構 <p>文章段落</p> <div>分區標籤</div> <span>小分區標籤</span> <br/> 換行 <hr/> 水平線 8
9. ⽂文字樣式 <strong>粗體</strong> <i>斜體</i> <del>刪除線</del> 9
10. 列表 <ul> ! <li>項目</li> ! <li>項目</li> </ul> 10
11. 表單 <form method="POST" action=""> ! <legend>標題</legend> ! <input type="text" value="輸入值"> ! <select> ! ! <option value="">下拉選單</option> ! </select> ! <button>按鈕</button> </form> 11
12. ID / Class <a href="連結位置" id="link" class= "link">顯示文字</a> 同 ID 在同一個頁面只能出現一個 12
13. ID 選擇器 <style> ! #link { ! ! color: red; ! } </style> 13
14. Class 選擇器 <style> ! .link { ! ! color: red; ! } </style> 14
15. Try It 在⼀一個⾴頁⾯面中隨便加⼊入上述元素 15
16. Twitter Bootstrap 開放的 CSS 樣式資源庫 16
17. 使⽤用⽅方法 <link href="bootstrap.css" rel="stylesheet"> 17
18. ⾺馬上⽣生效 18
19. 運作原理 將你的 HTML 加⼊入特定 class 後，Bootstrap CSS 會 ⾃自動套⽤用樣式上去 19
20. 參考 • 官⽅方⽂文件與範例 • 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
21. ⾺馬上動⼿手 ⾄至參考網站複製 HTML 並編輯教材裡的 index.htm 21