Приближаване
Научете за ръководните принципи, стратегии и техники, използвани за изграждане и поддръжка на 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, когато присъщата сложност на даден компонент го изисква. Понякога тези замени са функционално и психически по-ясни за внедряване и поддръжка от пренаписването на основната функционалност от нашите компоненти. Стремим се да ограничим този подход, но ще го използваме от време на време.
Освен нашия Reboot, таблица със стилове за нормализиране на различни браузъри, всички наши стилове имат за цел да използват класове като селектори. Това означава избягване на селекторите на типове (напр. input[type="text"]) и външните родителски класове (напр. .parent .child), които правят стиловете твърде специфични, за да могат лесно да бъдат отменени.
Като такива, компонентите трябва да бъдат изградени с базов клас, който съдържа общи двойки свойства-стойност, които не трябва да бъдат отменяни. Например .btnи .btn-primary. Използваме .btnза всички често срещани стилове като display, paddingи border-width. След това използваме модификатори като .btn-primaryдобавяне на цвят, фонов цвят, граница и т.н.
Модификаторните класове трябва да се използват само когато има множество свойства или стойности, които трябва да бъдат променени в множество варианти. Модификаторите не винаги са необходими, така че се уверете, че наистина запазвате редове от код и предотвратявате ненужни отмени, когато ги създавате. Добри примери за модификатори са нашите тематични цветови класове и варианти на размери.
Има две 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 вместо 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 изисквания за компоненти. По този начин ние се фокусираме върху единични класове в нашите CSS селектори и се опитваме да избегнем непосредствените дъщерни селектори ( ~). Това ви дава по-голяма гъвкавост във вашето внедряване и помага да запазите нашия CSS по-прост и по-малко специфичен.