偷呷步的網站快速入門

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

http://startbootstrap.com/

範例

DEMO

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

圖⽚片來源

Foundation Bootstrap Pure960 grid system…more

偷呷步的網站快速入門

LESSON 5

1. Bootstrap 的介紹

2. Bootstrap 的使⽤用⽅方法

3. Bootstrap 的實務教學

GitHub 帳戶申請教學與實作

LESSON 5 ( 番外篇 )

DEMO

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