Подход

Хотя страницы начала работы предоставляют вводный обзор проекта и того, что он предлагает, этот документ сосредоточен на том, почему мы делаем то, что делаем в Bootstrap. Он объясняет нашу философию создания для веба, чтобы другие могли учиться у нас, вносить вклад вместе с нами и помогать нам улучшаться.

Видите что-то, что звучит неправильно, или, возможно, можно сделать лучше? Откройте issue — мы будем рады обсудить это с вами.

Резюме

Мы углубимся в каждый из них более подробно, но на высоком уровне вот что направляет наш подход.

• Компоненты должны быть адаптивными и mobile-first
• Компоненты должны строиться с базовым классом и расширяться через классы-модификаторы
• Состояния компонентов должны подчиняться общей шкале z-index
• Когда это возможно, предпочитайте реализацию на HTML и CSS вместо JavaScript
• Когда это возможно, используйте утилиты вместо пользовательских стилей
• Когда это возможно, избегайте принуждения к строгим HTML требованиям (селекторы детей)

Адаптивность

Адаптивные стили Bootstrap созданы для адаптивности, подход, который часто называют mobile-first. Мы используем этот термин в нашей документации и в основном согласны с ним, но иногда он может быть слишком широким. Хотя не каждый компонент должен быть полностью адаптивным в Bootstrap, этот адаптивный подход заключается в сокращении переопределений CSS, побуждая вас добавлять стили по мере увеличения области просмотра.

По всему Bootstrap вы увидите это наиболее ясно в наших медиа-запросах. В большинстве случаев мы используем запросы min-width, которые начинают применяться в определенной контрольной точке и продолжаются через более высокие контрольные точки. Например, .d-none применяется от min-width: 0 до бесконечности. С другой стороны, .d-md-none применяется от средней контрольной точки и выше.

Иногда мы используем max-width, когда внутренняя сложность компонента требует этого. Иногда эти переопределения функционально и ментально яснее для реализации и поддержки, чем переписывание основной функциональности наших компонентов. Мы стремимся ограничить этот подход, но будем использовать его время от времени.

Классы

Помимо нашего Reboot, кроссбраузерной таблицы стилей нормализации, все наши стили стремятся использовать классы в качестве селекторов. Это означает избегание селекторов типа (например, input[type="text"]) и посторонних родительских классов (например, .parent .child), которые делают стили слишком специфичными для легкого переопределения.

Таким образом, компоненты должны строиться с базовым классом, который содержит общие, не подлежащие переопределению пары свойство-значение. Например, .btn и .btn-primary. Мы используем .btn для всех общих стилей, таких как display, padding и border-width. Затем мы используем модификаторы, такие как .btn-primary, для добавления цвета, background-color, border-color и т.д.

Классы-модификаторы должны использоваться только тогда, когда есть несколько свойств или значений, которые нужно изменить в нескольких вариантах. Модификаторы не всегда необходимы, поэтому убедитесь, что вы действительно экономите строки кода и предотвращаете ненужные переопределения при их создании. Хорошие примеры модификаторов — это наши классы цветов темы и варианты размеров.

Шкалы z-index

В Bootstrap есть две шкалы z-index — элементы внутри компонента и компоненты-наложения.

Элементы компонентов

• Некоторые компоненты в Bootstrap построены с перекрывающимися элементами для предотвращения двойных границ без изменения свойства border. Например, группы кнопок, группы ввода и пагинация.
• Эти компоненты используют стандартную шкалу z-index от 0 до 3.
• 0 — по умолчанию (начальное), 1 — :hover, 2 — :active/.active, и 3 — :focus.
• Этот подход соответствует нашим ожиданиям наивысшего приоритета пользователя. Если элемент в фокусе, он виден и привлекает внимание пользователя. Активные элементы имеют второй по высоте приоритет, потому что они указывают состояние. Hover имеет третий по высоте приоритет, потому что указывает намерение пользователя, но почти все может быть наведено.

Компоненты-наложения

Bootstrap включает несколько компонентов, которые функционируют как наложение какого-то рода. Это включает, в порядке наивысшего z-index, выпадающие меню, фиксированные и липкие навигационные панели, модальные окна, подсказки и всплывающие окна. Эти компоненты имеют свою собственную шкалу z-index, которая начинается с 1000. Это начальное число было выбрано произвольно и служит небольшим буфером между нашими стилями и пользовательскими стилями вашего проекта.

Каждый компонент-наложение слегка увеличивает свое значение z-index таким образом, что общие принципы UI позволяют элементам, на которых сосредоточен пользователь или которые наведены, оставаться видимыми все время. Например, модальное окно блокирует документ (то есть вы не можете выполнить никакого другого действия, кроме действия модального окна), поэтому мы помещаем его выше наших навигационных панелей.

Узнайте больше об этом на нашей странице макета z-index.

HTML и CSS вместо JS

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

Этот принцип — наш первоклассный JavaScript API, использующий атрибуты data. Вам не нужно писать почти никакого JavaScript для использования наших JavaScript плагинов; вместо этого пишите HTML. Прочитайте больше об этом на нашей странице обзора JavaScript.

Наконец, наши стили основываются на фундаментальном поведении обычных веб-элементов. Когда это возможно, мы предпочитаем использовать то, что предоставляет браузер. Например, вы можете поместить класс .btn почти на любой элемент, но большинство элементов не предоставляют никакой семантической ценности или функциональности браузера. Поэтому вместо этого мы используем <button> и <a>.

То же самое касается более сложных компонентов. Хотя мы могли бы написать наш собственный плагин валидации форм для добавления классов к родительскому элементу на основе состояния ввода, тем самым позволяя нам стилизовать текст, скажем, красным, мы предпочитаем использовать псевдоэлементы :valid/:invalid, которые предоставляет нам каждый браузер.

Утилиты

Утилитарные классы — ранее хелперы в Bootstrap 3 — являются мощным союзником в борьбе с раздуванием CSS и плохой производительностью страницы. Утилитарный класс обычно представляет собой единую, неизменяемую пару свойство-значение, выраженную как класс (например, .d-block представляет display: block;). Их основная привлекательность — скорость использования при написании HTML и ограничение количества пользовательского CSS, который вам нужно писать.

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

Гибкий HTML

Хотя это не всегда возможно, мы стремимся избегать чрезмерной догматичности в наших HTML требованиях для компонентов. Таким образом, мы фокусируемся на отдельных классах в наших CSS селекторах и стараемся избегать селекторов непосредственных детей (>). Это дает вам больше гибкости в вашей реализации и помогает сохранить наш CSS проще и менее специфичным.

Соглашения о коде

Code Guide (от со-создателя Bootstrap, @mdo) документирует, как мы пишем наш HTML и CSS в Bootstrap. Он определяет руководящие принципы для общего форматирования, разумных значений по умолчанию, порядка свойств и атрибутов и многого другого.

Мы используем Stylelint для обеспечения этих стандартов и многого другого в нашем Sass/CSS. Наша пользовательская конфигурация Stylelint является открытым исходным кодом и доступна для использования и расширения другими.

Мы используем vnu-jar для обеспечения стандартного и семантического HTML, а также для обнаружения распространенных ошибок.