Основные моменты третьей версии популярного фреймворка. Responsive-верстка, контролы и компоненты Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://meetup.gorodvitebsk.by/

1. Григорьев Александр,
General Soft
Bootstrap
Powerful mobile first front-end framework.
Currently v3.0.2

2. План
1.
2.
3.
4.
Что такое Bootstrap и для чего он нужен.
Гриды, каркас, responsive.
Элементы управления в Bootstrap.
Ключевые отличия BS2 и BS3.

3. Определение и описание
Bootstrap - это простой, интуитивный и
мощный front-end фреймворк для быстрой и
простой веб-разработки, построенный на
HTML, CSS и JS.

4. Сразу пример
Сайт http://meetup.gorodvitebsk.by/.
✓ Отлично выглядит на различных
устройствах.
✓ Простая и понятная верстка.

5. Сферы использования
Bootstrap отлично подходит:
● для разработки любых сайтов (для
создания гибкого каркаса);
● для разработки как простых, так и
сложных “админок”;
● для разработки веб-приложений;
● для прототипирования.

6. От разработчика
Если использовать его по-максимуму, то вся
работа front-end разработчика сводится к
следующему:
1. Составить сеточный каркас;
2. Воссоздать необходимые контролы с
использованием специальных
конструкций фреймворка.

7. Пример из практики

8. 1. Гридовая верстка
<div class="row">
<div class=”col-md-3”> … </div>
<div class=”col-md-9”>
<div class=”row”> … </div>
</div>
</div>

9. 1. Гридовая верстка
.col-xs-* Extra small devicesPhones (<768px)
.col-sm-* Small devices Tablets (≥768px)
.col-md-* Medium devicesDesktops (≥992px)
.col-lg-* Large devices Desktops (≥1200px)

10. 2. Элементы управления
В Bootstrap можно выделить инструменты:
✓ Весь “Typography”;
✓ Нативные HTML-элементы (таблицы,
формы, кнопки и пр.);
✓ Собственные компоненты;
✓ Расширения.

11. 2. Элементы управления
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
Button groups и Button dropdowns
Labels, Badges, Alerts, Progress bars
Breadcrumbs, Pagination
Dropdowns
Input groups
Tabs, Pills, Collapse
Navbar
List group, Panels
Tooltips, Popovers
Carousel, Иконки

12. 2. Элементы управления
<div class="panel panel-success">
<div class="panel-heading"><span class="glyphicon glyphicon-list"></span> Случаи
заболевания</div>
<div class="panel-body">
<div class="btn-group btn-group-xs " data-toggle="buttons"> ... </div>
</div>
<div class="list-group">
<a href="#" class="list-group-item"> ... </a>
...
<div class="controls-container text-center">
<a class="btn btn-success btn-sm"><span class="glyphicon glyphicon-plus-sign"></span> Новый
случай</a>
</div></div></div>

13. 3. Результат

14. Ключевые отличия BS2 от BS3
● Гриды (вместо .container-fluid, .row-fluid, .span*, .
offset* теперь .container, .row, .col-md-*, .col-mdoffset-*);
● Названия классов;
● Конструкции;
● Новые элементы (panel);
● Внешний вид.

15. Bootstrap vs jQuery UI :)

16. Полезные ссылки
http://getbootstrap.com/
http://bootstrap-ru.com/
http://www.layoutit.com/
https://www.boottheme.com/
https://jetstrap.com/
https://wrapbootstrap.com/