Source

Падыход

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

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

Карысныя класы — раней памочнікі ў Bootstrap 3 — з'яўляюцца магутным саюзнікам у барацьбе з раздуццем CSS і нізкай прадукцыйнасцю старонкі. Карысны клас звычайна ўяўляе сабой адну нязменную пару ўласцівасць-значэнне, выражаную ў выглядзе класа (напрыклад, .d-blockпрадстаўляе display: block;). Іх асноўная прывабнасць - гэта хуткасць выкарыстання падчас напісання HTML і абмежаванне колькасці карыстальніцкага CSS, які вы павінны напісаць.

У прыватнасці, што тычыцца карыстальніцкага CSS, утыліты могуць дапамагчы ў барацьбе з павелічэннем памеру файла, скарачаючы найбольш часта паўтараюцца пары ўласцівасць-значэнне ў адзіныя класы. Гэта можа мець драматычны эфект у маштабах вашых праектаў.

Гнуткі HTML

Хаця гэта не заўсёды магчыма, мы імкнемся пазбягаць празмернай дагматыкі ў патрабаваннях HTML да кампанентаў. Такім чынам, мы засяроджваемся на асобных класах у нашых селектараў CSS і стараемся пазбягаць непасрэдных даччыных селектараў ( >). Гэта дае вам большую гнуткасць у рэалізацыі і дапамагае зрабіць наш CSS больш простым і менш канкрэтным.