Bootstrap 3

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

GitHub: 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 для строчки!


Документация: 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 строчка!)


Все классы колонок .col-xx-n должны быть

внутри класса «row»!!!

Пример:<div class=“row”>

<div class=“col-md-4”>1</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!

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

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

Internet

Bootstrap 3