Bootstrap & Mobile-Webhtml, css and js frameworkhttp://getbootstrap.com/

http://camel2243.github.io/

outline

introduction How to use Components Grid system Pingendo Responsive web design User agent

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

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

Components

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

PingendoThe simplest app for Bootstrap prototyping

Responsive

The flow

Relative units

Max and Min values

Media query

The flow

Flow static

Relative units

100%

Relative static

800px

50%50% 400px400px

Max values

Max width No max width

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) { .....}

Besides

User agent

Detect mobile browsers：http://detectmobilebrowsers.com/

Windows chrome

Android Samsung Galaxy Note 3

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)

資拓宏宇黑客松

主題

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

30小時 coding…

吃吃人生

心得