Bootstrap: как правильно и что нового в 4-ке

#ChernivtsiJS, Chernivtsi, June 10, 2017

Ihor Zenich, EPAM

Bootstrap: как правильно
и что нового в 4-ке

#ChernivtsiJS, June 10, 2017
Ihor Zenich, EPAM

Bootstrap 4, day 1,065.

656 files changed, 66,882 insertions, 82,436 deletions.

(I swear it's getting close to being done!) https://t.co/8mXRvcZiu0

— Mark Otto (@mdo) June 7, 2017

For the first time in I have no idea how long, @getbootstrap is below 300 open issues and 100 open PRs on GitHub. Progress! pic.twitter.com/Dpi5S8JMoJ

— Mark Otto (@mdo) October 28, 2016

bit.ly/bs-4-right

2017 – год больших изменений

3 года рефакторинга!

4-ка хорошая!

Что они делают?

…и зачем мне это знать.

  1. Sass вместо LESS

Разве не о таких формах мы мечтали?

Bootstrap 4 forms

И такой сетке?

Bootstrap 4 grid

Как ПРАВИЛЬНО юзать Bootstrap?

Подключать через NPM

На новый проект сразу берите 4-ку

npm install bootstrap@4.0.0-alpha.6

Всегда брать Sass-версию

В 4-ке он уже есть, а для 3-ки есть отдельный репозиторий:

npm install bootstrap-sass

Правильно кастомизировать

/* Project variables */
@import "project/variables";
/* Bootstrap */
@import "bootstrap/bootstrap-variables";
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "bootstrap/bootstrap-customization";
/* Project CSS */
@import "project/...scss";

project/_variables.scss

// Layout
$site-padding-horizontal: 40px;
$mainNavbar-height: 52px;
$mainLogo-height: 44px;
$footerBar-height: 40px;
// Colors
$project-header-bg: #3f484c;

bootstrap/_bootstrap-variables.scss

// Bootstrap Variables file
// Derived Bootstrap variables can depend on values from here
// Customize Bootstrap variables 
that get imported before the original Bootstrap variables.
// Layout
$navbar-height: $mainNavbar-height;
$navbar-inverse-bg: $project-header-bg;

bootstrap/_bootstrap-customization.scss

// Bootstrap Customization file
// This gets loaded after bootstrap/variables is loaded
// Rewrite default bootstrap components
h1 {
  &:first-child {
    margin-top: 65px;
  }
}

project/...scss

А дальше идет ваш обычный css, тут могут быть веселые баги с webpack, но это тема для отдельного доклада :)

Что насчёт jQuery?

Будет дропнут вместе с IE10 в Bootstrap 5.

Что почитать?

Спасибо!

Вопросы «как жить дальше»? :)

Ihor Zenich

Презентация: bit.ly/bs-4-right

Fork me on GitHub