Доклад Игоря Сазонова. WordPress Meetup #3 04.10.2014

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!

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 в помощь