Подход

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

В то время как страницы «Начало работы» представляют собой вводный тур по проекту и тому, что он предлагает, этот документ фокусируется на том, почему мы делаем то, что делаем в Bootstrap. В нем объясняется наша философия построения в Интернете, чтобы другие могли учиться у нас, вносить свой вклад вместе с нами и помогать нам совершенствоваться.

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

Резюме

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

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

Отзывчивый

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

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

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

Классы

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

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

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

шкалы z-индекса

В 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ценность таким образом, что общие принципы пользовательского интерфейса позволяют пользователю постоянно оставаться в поле зрения. Например, модальное окно блокирует документ (например, вы не можете выполнять какие-либо другие действия, кроме действия модального окна), поэтому мы помещаем его над нашими навигационными панелями.

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

HTML и CSS вместо JS

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

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

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

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

Утилиты

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

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

Гибкий HTML

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

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

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

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

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