Приближаване

Докато началните страници предоставят въвеждаща обиколка на проекта и това, което предлага, този документ се фокусира върху това защо правим нещата, които правим в 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-индекс скали

Има две 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>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, както и за откриване на често срещани грешки.