bootstrap3 basics
DESCRIPTION
Основные моменты третьей версии популярного фреймворка. Responsive-верстка, контролы и компоненты Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://meetup.gorodvitebsk.by/TRANSCRIPT
Bootstrap
Powerful mobile first front-end framework.
Currently v3.0.2
Григорьев Александр,General Soft
План1. Что такое Bootstrap и для чего он нужен.2. Гриды, каркас, responsive.3. Элементы управления в Bootstrap.4. Ключевые отличия BS2 и BS3.
Определение и описаниеBootstrap - это простой, интуитивный и мощный front-end фреймворк для быстрой и простой веб-разработки, построенный на HTML, CSS и JS.
Сразу примерСайт http://meetup.gorodvitebsk.by/.
✓ Отлично выглядит на различных устройствах.
✓ Простая и понятная верстка.
Сферы использованияBootstrap отлично подходит:● для разработки любых сайтов (для
создания гибкого каркаса);● для разработки как простых, так и
сложных “админок”;● для разработки веб-приложений;● для прототипирования.
От разработчикаЕсли использовать его по-максимуму, то вся работа front-end разработчика сводится к следующему:1. Составить сеточный каркас;2. Воссоздать необходимые контролы с
использованием специальных конструкций фреймворка.
Пример из практики
1. Гридовая верстка<div class="row">
<div class=”col-md-3”> … </div><div class=”col-md-9”>
<div class=”row”> … </div></div>
</div>
1. Гридовая верстка.col-xs-* Extra small devicesPhones (<768px).col-sm-* Small devices Tablets (≥768px).col-md-* Medium devicesDesktops (≥992px).col-lg-* Large devices Desktops (≥1200px)
2. Элементы управленияВ Bootstrap можно выделить инструменты:✓ Весь “Typography”;✓ Нативные HTML-элементы (таблицы,
формы, кнопки и пр.);✓ Собственные компоненты;✓ Расширения.
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, Иконки
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>
3. Результат
Ключевые отличия BS2 от BS3● Гриды (вместо .container-fluid, .row-fluid, .span*, .
offset* теперь .container, .row, .col-md-*, .col-md-offset-*);
● Названия классов;● Конструкции;● Новые элементы (panel);● Внешний вид.
Bootstrap vs jQuery UI :)
Полезные ссылкиhttp://getbootstrap.com/http://bootstrap-ru.com/
http://www.layoutit.com/https://www.boottheme.com/https://jetstrap.com/https://wrapbootstrap.com/