Download - 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 для строчки!
Сетка в 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!
Найдите недочет
<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 в помощь