Bootstrap 4 разметка: Система сеток. Разметка · Bootstrap. Версия v4.0.0

Родительские и дочерние элементы грид-разметки

Грид-разметка включает в себя элемент контейнера и дочерние элементы, которые становятся элементами сетки (немного напоминает flexbox). Для элемента контейнера достаточно установить display: grid. Строки и столбцы сетки определяются с помощью grid-template-columns и grid-template-rows.

Начнем со следующей разметки:

<div>
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
  <div>Box 5</div>
  <div>Box 6</div>
  <div>Box 7</div>
</div>

Вот как мы можем определить CSS для контейнера:

.container {
  display: grid;

  grid-template-columns: 150px 150px 80px;
  grid-template-rows: 100px auto;

  grid-gap: 10px 15px;
}

Мы получаем интересный результат, даже не задавая никаких свойств элементам сетки:

Обратите внимание: мы добавили 10 пикселей по горизонтали и 15 пикселей по вертикали между ячейками, используя grid-gap.

Теперь мы можем пойти дальше и определить начальную и конечную линии конкретных элементов. Элементы, которые не размещены в сетке явно, будут размещены согласно алгоритму. Мы используем grid-column-start, grid-column-end, grid-row-start и grid-row-end, чтобы определить, где в сетке начинается и заканчивается элемент:

.box-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.box-3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

Также можно использовать сокращения grid-column и grid-row (результат будет такой же):

.box-1 {
  grid-column: 1 / 3;
}

.box-3 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

Вот что получится:

Примечание: Промежутки не добавляют новых линий сетки, поэтому элементы, расположенные рядом друг с другом, касаются одной и той же линии, даже если визуально их разделяет зазор.

Поддержка CSS Grid Layout

Этот модуль по умолчанию поддерживается в Firefox, начиная с версии 52. Также он полностью поддерживается в последних версиях Chrome и Opera, а еще в IE и Edge, но с более старым синтаксисом.

Дополнительные материалы

В этом материале мы собрали лишь базовую информацию по вопросу. Однако в грид-разметке CSS есть еще много разных возможностей и функций. Если вы хотите развивать свои навыки работы с разметкой, читайте также:

• Грид-разметка CSS: ключевое слово span
• Грид-разметка CSS: как работает нотация repeat
• Грид-разметка CSS: макет Holy Grail

Вот несколько отличных ресурсов для изучения тонкостей грид-разметки CSS:

• Полное руководство по грид-разметке CSS
• Примеры использования грид-разметки.
• Демо-макеты от Джен Симмонс

Миграция

Руководство по обновлению с Bootstrap v3.x до версии v4.x с акцентом на основные изменения.

Bootstrap 4 является основным переписыванием почти всего проекта. Наиболее заметные изменения кратко излагаются ниже, за ними следуют более конкретные классы и поведенческие изменения для соответствующих компонентов.

Heads up!

Краткое содержание

Тут перечислены моменты, которые вам нужно знать при переходе с версии v3 на v4.

Поддержка браузера

• Отброшена поддержка IE8, IE9 и iOS 6. V4 поддерижвает теперь только IE10 + и iOS 7+. Для сайтов, которые нуждаются в одном из них, используйте v3.
• Добавлена официальная поддержка браузера Lollipop v5.0 и WebView. Более ранние версии браузера Android и WebView остаются только неофициально поддерживаемыми.

Глобальные изменения

• По умолчанию Flexbox включен. В общем, это означает переход от floats и многого другого через наши компоненты.
• Переключились с Less на Sass для наших исходных файлов CSS.
• Переключились из px в rem как наш основной блок CSS, хотя пиксели по-прежнему используются для медиа-запросов и поведения сетки, поскольку размер видовых экранов не зависит от размера шрифта.
• Глобальный размер шрифта увеличен с 14px до 16px.
• Добавлен новый уровень сетки для небольших устройств на 576px и ниже (наш новый уровень xs).
• Заменена отдельная необязательная тема с настраиваемыми параметрами через переменные SCSS (например, $enable-gradients: true).

Грид-система

• Добавлена поддержка flexbox в сетке mixins и предопределенные классы.
• В составе flexbox включена поддержка вертикальных и горизонтальных классов выравнивания.
• Реконструированы grid mixinы для объединения make-col-span в make-col для сингулярного mixin.
• Добавлен новый уровень сетки sm ниже 768px для более детального контроля. Теперь у нас есть xs, sm, md, lg, и xl. Это также означает, что каждый уровень был поднят на один уровень (поэтому .col-md-6 в v3 теперь .col-lg-6 в v4).
• Изменены контрольные точки медиа-запросов сетки и ширины контейнера для учета нового уровня сетки и обеспечения того, чтобы столбцы были равномерно делимыми на 12 при максимальной ширине.
• Теперь контрольные точки сетки и ширины контейнера обрабатываются с помощью карт Sass ($grid-breakpoints и $container-max-widths) вместо нескольких отдельных переменных. Они полностью заменяют переменные @screen-* и позволяют полностью настраивать уровни сетки.
• Медиа-запросы также изменились. Вместо того, чтобы каждый раз повторять наши объявления медиа-запросов с одинаковым значением, теперь мы имеем @include media-breakpoint-up/down/only. Теперь, вместо того, чтобы писать @media (min-width: @screen-sm-min) { ... }, вы можете написать @include media-breakpoint-up(sm) { ... }.

Компоненты

• Удалены панели, thumbnails и wells для нового всеохватывающего компонента, карточки.
• Удален значок иконки Glyphicons. Если вам нужны значки, некоторые из них:
  • начальный вариант Glyphicons
  • Octicons
  • Font Awesome
• Удален плагин Affix jQuery. Мы рекомендуем использовать position: sticky вместо polyfill. Смотрите HTML5 Please entry для получения подробной информации и рекомендаций по конкретным polyfill.
  • Если вы использовали Affix для применения дополнительных стилей без-position, polyfills могут не поддерживать ваш вариант использования. Одним из таких вариантов является сторонняя библиотека ScrollPos-Styler.
• Удален компонент пейджера, поскольку он был по существу немного настроенными кнопками.
• Реорганизованы почти все компоненты, чтобы использовать более невложенные классы вместо селекторов детей.

Разное

• Не-адаптивное использование Bootstrap больше не поддерживается.
• Отброшен онлайн-настройщик в пользу более обширной документации по настройке и настраиваемых сборок.

По компоненту

В этом списке перечислены ключевые изменения компонента между v3.x.x и v4.0.0.

Перезагрузка

Новым для Bootstrap 4 является Reboot, новая таблица стилей, которая основывается на нормализации с нашими собственными несколько самоуверенными стилями сброса. Селекторы, отображаемые в этом файле, используют только элементы — здесь нет классов. Это изолирует наши стили сброса от наших стилей компонентов для более модульного подхода. Некоторые из наиболее важных сбросов, которые это включает, изменение box-sizing: border-box, перемещение из em в блоки rem на многих элементах, стилях ссылок и многих сбросах форм элементов.

Типография

• Переместили все .text- утилиты в файл _utilities.scss.
• Удален .page-header поскольку, помимо границы, все его стили можно применять с помощью утилит.
• .dl-horizontalбыл удален. Вместо этого используйте .row на <dl> и используйте классы столбцов сетки (или mixins) для дочерних элементов <dt> и <dd> children.
• Пользовательское моделирование<blockquote> переместилось в классы—.blockquote и модификатор .blockquote-reverse.
• .list-inline теперь требует, чтобы для его элементов списка детей был применен новый класс .list-inline-item.

Изображения

• Переименованы .img-responsive в .img-fluid.
• Переименованы . img-rounded в .rounded
• Переименованы .img-circle в .rounded-circle

Таблицы

• Почти все экземпляры селектора > были удалены, то есть вложенные таблицы теперь автоматически наследуют стили от своих родителей. Это значительно упрощает наши селекторы и потенциальные настройки.
• В адаптивных таблицах больше не требуется оборачивать элемент. Вместо этого просто поставьте .table-responsive прямо на <table>.
• Переименован .table-condensed в .table-sm для согласованности.
• Добавлен новый параметр .table-inverse.
• Добавлены модификаторы заголовков таблицы: .thead-default и .thead-inverse.
• Переименованы контекстные классы, с добавлением префикса .table-. Следовательно, .active, . success, .warning, .danger и .table-info переименованы в .table-active, .table-success, .table-warning, .table-danger и .table-info.

Формы

• Перемещенный элемент сбрасывается в файл _reboot.scss.
• Переименован .control-label в .form-control-label.
• Переименованы .input-lg и .input-sm в .form-control-lg и .form-control-sm, соответственно.
• Удалены классы .form-group-* для простоты. Вместо этого используйте классы .form-control-*.
• Уаделн .help-block и заменен .form-text для блочного справочного текста. Для встроенного справочного текста и других гибких параметров используйте служебные классы, например .text-muted.
• Горизонтальные формы переработаны:
  • Удалено требование класса . form-horizontal.
  • .form-group больше не применяет стили из .row через mixin, поэтому .row теперь требуется для горизонтальных макетов сетки (например, <div>).
  • Добавлен новый класс .form-control-label для вертикально-центральных меток с .form-controls.
• Добавлена поддержка пользовательских форм (для флажков, переключателей, выборов и входных файлов).

Кнопки

• Переименован .btn-default в .btn-secondary.
• Удален класс .btn-xs целиком, поскольку .btn-sm пропорционально намного меньше, чем в v3.
• Функция кнопки состояния плагина jQuery button.js была удалена. Сюда входят методы $().button(string) и $().button('reset') Вместо этого мы советуем использовать небольшой пользовательский JavaScript, который будет иметь преимущество в том, чтобы вести себя именно так, как вы этого хотите.
  • Обратите внимание, что другие функции плагина (флажки кнопок, кнопочные переключатели, кнопки с одним переключателем) были сохранены в v4.

Группа кнопок

• Компонент переписан с flexbox.
• Удален класс .btn-group-xs полностью с учетом удаления .btn-xs.
• Удалены явные интервалы между группами кнопок в панелях инструментов кнопок; теперь используйте утилиты margin.
• Улучшена документация для использования с другими компонентами.

Выпадающие списки

• Переключены из родительских селекторов в особые классы для всех компонентов, модификаторов и т. д.
• Упрощенные стили выпадающих списков больше не поставляются со стрелками вверх или вниз, прикрепленными к раскрывающемуся меню.
• Выпадающие списки теперь можно создавать с помощью <div> или <ul>.
• Перестроены выпадающие стили и разметка для того, чтобы обеспечить удобную встроенную поддержку раскрывающихся элементов на основе <a> и <button>.
• Переименован .divider в .dropdown-divider.
• Выпадающим элементам теперь требуется .dropdown-item.
• Выпадающим переключателям больше не требуется явный <span></span>; теперь это предоставляется автоматически через CSS ::after на .dropdown-toggle.

Грид-система

• Добавлена новая точка останова сетки 576px в виде sm, что означает, что теперь есть пять полных уровней (xs, sm, md, lg, и xl).
• Переименоваys классы адаптивных сеток из .col-{breakpoint}-{modifier}-{size} в .{modifier}-{breakpoint}-{size} для более простых классов сетки. Например, вместо .col-md-3.col-md-push-9 это .col-md-3.push-md-9.
• Переработаны грид-mixins, чтобы объединить make-col и make-col-span в один make-col тем самым обеспечив, что mixins и предопределенные классы используют те же самые поведения float/flex.
• Добавлены классы утилиты flexbox для грид-системы и компонентов.

Группы списков

• Компонент переписан с flexbox.
• Заменили a.list-group-item явным классом, .list-group-item-action, для моделирования версий ссылок и кнопок элементов группы списков.
• Добавлен класс .list-group-flush для использования с картами.

Модальные окна

• Компонент переписан с flexbox.
• При перемещении в flexbox выравнивание значков отклоения в заголовке, скорее всего, не работает, поскольку мы больше не используем float. Сначала идет плавающее содержимое, но с flexbox это уже не так. Обновите значки отклоения, чтобы они шли после модальных заголовков, чтобы исправить это.
• Опция remote (которая может использоваться для автоматической загрузки и вставки внешнего контента в модальное окно) и соответствующее событие loaded.bs.modal были удалены. Мы рекомендуем вместо этого использовать клиентскую шаблонизацию или фреймворк привязки данных или вызов самого jQuery.load.

Навигация

• Компонент переписан с flexbox.
• Удалены почти все > селекторы для упрощения стиля через невложенные классы.
• Вместо селекторов, специфичных для HTML, таких как .nav > li > a, мы используем отдельные классы для .nav, .nav-item, и .nav-link. Это делает ваш HTML более гибким при одновременном увеличении расширяемости.

Навигационная панель

Navbar полностью переписан в flexbox с улучшенной поддержкой выравнивания, отклика и настройки.

• Адаптивные поведения navbar теперь применяются к классу .navbar через необходимый .navbar-toggleable-{breakpoint} где вы выбираете, где свернуть навигационную панель. Раньше было меньше модификации переменной и требовалось перекомпиляция.
• .navbar-default теперь .navbar-light, хотя .navbar-inverse остается прежним. Один из них требуется для каждой навигационной панели. Однако эти классы больше не устанавливают background-color; вместо этого они существенно влияют только на color.
• Navbars теперь требует какой-то фоновой декларации. Выберите из наших утилит для фона (.bg-*) или установите свои собственные с помощью классов light / inverse выше для любой кастомизации.
• С учетом стилей flexbox, навигационная панель теперь может использовать утилиты flexbox для упрощения выравнивания.
• . navbar-toggle теперь .navbar-toggler и имеет разные стили и внутреннюю разметку (не более трех <span>).
• Полностью исключен класс .navbar-form. Он больше не нужен; вместо этого просто используйте .form-inline и примените при необходимости margin утилиты.
• По умолчанию навигационная панель не включает поля margin-bottom или border-radius. При необходимости используйте утилиты.
• Все примеры с navbar были обновлены, чтобы включить новую разметку.

• Компонент переписан с flexbox.
• Явные классы (.page-item, .page-link) теперь требуются от потомков .pagination
• Удален компонент .pager целиком, так как он был немного больше, чем настраиваемые кнопки контура.

• Явный класс, .breadcrumb-item, теперь требуется от потомков . breadcrumb

Ярлыки, значки и теги

• Переименован .label в .tag для устранения неоднозначности из элемента <label>.
• Удален компонент .badge поскольку он почти идентичен ярлыкам / тегам. Вместо этого используйте модификатор .tag-pill вместе с компонентом метки.
• Теги больше не размещаются автоматически в группах списков и других компонентах. Для этого теперь требуются классы утилит.

Панели, thumbnails и wells

Удалены полностью для нового компонента карты.

Панели

• .panel в .card, теперь построенный с flexbox.
• .panel-default удален и не заменен.
• .panel-group удален и не заменен. .card-group — это не замена, они разные
• .panel-heading в . card-header
• .panel-title в .card-title. В зависимости от желаемого вида вы также можете использовать элементы или классы заголовков (например, <h4>, .h4) или полужирные элементы или классы (например, <strong>, <b>, .font-weight-bold). Обратите внимание, что .card-title, хотя и имеет аналогичное имя, производит иной вид, чем .panel-title.
• .panel-body в .card-block
• .panel-footer в .card-footer
• .panel-primary в .card-primary и .card-inverse (или используйте .bg-primary на .card-header)
• .panel-success в .card-success и .card-inverse (или используйте .bg-success на .card-header)
• . panel-info в .card-info и .card-inverse (или используйте .bg-info на .card-header)
• .panel-warning в .card-warning и .card-inverse (или используйте .bg-warning на .card-header)
• .panel-danger в .card-danger и .card-inverse (или используйте .bg-danger на .card-header)

Подсказки

• Удалена поддержка параметров auto размещения.

Информеры

• Удалена поддержка параметров auto размещения.

Карусель

• Переработан весь компонент, чтобы упростить дизайн и стиль. У нас есть меньше стилей для переопределения, новые индикаторы и новые значки.
• Все CSS были невложенными и переименованы, гарантируя каждому классу префикс . carousel-.
  • Для элементов карусели, .next, .prev, .left, и .right теперь являются следующими: .carousel-item-next, .carousel-item-prev, .carousel-item-left, и .carousel-item-right.
  • .item также сейчас .carousel-item.
  • Для prev/next элементов управления .carousel-control.right и .carousel-control.left теперь являются .carousel-control-right и .carousel-control-left, то есть они больше не требуют определенного базового класса.
• Удалены все адаптивные стили, отложенные до утилит (например, показ титров на некоторых видовых экранах) и пользовательские стили по мере необходимости.
• Удалены переопределения изображений для изображений в карусельных элементах, отложенные до утилит.
• Изменен пример Carousel, в него включена новая разметка и стили.

Утилиты

• Утилиты отображения экрана стали адаптивными (например, .d-none и d-{sm,md,lg,xl}-none).
• Добавлены классыd .float-{sm,md,lg,xl}-{left,right,none} для адаптивных floats и удалены .pull-left и .pull-right поскольку они избыточны для .float-left и .float-right.
• Добавлены адаптивные вариации для наших классов выравнивания текста .text-{sm,md,lg,xl}-{left,center,right}.
• Добавлены новые margin auto утилиты для всех сторон, а также вертикальные и горизонтальные сокращения.
• Добавлена boatload утилит flexbox.
• Удален .center-block для нового класса .mx-auto.

Vendor prefix mixins

vendor prefix mixins из Bootstrap 3, которые были исключены в v3.2.0, удалены в Bootstrap 4. Поскольку мы используем Autoprefixer, они больше не нужны.

Удалены следующие mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

Документация

Наша документация также получила обновление по всем направлениям:

• ы по-прежнему используем Jekyll, но у нас есть настраиваемые плагины:
  • example. rb — это fork плагина по умлочанию highlight.rb, позволяющая упростить обработку кода.
  • callout.rb является аналогичным fork, но предназначен для наших специальных выносок документов.
• Все содержимое документов было переписано в Markdown (вместо HTML) для упрощения редактирования.
• Страницы были реорганизованы для более простого контента и более доступной иерархии.
• Мы перешли с обычного CSS на SCSS, чтобы в полной мере использовать переменные Bootstrap, mixins и многое другое.

Адаптивные утилиты

Все @screen- переменные были удалены в v4.0.0. Вместо этого используйте media-breakpoint-up(), media-breakpoint-down(), или media-breakpoint-only() Sass mixins или $grid-breakpoints карту Sass.

Адаптивные классы утилит также были пересмотрены.

• Классы . hidden и .show были удалены, потому что они противоречили методам jQuery $(...).hide() и $(...).show() Вместо этого попробуйте переключить атрибут [hidden], используйте встроенные стили, такие как style="display: none;" и style="display: block;", или переключите класс .invisible.
• Старые классы (.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block) исчезли.
• Они были заменены на .hidden-xs-up .hidden-xs-down . hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down.
• Классы .hidden-*-up скрывают элемент, когда область просмотра находится в заданной точке останова или больше (например, .hidden-md-up скрывает элемент на средних, больших и очень больших устройствах).
• Классы .hidden-*-down скрывают элемент, когда область просмотра находится в данной точке останова или меньше (например, .hidden-md-down скрывает элемент на сверхмалых, малых и средних устройствах).

Вместо того, чтобы использовать явные классы .visible-* вы делаете элемент видимым, просто не скрывая его при этом размере экрана. Вы можете объединить один класс .hidden-*-up с одним классом .hidden-*-down, чтобы отображать элемент только на заданном интервале размеров экрана (например, .hidden-sm-down. hidden-xl-up показывает элемент только на средних и больших устройствах).

Обратите внимание, что изменения точек останова в v4 означают, что вам нужно увеличить одну точку останова для достижения одинаковых результатов (например, .hidden-md больше похожа на .hidden-lg-down, чем на .hidden-md-down). Новые адаптивные классы утилит не пытаются учитывать менее распространенные случаи, когда видимость элемента не может быть выражена как один непрерывный диапазон размеров видового экрана; в этом случае вам понадобится использовать пользовательский CSS.

Различные примечания для определения приоритетов

• Удалена min--moz-device-pixel-ratio для медиа-запросов.
• Измениен [disabled] кнопок на :disabled, так как IE9+ поддерживает :disabled. Однако fieldset[disabled] по-прежнему необходимо, потому что нативные отключенные поля в IE11 по-прежнему неактивны.

TODO: просмотреть список вещей в v3, которые были помечены как устаревшие.

Дополнительные замечания

• Удалена поддержка стилизованных вложенных таблиц (на данный момент)

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Please enable JavaScript to view the comments powered by Disqus.

Поддержать проект

Навбар · Начальная загрузка

Документация и примеры для мощного, отзывчивого навигационного заголовка Bootstrap, панели навигации. Включает поддержку фирменного стиля, навигации и многого другого, включая поддержку нашего плагина для сворачивания.

Как это работает

Вот что вам нужно знать перед началом работы с панелью навигации:

• Для панелей навигации требуется упаковка . navbar с .navbar-expand{-sm|-md|-lg|-xl} для адаптивного свертывания и классов цветовых схем.
• Панели навигации и их содержимое по умолчанию изменчивы. Используйте дополнительные контейнеры, чтобы ограничить их ширину по горизонтали.
• Используйте наши служебные классы spacing и flex для управления интервалами и выравниванием в панелях навигации.
• Панели навигации по умолчанию реагируют, но вы можете легко изменить их, чтобы изменить это. Отзывчивое поведение зависит от нашего подключаемого модуля Collapse JavaScript.
• Панели навигации по умолчанию скрыты при печати. Заставьте их распечатать, добавив .d-print до .navbar . См. служебный класс дисплея.
• Обеспечьте доступность с помощью элемента

Прочтите пример и список поддерживаемых подкомпонентов.

Поддерживаемый контент

Navbars поставляются со встроенной поддержкой нескольких подкомпонентов. При необходимости выберите из следующего:

• .navbar-brand для названия вашей компании, продукта или проекта.
• .navbar-nav для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков).
• .navbar-toggler для использования с нашим подключаемым модулем сворачивания и другими функциями переключения навигации.
• .form-inline для любых элементов управления и действий формы.
• .navbar-text для добавления вертикально центрированных строк текста.
• .collapse.navbar-collapse для группировки и скрытия содержимого панели навигации родительской точкой останова.

Вот пример всех подкомпонентов, включенных в адаптивную панель навигации в светлом стиле, которая автоматически сворачивается в контрольной точке lg (большой).

 <навигация>
  Панель навигации
  
    <промежуток> 
  
  <дел>
    <ул>
      

        Главная (текущая)
      
      

        Ссылка
      
      

        
          Падать
        
        

          Действие
          Другое действие
          <дел>
          Что-то еще здесь
        
      
      

        Отключено
      
    
    <форма>
      
      Поиск