Підхід

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

Бачите щось, що звучить не так, або, можливо, можна було б зробити краще? Відкрийте питання — ми будемо раді обговорити його з вами.

Резюме

Ми докладніше розглянемо кожен із них, але на високому рівні ось що керує нашим підходом.

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

Чуйний

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

У Bootstrap ви найяскравіше це побачите в наших медіа-запитах. У більшості випадків ми використовуємо min-widthзапити, які починають застосовуватися в конкретній точці зупину та переходять до вищих точок зупину. Наприклад, a .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.
• Цей підхід відповідає нашим очікуванням щодо найвищого пріоритету користувача. Якщо елемент у фокусі, це означає, що він у полі зору користувача. Активні елементи займають друге місце, тому що вони вказують на стан. Наведення курсора займає третє місце, тому що воно вказує на намір користувача, але можна навести майже будь -що.

Накладання компонентів

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, а також для виявлення типових помилок.