Мой Справочник | CSS3 | Bootstrap4

Мой Справочник | CSS3 | Bootstrap4-сетка

Bootstrap4 - official docs | Bootstrap4-cheatsheet | Bootstrap-темы

Bootstrap-4
breakpoints	Примеси для min-width: `@include media-breakpoint-up(xs) { ... } // min-width: 0 (default) @include media-breakpoint-up(sm) { ... } // min-width: 576px @include media-breakpoint-up(md) { ... } // min-width: 768px @include media-breakpoint-up(lg) { ... } // min-width: 992px @include media-breakpoint-up(xl) { ... } // min-width: 1200px // Example usage: @include media-breakpoint-up(sm) { .some-class { display: block; } } @media (min-width:576px) { .some-class { display: block; } }` Примеси для max-width: `@include media-breakpoint-down(xs) { ... } // max-width: 575.98px @include media-breakpoint-down(sm) { ... } // max-width: 797.98px @include media-breakpoint-down(md) { ... } // max-width: 991.98px @include media-breakpoint-down(lg) { ... } // max-width: 1199.98px @include media-breakpoint-down(xl) { ... } // min-width: 1200px + // Example usage: @include media-breakpoint-down(lg) { .some-class { display: block; } } @media (max-width:1199.98px) { .some-class { display: block; } }` Примеси для min-width: и max-width: `@include media-breakpoint-only(xs) { ... } // (0 - 575.98px) @include media-breakpoint-only(sm) { ... } // (576px - 797.98px) @include media-breakpoint-only(md) { ... } // (798px - 991.98px) @include media-breakpoint-only(lg) { ... } // (992px - 1199.98px) @include media-breakpoint-only(xl) { ... } // (1200px -> +)` Примеси для min-width: и max-width: (заданная примесь) `@include media-breakpoint-between(md, xl) { ... } // (720px -> +)`	`$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;`
.container .container-fluid	`.container { max-width: 1140px; (xl) max-width: 960px; (lg) max-width: 720px; (md) max-width: 540px; (sm) padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } .container-fluid { max-width: 100%; }`	`$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px ) !default;`
.row	Распределение по флекс-оси `.justify-content-center { justify-content: center; }` `.justify-content-start { justify-content: flex-start; }` `.justify-content-end { justify-content: flex-end; }` `.justify-content-around { justify-content: space-around; }` `.justify-content-between { justify-content: space-between; }` Распределение по флекс-оси на ЗАДАННЫХ bp `.justify-content-sm-center { justify-content: center; }` `.justify-content-md-center { justify-content: center; }` `.justify-content-lg-center { justify-content: center; }` `.justify-content-xl-center { justify-content: center; }` Выравнивание по поперечной оси `.align-items-start { align-items: flex-start; }` `.align-items-end { align-items: flex-end; }` `.align-items-center { align-items: center; }` Убрать padding у .col- `.no-gutters -> .col-s { padding: 0; }`
.col	Деление на РАВНЫЕ колонки на ВСЕХ bp (равномерное, зависит от кол-ва) .col { flex-grow: 1; flex-basis: 0; } Деление на РАВНЫЕ колонки на ЗАДАННЫХ bp (равномерное, зависит от кол-ва) .col-md { flex-grow: 1; flex-basis: 0; } (НАСЛЕДУЮТСЯ от меньших к большим) Деление на ЗАДАННЫЕ колонки на ЗАДАННЫХ bp (НАСЛЕДУЮТСЯ от меньших к большим) .col-4 { flex: 0 0 33.33333%; } - xs .col-sm-4 { flex: 0 0 33.33333%; } .col-md-4 { flex: 0 0 33.33333%; } .col-lg-4 { flex: 0 0 33.33333%; } .col-xl-4 { flex: 0 0 33.33333%; } Классы `.align-self-start { align-self: flex-start; }` `.align-self-center { align-self: center; }` `.align-self-end { align-self: flex-end; }` ОТОБРАЖЕНИЕ (НАСЛЕДУЮТСЯ от меньших к большим) `.d-block { display: block; }` `.d-none { display: block; }` `.d-sm-block { display: block; }` `.d-sm-none { display: block; }` Порядок `.order-1 { order: 1; }` `.order-10 { order: 10; }` Сдвиг `.ml-auto { margin-left: auto; }` `.mr-auto { margin-right: auto; }` `.ml-md-auto { margin-left: auto; }` `.offser-md-3 { margin-left: ...%; }`	`$grid-columns: 12 !default; $grid-gutter-width: 30px !default;`