Your SlideShare is downloading. ×

Bootstrap3 basics

6,040
views

Published on

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

Основные моменты третьей версии популярного фреймворка. 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
6,040
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
2
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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/