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.

Code: https://github.com/afilina/bootstrap-intro

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

August 23, 2014
Tweet

Transcript

  1. 4.

    Alternatives • Application ◦ Requires download ◦ Development effort &

    maintenance • Alternative site ◦ Redirects ◦ Development effort & maintenance 4
  2. 5.

    Responsive design • No redirects • Adjusts to size •

    Minimal development effort • Single website maintenance 5
  3. 8.

    Frontend framework • Helper CSS classes (class="navbar") • JS for

    more advanced features ◦ Dropdown menu ◦ Tabs • Works on any modern device 8
  4. 14.

    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. 15.

    4 sizes • xs ◦ 767- ◦ Phones • sm

    ◦ 768+ ◦ Tablets • md ◦ 992+ ◦ Desktops • lg ◦ 1200+ ◦ Large desktops 15
  6. 21.

    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. 30.

    Useful links • What is supported? http://getbootstrap.com/getting-started/#support • Responsive image

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

    Services • Development: PHP, JS, etc. • Fix problems: bugs,

    performance, etc. • Coaching & workshops. • Advisor: testing strategy, architecture, etc. 31