偷呷步的網站快速入門
LESSON 5
偷呷步的網站快速入門
LESSON 5
1. Bootstrap 的介紹
2. Bootstrap 的使用方法
3. Bootstrap 的實務教學
什麼是Bootstrap?
圖⽚片來源
Help to show content in browsers
Help to style the content
Help to interact with content
圖⽚片來源
套⽤用框架 快速做好網站選你喜歡的框架(framwork)
使⽤用現成的前端框架
① ② ③
善⽤用前端框架,幫助你網站開發
圖⽚片來源
使⽤用Bootstrap的優點?
圖⽚片來源
加速網站開發
有規則可依據、維護性⾼高
Bootstrap
ㄓ
圖⽚片來源
HTML、CSS 和 Javascript 框架
最新版為Bootstrap 3
Bootstrap 2 圖⽚片來源
你也可以使用
more…
Bootstrap2 與Bootstrap3的差別
No more fallback Support for IE7
Fluid by default
Glyph icons use font files
偷呷步的網站快速入門
LESSON 5
1. Bootstrap 的介紹
2. Bootstrap 的使⽤用⽅方法
3. Bootstrap 的實務教學
Bootstrap如何使⽤用?
圖⽚片來源
下載Bootstrap 檔案①
前往官⽅方網站
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)
Bootstrap如何使⽤用?
選擇適合的元件,進⾏行套⽤用③
DEMO
偷呷步的網站快速入門
LESSON 5
1. Bootstrap 的介紹
2. Bootstrap 的使⽤用⽅方法
3. Bootstrap 的實務教學
DEMO
Alt+Ctrl+i (MAC:alt+command+i)
DEMO
範例
DEMO
圖⽚片來源
等等!別走啊!這個框架不合適啊?還有耶...
圖⽚片來源
Foundation
Bootstrap
Pure
960 grid system…more
偷呷步的網站快速入門
LESSON 5
1. Bootstrap 的介紹
2. Bootstrap 的使⽤用⽅方法
3. Bootstrap 的實務教學
GitHub 帳戶申請教學與實作
LESSON 5 ( 番外篇 )
DEMO
分享結束,很高興認識大家 ,謝謝:)

偷呷步的網站快速入門