系列課程主題 從零開始的網頁設計- HTML & CSS基礎建設 第五堂課 4/28 - 偷呷步的網站快速入門

1. 偷呷步的網站快速入門
LESSON 5

2. 偷呷步的網站快速入門
LESSON 5
1. Bootstrap 的介紹
2. Bootstrap 的使用方法
3. Bootstrap 的實務教學

3. 什麼是Bootstrap？
圖⽚片來源

5. Help to show content in browsers
Help to style the content
Help to interact with content

6. 圖⽚片來源
套⽤用框架 快速做好網站選你喜歡的框架（framwork）
使⽤用現成的前端框架
① ② ③

7. 善⽤用前端框架，幫助你網站開發
圖⽚片來源

8. 使⽤用Bootstrap的優點？
圖⽚片來源
加速網站開發
有規則可依據、維護性⾼高

9. Bootstrap
ㄓ
圖⽚片來源
HTML、CSS 和 Javascript 框架
最新版為Bootstrap 3

10. Bootstrap 2 圖⽚片來源
你也可以使用

11. more…
Bootstrap2 與Bootstrap3的差別
No more fallback Support for IE7
Fluid by default
Glyph icons use font files

12. 偷呷步的網站快速入門
LESSON 5
1. Bootstrap 的介紹
2. Bootstrap 的使⽤用⽅方法
3. Bootstrap 的實務教學

14. Bootstrap如何使⽤用？
圖⽚片來源

15. 下載Bootstrap 檔案①
前往官⽅方網站

16. Bootstrap如何使⽤用？
新增HTML⽂文件，加⼊入Bootstrap檔案②
使⽤用Sublime text 開啟資料夾，了解Bootstrap 檔案結構
新增index.html
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
加⼊入 bootstrap.min.css
加⼊入 jquery.min.js
加⼊入 bootstrap.min.js
（1）
（2）
（3）

17. Bootstrap如何使⽤用？
選擇適合的元件，進⾏行套⽤用③

18. DEMO

19. 偷呷步的網站快速入門
LESSON 5
1. Bootstrap 的介紹
2. Bootstrap 的使⽤用⽅方法
3. Bootstrap 的實務教學

23. DEMO

25. Alt+Ctrl+i (MAC:alt+command+i)

26. DEMO

28. 範例

29. DEMO

30. 圖⽚片來源
等等！別走啊！這個框架不合適啊？還有耶...

31. 圖⽚片來源
Foundation
Bootstrap
Pure
960 grid system…more

32. 偷呷步的網站快速入門
LESSON 5
1. Bootstrap 的介紹
2. Bootstrap 的使⽤用⽅方法
3. Bootstrap 的實務教學

33. GitHub 帳戶申請教學與實作
LESSON 5 ( 番外篇 )

36. DEMO

37. 分享結束，很高興認識大家 ，謝謝：）