Bootstrap4

Контент /* https://getbootstrap.com/docs/4.2/content/typography breakpoints: < 576 extra small .col- >= 576 small .col-sm- >= 768 medium .col-md- >= 992 large .col-lg- >= 1200 extra large .col-xl- в row одинаковая высота по-умолчанию (автовысота) col- .sr-only скрываю важные элементы (label) .text-hide скрывает текст (например у h1, можно задать style="background-image: url('img/brand.svg'); width: 50px; height: 50px;) .visible показать .invisible не показывать, видимыми для программ чтения экранов Колонки одинаковой ширины: .col можно .col-md Между блоков ширина по содержимому: .col-md-auto Сдвиг колонки .offset-md-3 Перенести на новый ряд: между .col добавить <div class="w-100"></div> .w-50% 50% ширины блока (можно 25%, 50%, 75%, 100%, auto) .h-50% 50% высоты блока (можно 25%, 50%, 75%, 100%, auto) .mw-100 max-width: 100% .mh-100 max-height: 100%; Горизонтальное выравнивание для .row и добавить класс: .justify-content-md-start стандартно .justify-content-center блоки в центре .justify-content-end блоки в конце .justify-content-around равномерное распределение .justify-content-between распредение по краям, а остальные равномерно Вертикальное выравнивание колонок для .row, также добавить класс flex-cols и добавить класс: .align-items-start выравнивание вверх .align-items-center выравнивание по-центру .align-items-end выравнивание вниз Вертикальное выравнивание (класс для элементов) .align-self-start выравнивание вверх .align-self-center выравнивание по-центру .align-self-end выравнивание вниз Вертикальное выравнивание с встроенными элементами .align-baseline .align-top .align-middle .align-bottom .align-text-bottom .align-text-top Изменение порядка сортировки от 1 до 12 .order-1 (можно .order-lg-2) .order-first (order: -1) .order-lg-last Обнуление отступов .row .no-gutters Отступы margin padding x - слево и справо y - сверху и снизу mx-auto центрирую по оси х mx-md-auto работает для md mr-auto (если два блока рядом и для правого добавить, то он переместиться вплотную вправо) 0 - 5 цифры (мои от 5 до 10 и 11, 12 - минусовые) .list-unstyled ul li (списки) отменяю булиты .list-inline горизонтальный список для li класс .list-inline-item Display .d-none (по-умолчаниею xs, можно .d-md-none) .d_none (для js) .d-flex .d-inline-flex .d-block .d-inline .d-inline-block .d-table .d-table-cell https://itchief.ru/bootstrap/flex-v4 d-flex и рядом пишу .flex-row горизонтальное направление .flex-row-reverse горизонтальное направление справо налево .flex-column вертикальное направление .flex-column-reverse вертикальное направление с конца наверх .flex-wrap чтобы элементы переходили на новую строку (-reverse) Float .float-left можно .float-md-left .float-right .float-none .clearfix сброс обтекания Position .position-static .position-relative .position-absolute .position-fixed .position-sticky .fixed-top .fixed-bottom .sticky-top Скруглённые углы .rounded скруглённые углы .rounded-0 острые углы .rounded-left скругление кроме левого угла .rounded-circle круглый Border .border рамка .border-0 отмена рамки .border-top-0 отмена верхней границы, так и все остальные границы .border-primary .border-secondary серый .border-light светло-серый .border-dark тёмно-серый Адаптивные изображения .img-fluid .img-thumbnail Адаптивное видео .embed-responsive .embed-responsive-16by9 (21by9, 4by3, 1by1) в этом классе добавить класс для iframe .embed-responsive-item Таблицы .table .table-dark тёмная таблица (добавить класс) .thead-default класс для thead, серая шапка, можно любые цвета .thead-inverse тёмная шапка для tr тоже могу использовать (.table-active) можно также использовать .bg-primary .table-striped строки через одну .table-hover наведение .table-inverse тёмная таблица .table-responsive класс для самой таблице (можно .table-responsive-md) .table-bordered границы .table-borderless без границ .table-sm уменьшает отступы в таблице <table class="table"> <caption>Название таблицы</caption> Этот тег не виден, но его надо использовать <thead></thead> </table> Background фон bg-primary и любые цвета bg-transparent swatch-100 background и текст swatch-primary Кнопки .btn .btn-primary .btn-sm .btn-outline-primary контурный цвет .active .btn-block делает ссылку блочной, на всю ширину role="button" для ссылки к примеру модального окна type="button" для button .btn-group .btn-group-vertical добавляю этот класс для вертикального меню role="group" aria-label="Группа кнопок" Цвета: white #fff black #000 primary #007bff secondary #6c757d success #28a745 danger #dc3545 warning #ffc107 info #17a2b8 light #f8f9fa dark #343a40 indigo #6610f2 purple #6f42c1 pink #e83e8c orange #fd7e14 teal #20c997 МЯГКИЕ ЦВЕТА primary #b8daff secondary #d6d8db success #c3e6cb danger #f5c6cb warning #ffeeba info #bee5eb light #fdfdfe dark #c6c8ca grey-100 light #f8f9fa grey-200 #e9ecef grey-300 #dee2e6 grey-400 #ced4da grey-500 #adb5bd grey-600 secondary #6c757d grey-700 #495057 grey-800 dark #343a40 grey-900 #212529 Тени .shadow-none .shadow-sm .shadow .shadow-lg disabled для button (чтобы отключить) использовать атрибут .disabled для ссылок a (чтобы отключить) использовать класс в отлюченные надо добавлять атрибут aria-disabled="true" Валидация .is-invalid зелённая подсветка (класс для input) .is-valid красная подсветка (класс для input) */ //добавить отступы в файл темы $spacers: ( 0: 0, 1: ($spacer * .25), 2: ($spacer * .5), 3: $spacer, 4: ($spacer * 1.5), 5: ($spacer * 3), 6: ($spacer * 5), ); $zindex-dropdown: 1000 !default; @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } @include media-breakpoint-down(xs) { ... } @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } // Переопределить цвет подсказки в файле темы задав эти переменные: $tooltip-color: $white; $tooltip-bg: $black; // Переопределить цвет подсказки через css: .tooltip-inner { background-color: #ccc; color: #000; } .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #ccc; } .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #ccc; } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #ccc; } .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #ccc; }