Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bootstrap: Mobile Sites in Minutes

Bootstrap: Mobile Sites in Minutes

Bootstrap is a front-end framework that allows you to create responsive layouts, meaning that they automatically adjust to any screen size. It's easy to use, fast to integrate and looks amazing. This presentation will teach you how to quickly create an adaptive layout and with little effort. It will also feature a case study of transforming an existing web application.

Anna Filina

February 20, 2015
Tweet

More Decks by Anna Filina

Other Decks in Programming

Transcript

  1. Alternatives • Application ◦ Requires download ◦ Development effort &

    maintenance • Alternative site ◦ Redirects ◦ Development effort & maintenance 4
  2. Responsive design • No redirects • Adjusts to size •

    Minimal development effort • Single website maintenance 5
  3. Frontend framework • Helper CSS classes (class="navbar") • JS for

    more advanced features ◦ Dropdown menu ◦ Tabs • Works on any modern device 8
  4. layout.css @media (max-width: 767px) { div.example { border: none; border-bottom:

    1px solid #ccc; padding: 0 0 10px 0; } } @media (min-width: 768px) { div.example { border: 1px solid #ccc; padding: 10px; } } 14
  5. 4 sizes • xs ◦ 767- ◦ Phones • sm

    ◦ 768+ ◦ Tablets
 • md ◦ 992+ ◦ Desktops • lg ◦ 1200+ ◦ Large desktops 15
  6. header.html <!-- inside nav tag --> <div class="navbar-header"> <button class="navbar-toggle"

    data-toggle="collapse" data-target=".navbar-collapse">...</button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav">...</ul> </div> 21
  7. Services • Development: PHP, JS, etc. • Fix problems: bugs,

    performance, etc. • Workshops: Symfony, AngularJS, testing, etc. • Advisor: testing strategy, legacy code, etc. 30
  8. Useful links • What is supported?
 http://getbootstrap.com/getting-started/#support • Responsive image

    replacement:
 https://github.com/kvendrik/responsive-images.js • @afilina 31