bootstrap3 basics

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/