Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.

1. Bootstrap 3.2
быстрая адаптивная верстка (почти) без
знаний CSS и HTML
Igor Sazonov @tigusigalpa
04.10.2014 WordPress Meetup #3, Saint-Petersburg
http://wpspb.org

2. Этапы создания сайта
Бриф/ТЗ на дизайн и функционал сайта
Отрисовка дизайна в PSD
Верстка (HTML+CSS+JS)
Программирование или интеграция в CMS

3. Из чего состоит любой HTML-сайт
HTML
разметка
CSS
стили + эффекты CSS3
JS
эффекты + AJAX

4. Из чего состоит сайт на WordPress
HTML
разметка
CSS
стили + эффекты CSS3
JS
эффекты + AJAX
WordPress

5. Когда не было WordPress
• Самописная CMS (у каждого программиста была своя)
• Сайт на index.php (лапшекод, основанный на GET-параметрах,
например index.php?id=xxx)
• Разные мелкие CMS типа джумлы
• DreamWeaver и подобные программы
• ВЫВОД: WordPress на сегодняшний день унифицировал
управление сайтами, т.е. стал единым форматом (стандартом)
построения многих сайтов. По сути это уже фреймворк

6. Когда не было jQuery
• Скрипты писались на «голом» javascript
• Визуальных эффектов на сайтах было крайне мало и они были
простыми
• ВЫВОД: jQuery стал стандартом для визуальных эффектов на
javascript для большинства сайтов

7. А что же делать с CSS?
• Писать каждый раз свой CSS: долго, нудно
• Сделать свою наработку: лень, долго, нудно, трудно, много
• Тогда к Вам на помощь спешит Twitter Bootstrap!

8. Twitter Bootstrap
Самый популярный CSS-фреймворк для верстки (втч адаптивной) сайтов,
включающий в себя множество css-классов для быстрого построения
html-элементов. Включает в себя jQuery-зависимые эффекты.
Сайт с документацией: http://getbootstrap.com
GitHub: https://github.com/twbs/bootstrap
Текущая версия: 3.2.0
Дата разработки: август 2011, дата выпуска: февраль 2012
Разработчики: Mark Otto and Jacob Thornton (разработчики в компании
Twitter)

9. В чем преимущества Bootstrap
• Open-Source
• Экономия времени верстки
• Поддерживается мобильными устройствами
• Возможность адаптивной верстки
• Очень прост в применении
• Множество примеров
• Множество дополнений / плагинов / скинов
• Поддерживается всеми современными браузерами
• Много шаблонов и сайтов на WordPress используют Bootstrap

10. Что включено в Bootstrap
1. CSS-файл ядра Bootstrap (используйте
либо сжатый либо обычный)
2. JS-файл скриптов, они требуют
подключения jQuery
3. Файлы шрифтов для подключения иконок
как подключить: 3 файла
<link rel='stylesheet' id='bootstrap-css'
href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/
css/bootstrap.min.css' type='text/css' media='all' />
<script type='text/javascript'
src='//yastatic.net/jquery/2.1.1/jquery.min.js'></scri
pt>
<script type='text/javascript'
src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js
/bootstrap.min.js'></script>

11. CSS компоненты Bootstrap
Документация: http://getbootstrap.com/components/
• Иконки
• Выпадающее меню
• Хлебные крошки
• Пейджинг
• Панельки
• Группы кнопок
• Списки
• итд итп

12. JS компоненты Bootstrap
Документация: http://getbootstrap.com/javascript/
• Эффекты перехода
• Модальные окна (всплывающие)
• Табы
• Тултипы (вспл. подсказки)
• Поповеры (большие тултипы)
• Панели предупреждения
• Эффекты в кнопках
• Карусель
• итд итп

13. Примеры применения
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

14. Примеры применения
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egetas…..</p>
<p><a href="#" class="btn btn-primary"
role="button">Button</a> <a href="#" class="btn btn-default"
role="button">Button</a></p>
</div>
</div>
</div>
</div>

15. Примеры применения
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="
0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="
0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>

16. Примеры базовой верстки сайтов
http://getbootstrap.com/getting-started/#examples

17. Сетка в Bootstrap (колонки сайта)
Как построить адаптивную верстку. Важные моменты
Максимум 12 колонок. Сумма префиксов должна быть равна 12 для строчки!

18. Сетка в Bootstrap (колонки сайта)
Как построить адаптивную верстку. Важные моменты
Документация: http://getbootstrap.com/css/#grid
.col-xx-n - <div class=“col-xx-n col-xx-n col-xx-n col-xx-n”>
Какими могут быть «xx»:
• «xs» – extra small (mobile portrait, мобильные телефоны вертик)
• «sm» – small (table portrait – например, iPad вертикально)
• «md» – средние размеры экрана (низкоформатн монитор, ноутбук)
• «lg» – широкие экраны мониторов
Как правило md = lg и можно обойтись только md (без lg)
Какими могут быть «n»:
Любыми от 1 до 12, главное чтобы в сумме своего xx они давали 12
(12 = 1 строчка!)

19. Сетка в Bootstrap (колонки сайта)
Как построить адаптивную верстку. Важные моменты
Все классы колонок .col-xx-n должны быть
внутри класса «row»!!!
Пример:
<div class=“row”>
<div class=“col-md-4”>1</div>
<div class=“col-md-4”>2</div>
<div class=“col-md-4”>3</div>
</div>

20. Адаптивная сетка
Как построить адаптивную верстку. Важные моменты
Делайте несколько классов, в
зависимости от размера устройства
например:
<div class=“col-xs-12 col-sm-
6 col-md-4 col-lg-3”>
На заметку: колонки можно делать внутри
ЛЮБОГО элемента, просто вставьте «row»

21. Полезные классы-помощники
• .container – один из основных классов в Bootstrap. Он делает сайт с
фиксированной шириной посередине, без него сайт расползается на всю
ширину
• .img-rounded – применяется для тега <img> (картинки). Скругляет углы
• .img-circle – делает изображение круглым
• .pull-left – «флоатит» элемент к левому краю с обтеканием справа
• .pull-right – то же самое наоборот
• .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg – скрывает элемент для нужной
группы устройств
• .img-responsive – часто используемый класс для <img>. Делает картинку
адаптивной!
• .text-left, .text-center, .text-right – тексты и их расположение (слева, по центру,
справа)

22. Полезные ресурсы по Bootstrap
• http://expo.getbootstrap.com/resources/ - список проверенных плагинов
• http://bootstrapbay.com/blog/bootstrap-resources/ - куча всего!
• http://builtwithbootstrap.com/ - список красивых сайтов на Bootstrap
• https://wrapbootstrap.com/ - еще много шаблонов на Bootstrap
• + куча сайтов из Google!
• Responsive Web Design Tester - плагин для хрома, который подгоняет
страницу под девайсы

23. Найдите недочет
<div class=“container”>
<div class=“row”>
<div class=“col-xs-12 col-sm-6 col-md-4 text-center”>Спасибо</div>
<div class=“col-xs-12 col-sm-6 col-md-4 text-center”>Всем</div>
<div class=“col-xs-12 col-sm-6 col-md-4 text-center”>Большое!</div>
</div>
</div>
.hidden-sm в помощь