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