Падыход

Даведайцеся аб кіруючых прынцыпах, стратэгіях і метадах, якія выкарыстоўваюцца для стварэння і падтрымання 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-індэкс

У 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, якія прадастаўляе нам кожны браўзер.

Камунальныя паслугі

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.

Code conventions

Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.

We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.

Мы выкарыстоўваем vnu-jar для забеспячэння выканання стандартнага і семантычнага HTML, а таксама для выяўлення распаўсюджаных памылак.