Bootstrap 3

Доклад Игоря Сазонова.

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. Этапы создания сайта

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 CSS- файл ядра Bootstrap ( используйте либо сжатый либо обычный ) JS- файл скриптов, они требуют подключения jQuery Файлы шрифтов для подключения иконок к ак подключить : 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>

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

12. J S компоненты 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 в помощь