Хотя на начальных страницах представлен вводный тур по проекту и его предложениям, в этом документе основное внимание уделяется тому, почему мы делаем то, что делаем в 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 добавление цвета, цвета фона, цвета границы и т.д.
Классы модификаторов следует использовать только тогда, когда есть несколько свойств или значений, которые нужно изменить в нескольких вариантах. Модификаторы не всегда необходимы, поэтому убедитесь, что вы действительно сохраняете строки кода и предотвращаете ненужные переопределения при их создании. Хорошими примерами модификаторов являются классы цветов и варианты размеров нашей темы.
Шкалы z-индекса
В z-index bootstrap есть две шкалы - элементы внутри компонента и компоненты наложения.
Составные элементы
- Некоторые компоненты в Bootstrap построены с перекрывающимися элементами для предотвращения двойных границ без изменения
borderсвойства. Например, группы кнопок, группы ввода и разбиение на страницы. - Эти компоненты имеют стандартную
z-indexшкалу0прохождения3. 0по умолчанию (начальная),1есть:hover,2равно:active/.activeи3есть:focus.- Такой подход соответствует нашим ожиданиям в отношении наивысшего приоритета пользователей. Если элемент сфокусирован, он находится в поле зрения и находится в поле зрения пользователя. Активные элементы занимают второе место, потому что они указывают состояние. Наведение занимает третье место, потому что указывает на намерение пользователя, но зависать можно почти все .
Компоненты наложения
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> и <a>.
То же самое и с более сложными компонентами. Хотя мы могли бы написать собственный плагин проверки формы для добавления классов к родительскому элементу на основе состояния ввода, тем самым позволяя стилизовать текст, скажем, красный, мы предпочитаем использовать псевдоэлементы :valid/, которые :invalid предоставляет нам каждый браузер.
Утилиты
Служебные классы - бывшие помощники в Bootstrap 3 - являются мощным союзником в борьбе с раздуванием CSS и низкой производительностью страницы. Служебный класс обычно представляет собой единую неизменную пару свойств-значений, выраженную как класс (например, .d-block представляет display: block;). Их главная привлекательность - скорость использования при написании HTML и ограничение количества настраиваемых CSS, которые вам нужно написать.
В частности, что касается настраиваемого CSS, утилиты могут помочь бороться с увеличением размера файла за счет сокращения наиболее часто повторяемых пар свойство-значение в отдельные классы. Это может иметь драматический эффект в ваших проектах.
Гибкий HTML
Хотя это не всегда возможно, мы стараемся избегать излишней догматики в наших требованиях HTML к компонентам. Таким образом, мы фокусируемся на отдельных классах в наших селекторах CSS и стараемся избегать непосредственных дочерних селекторов (>). Это дает вам больше гибкости в реализации и помогает сделать наш CSS более простым и менее конкретным.