Рисуем адаптивный сайт. Используем Bootstrap

Bootstrap : Как сделать адаптивный сайт?

Валерий Макаров
16 марта, 2013

Что такое Twitter Bootstrap?

twitter.github.com/bootstrap/

Пример адаптивного сайта

responsinator.com

Особенности Twitter Bootstrap

Сетка базовых линий в полиграфии

Description

Резиновая или адаптивная сетка?

Адаптивная сетка - под разные устройства

<style>
      /* Large desktop */
    @media (min-width: 1200px) { ... }
     
    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) { ... }
     
    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) { ... }
     
    /* Landscape phones and down */
    @media (max-width: 480px) { ... }
</style>

Grid Displayer

Bootstrap + Wordpress

Wordpress + Bootstrap 320press

Спасибо!