Bootstrap3 basics

17,167 views

Published on

Основные моменты третьей версии популярного фреймворка. Responsive-верстка, контролы и компоненты

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

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
17,167
On SlideShare
0
From Embeds
0
Number of Embeds
15,814
Actions
Shares
0
Downloads
5
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Bootstrap3 basics

  1. 1. Григорьев Александр, General Soft Bootstrap Powerful mobile first front-end framework. Currently v3.0.2
  2. 2. План 1. 2. 3. 4. Что такое Bootstrap и для чего он нужен. Гриды, каркас, responsive. Элементы управления в Bootstrap. Ключевые отличия BS2 и BS3.
  3. 3. Определение и описание Bootstrap - это простой, интуитивный и мощный front-end фреймворк для быстрой и простой веб-разработки, построенный на HTML, CSS и JS.
  4. 4. Сразу пример Сайт http://meetup.gorodvitebsk.by/. ✓ Отлично выглядит на различных устройствах. ✓ Простая и понятная верстка.
  5. 5. Сферы использования Bootstrap отлично подходит: ● для разработки любых сайтов (для создания гибкого каркаса); ● для разработки как простых, так и сложных “админок”; ● для разработки веб-приложений; ● для прототипирования.
  6. 6. От разработчика Если использовать его по-максимуму, то вся работа front-end разработчика сводится к следующему: 1. Составить сеточный каркас; 2. Воссоздать необходимые контролы с использованием специальных конструкций фреймворка.
  7. 7. Пример из практики
  8. 8. 1. Гридовая верстка <div class="row"> <div class=”col-md-3”> … </div> <div class=”col-md-9”> <div class=”row”> … </div> </div> </div>
  9. 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. 10. 2. Элементы управления В Bootstrap можно выделить инструменты: ✓ Весь “Typography”; ✓ Нативные HTML-элементы (таблицы, формы, кнопки и пр.); ✓ Собственные компоненты; ✓ Расширения.
  11. 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. 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. 13. 3. Результат
  14. 14. Ключевые отличия BS2 от BS3 ● Гриды (вместо .container-fluid, .row-fluid, .span*, . offset* теперь .container, .row, .col-md-*, .col-mdoffset-*); ● Названия классов; ● Конструкции; ● Новые элементы (panel); ● Внешний вид.
  15. 15. Bootstrap vs jQuery UI :)
  16. 16. Полезные ссылки http://getbootstrap.com/ http://bootstrap-ru.com/ http://www.layoutit.com/ https://www.boottheme.com/ https://jetstrap.com/ https://wrapbootstrap.com/

×