Bootstrap : Как сделать адаптивный сайт?
Валерий Макаров
16 марта, 2013
Что такое Twitter Bootstrap?
- HTML+CSS+JS UI фреймворк
- Верстка по сетке
- Адаптивный дизайн
- Open-source
- twitter.github.com/bootstrap/
twitter.github.com/bootstrap/
Пример адаптивного сайта
responsinator.com
Особенности Twitter Bootstrap
- Полный набор компонентов в виде стилей и анимаций поведения для элементов интерфейса
- Поддержка возможностей HTML5, CSS3 (но при этом работает и в IE7!)
- Поддержка 12-колоночной сетки
- Поддержка резиновой fluid-grid сетки
- Возможность кастомизации и добавления собственных стилей
- Возможность добавлять jQuery плагины
Сетка базовых линий в полиграфии
Резиновая или адаптивная сетка?
Адаптивная сетка - под разные устройства
<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
Спасибо!
- Email: valeramakarov@mail.ru
- Skype: Valeriy.Makarov
- www.high-light.ru