Bootstrap是什麼? 新手如何快速上手? Bootstrap如何達到responsive design? 除了media query，我們還能怎麼做?

1. Bootstrap & Mobile-Web
html, css and js framework
http://getbootstrap.com/
http://camel2243.github.io
/

2. outline
 introduction
 How to use
 Components
 Grid system
 Pingendo
 Responsive web design
 User agent

3. Introduction
 HTML, CSS, JS framework
 less and sass
 Jquery and Angular
 responsive
 Open source on Github

4. How to use
 Download
 Install with Bower
 Install with npm
 Install with Composer
 Bootstrap CDN
Source code：
 https://github.com/twbs/bootstrap
 https://github.com/twbs/bootstrap-sass

5. Components

6. Grid system
container
.col-md-3 .col-md-3 .col-md-3 .col-md-3
.col-md-6 .col-md-6
.col-md-8 .col-md-4

7. Pingendo
The simplest app for Bootstrap prototyping

8. Responsive
 The flow
 Relative units
 Max and Min values
 Media query

9. The flow
Flow static

10. Relative units
100%
Relative static
800px
50%50% 400px400px

11. Max values
Max width No max width

12. Media query
@media [media type] and [(media feature)]
/* ... other non-media query styles would go here ... */
.container { width: 100%; }
@media screen and (min-width: 768px)
{
.col-sm-3
{
width: 25%;
}
.container { max-width: 750px; }
}
@media screen and (orientation: portrait)
{
.....
}

13. Besides

14. User agent
Detect mobile browsers：
http://detectmobilebrowsers.com/
Windows chrome
Android Samsung Galaxy Note 3

15. Reference
 http://www.sitepoint.com/5-most-popular-frontend-
frameworks-compared/ (2014 frontend framework)
 http://getbootstrap.com/ （bootstrap official website)
 http://pingendo.com/ (pingendo)
 http://blog.froont.com/9-basic-principles-of-responsive-web-
design/ (responsive web design)
 深入淺出行動網站開發 賈德納 (Gardner, Lyza Danger)

16. 資拓宏宇
黑客松

18. 主題
https://www.youtube.com/watch?v=d8rxzkf50Fg

19. 30小時coding…

20. 吃吃人生

21. 心得