Bootstrap 3.2быстрая адаптивная верстка (почти) без знаний CSS и HTML

Igor Sazonov @tigusigalpa04.10.2014 WordPress Meetup #3, Saint-Petersburg

http://wpspb.org

Этапы создания сайтаБриф/ТЗ на дизайн и функционал сайта

Отрисовка дизайна в PSD

Верстка (HTML+CSS+JS)

Программирование или интеграция в CMS

Из чего состоит любой HTML-сайт

HTMLразметка

CSSстили + эффекты CSS3

JSэффекты + AJAX

Из чего состоит сайт на WordPress

HTMLразметка

CSSстили + эффекты CSS3

JSэффекты + AJAX

WordPress

Когда не было WordPress• Самописная CMS (у каждого программиста была своя)• Сайт на index.php (лапшекод, основанный на GET-параметрах,

например index.php?id=xxx)• Разные мелкие CMS типа джумлы• DreamWeaver и подобные программы

• ВЫВОД: WordPress на сегодняшний день унифицировал управление сайтами, т.е. стал единым форматом (стандартом) построения многих сайтов. По сути это уже фреймворк

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

простыми

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

А что же делать с CSS?• Писать каждый раз свой CSS: долго, нудно• Сделать свою наработку: лень, долго, нудно, трудно, много

• Тогда к Вам на помощь спешит Twitter Bootstrap!

Twitter BootstrapСамый популярный CSS-фреймворк для верстки (втч адаптивной) сайтов, включающий в себя множество css-классов для быстрого построения html-элементов. Включает в себя jQuery-зависимые эффекты.

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

В чем преимущества Bootstrap

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

Что включено в Bootstrap1. CSS-файл ядра Bootstrap (используйте

либо сжатый либо обычный)2. JS-файл скриптов, они требуют

подключения jQuery3. Файлы шрифтов для подключения иконок

как подключить: 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'></script><script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>

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

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

Примеры применения

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

Примеры применения<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>

Примеры применения

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

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

Сетка в Bootstrap (колонки сайта)Как построить адаптивную верстку. Важные моменты

Максимум 12 колонок. Сумма префиксов должна быть равна 12 для строчки!

Сетка в 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 строчка!)

Сетка в 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>

Адаптивная сеткаКак построить адаптивную верстку. Важные моменты

Делайте несколько классов, в зависимости от размера устройства

например:<div class=“col-xs-12 col-sm-6 col-md-4 col-lg-3”>

На заметку: колонки можно делать внутри ЛЮБОГО элемента, просто вставьте «row»

Полезные классы-помощники• .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 – тексты и их расположение (слева, по центру,

справа)

Полезные ресурсы по 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 - плагин для хрома, который подгоняет

страницу под девайсы

Найдите недочет

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