Расширение Bootstrap

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

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

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

Краткие сведения

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

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

Адаптивный

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

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

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

Классы

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

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

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

Значение каждого компонента overlay немного увеличивается 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, а также для обнаружения распространенных ошибок.

На этой странице