Bootstrap 3. Адаптивная верстка для WordPress
-
Upload
igor-sazonov -
Category
Technology
-
view
3.322 -
download
0
description
Transcript of Bootstrap 3. Адаптивная верстка для WordPress
![Page 1: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/1.jpg)
Bootstrap 3.2быстрая адаптивная верстка (почти) без знаний CSS и HTML
Igor Sazonov @tigusigalpa04.10.2014 WordPress Meetup #3, Saint-Petersburg
http://wpspb.org
![Page 2: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/2.jpg)
Этапы создания сайтаБриф/ТЗ на дизайн и функционал сайта
Отрисовка дизайна в PSD
Верстка (HTML+CSS+JS)
Программирование или интеграция в CMS
![Page 3: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/3.jpg)
Из чего состоит любой HTML-сайт
HTMLразметка
CSSстили + эффекты CSS3
JSэффекты + AJAX
![Page 4: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/4.jpg)
Из чего состоит сайт на WordPress
HTMLразметка
CSSстили + эффекты CSS3
JSэффекты + AJAX
WordPress
![Page 5: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/5.jpg)
Когда не было WordPress• Самописная CMS (у каждого программиста была своя)• Сайт на index.php (лапшекод, основанный на GET-параметрах,
например index.php?id=xxx)• Разные мелкие CMS типа джумлы• DreamWeaver и подобные программы
• ВЫВОД: WordPress на сегодняшний день унифицировал управление сайтами, т.е. стал единым форматом (стандартом) построения многих сайтов. По сути это уже фреймворк
![Page 6: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/6.jpg)
Когда не было jQuery• Скрипты писались на «голом» javascript• Визуальных эффектов на сайтах было крайне мало и они были
простыми
• ВЫВОД: jQuery стал стандартом для визуальных эффектов на javascript для большинства сайтов
![Page 7: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/7.jpg)
А что же делать с CSS?• Писать каждый раз свой CSS: долго, нудно• Сделать свою наработку: лень, долго, нудно, трудно, много
• Тогда к Вам на помощь спешит Twitter Bootstrap!
![Page 8: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/8.jpg)
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)
![Page 9: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/9.jpg)
В чем преимущества Bootstrap
• Open-Source• Экономия времени верстки• Поддерживается мобильными устройствами• Возможность адаптивной верстки• Очень прост в применении• Множество примеров• Множество дополнений / плагинов / скинов• Поддерживается всеми современными браузерами• Много шаблонов и сайтов на WordPress используют Bootstrap
![Page 10: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/10.jpg)
Что включено в 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>
![Page 11: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/11.jpg)
CSS компоненты BootstrapДокументация: http://getbootstrap.com/components/• Иконки• Выпадающее меню• Хлебные крошки• Пейджинг• Панельки• Группы кнопок• Списки• итд итп
![Page 12: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/12.jpg)
JS компоненты BootstrapДокументация: http://getbootstrap.com/javascript/• Эффекты перехода• Модальные окна (всплывающие)• Табы• Тултипы (вспл. подсказки)• Поповеры (большие тултипы)• Панели предупреждения• Эффекты в кнопках• Карусель• итд итп
![Page 13: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/13.jpg)
Примеры применения
<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>
![Page 14: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/14.jpg)
Примеры применения<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>
![Page 15: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/15.jpg)
Примеры применения
<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>
![Page 16: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/16.jpg)
Примеры базовой верстки сайтовhttp://getbootstrap.com/getting-started/#examples
![Page 17: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/17.jpg)
Сетка в Bootstrap (колонки сайта)Как построить адаптивную верстку. Важные моменты
Максимум 12 колонок. Сумма префиксов должна быть равна 12 для строчки!
![Page 18: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/18.jpg)
Сетка в 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 строчка!)
![Page 19: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/19.jpg)
Сетка в 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>
![Page 20: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/20.jpg)
Адаптивная сеткаКак построить адаптивную верстку. Важные моменты
Делайте несколько классов, в зависимости от размера устройства
например:<div class=“col-xs-12 col-sm-6 col-md-4 col-lg-3”>
На заметку: колонки можно делать внутри ЛЮБОГО элемента, просто вставьте «row»
![Page 21: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/21.jpg)
Полезные классы-помощники• .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 – тексты и их расположение (слева, по центру,
справа)
![Page 22: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/22.jpg)
Полезные ресурсы по 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 - плагин для хрома, который подгоняет
страницу под девайсы
![Page 23: Bootstrap 3. Адаптивная верстка для WordPress](https://reader033.fdocuments.net/reader033/viewer/2022061603/557fd082d8b42aab088b4d9b/html5/thumbnails/23.jpg)
Найдите недочет
<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 в помощь