![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)
{
.....
}](https://image.slidesharecdn.com/20150715-150928072444-lva1-app6892/85/Bootstrap-Mobile-Web-12-320.jpg)
Bootstrap & Mobile-Web
- 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
- 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. 資拓宏宇 黑客松
- 19. 30小時coding…
- 20. 吃吃人生
- 21. 心得
Editor's Notes
- #4: Twitter 開發，於2011年發布，支援IE8-11、chrome、safari、android、ios。但在IE8、9上面有部分CSS會不支援。Grid System
- #5: 注意自己include 的順序
- #7: http://codepen.io/anon/pen/KpxWPp
- #8: 今年年初發布正式版，opensource 於 github
- #15: OS、平台、歷史、瀏覽器名稱及版本、配置引擎、
- #17: 競賽時間6/27（六）9:00 - 6/28（日） 17:00，閃電秀
- #22: 累! 合作! 熱血! 最少時間表現自己最好的一面!