Source

Муносибат

Дар бораи принсипҳо, стратегияҳо ва усулҳои роҳнамо, ки барои сохтан ва нигоҳдории Bootstrap истифода мешаванд, омӯзед, то шумо метавонед онро худатон осонтар созед ва васеъ кунед.

Ҳангоме ки саҳифаҳои оғозёбӣ як сафари муқаддимавии лоиҳа ва он чизеро пешниҳод мекунанд, ин ҳуҷҷат ба он нигаронида шудааст, ки чаро мо корҳоеро, ки мо дар Bootstrap мекунем. Он фалсафаи моро дар бораи сохтани веб мефаҳмонад, то дигарон аз мо биомӯзанд, бо мо саҳм гузоранд ва ба беҳтар шудани мо кумак кунанд.

Чизеро бубинед, ки дуруст садо намедиҳад, ё шояд беҳтар карда шавад? Як масъала кушоед — мо мехоҳем онро бо шумо муҳокима кунем.

Хулоса

Мо ба ҳар яки инҳо бештар дар саросари ҷаҳон ғарқ мешавем, аммо дар сатҳи баланд, ин аст он чизе ки муносибати моро роҳнамоӣ мекунад.

  • Компонентҳо бояд аввалан ҷавобгӯ ва мобилӣ бошанд
  • Компонентҳо бояд бо синфи асосӣ сохта шаванд ва тавассути синфҳои тағирдиҳанда васеъ карда шаванд
  • Давлатҳои ҷузъӣ бояд ба ҷадвали умумии z-index итоат кунанд
  • То ҳадди имкон, татбиқи HTML ва CSS-ро аз JavaScript афзалтар гардонед
  • То ҳадди имкон, утилитаҳоро бар сабкҳои фармоишӣ истифода баред
  • То ҳадди имкон, аз иҷрои талаботи қатъии HTML худдорӣ кунед (интихобкунандагони кӯдакон)

Ҷавобгар

Услубҳои ҷавобгӯи Bootstrap барои посухгӯӣ сохта шудаанд, ки ин равишро аксар вақт мобилии аввал меноманд . Мо ин истилоҳро дар ҳуҷҷатҳои худ истифода мебарем ва асосан бо он розӣ ҳастем, аммо баъзан он метавонад хеле васеъ бошад. Гарчанде ки на ҳама ҷузъҳо бояд дар Bootstrap комилан ҷавобгӯ бошанд, ин равиши посухгӯӣ дар бораи кам кардани бекоркунии CSS тавассути тела додан ба шумо барои илова кардани сабкҳо, вақте ки порти намоишӣ калонтар мешавад, мебошад.

Дар саросари Bootstrap, шумо инро дар пурсишҳои ВАО-и мо равшантар хоҳед дид. Дар аксари мавридҳо, мо min-widthдархостҳоеро истифода мебарем, ки дар нуқтаи қатъии мушаххас ба кор шурӯъ мекунанд ва аз нуқтаи кандашавии баландтар мегузаранд. Масалан, а .d-noneаз min-width: 0то беохир дахл дорад. Аз тарафи дигар, а .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арзиши онро то андозае афзоиш медиҳад, ки принсипҳои маъмули UI имкон медиҳанд, ки унсурҳои мутамаркази корбар ё дар боло ҷойгиршуда ҳамеша дар назар бимонанд. Масалан, модаль бастани ҳуҷҷат аст (масалан, шумо наметавонед ягон амали дигарро ба ҷуз амали модал иҷро кунед), аз ин рӯ мо онро дар болои навбарҳои худ ҷойгир мекунем.

Дар бораи ин дар z-indexсаҳифаи тарҳбандии мо маълумоти бештар гиред .

HTML ва CSS аз болои JS

То ҳадди имкон, мо бартарӣ медиҳем, ки HTML ва CSS-ро бар JavaScript нависед. Умуман, HTML ва CSS сермахсултаранд ва барои одамони бештари сатҳҳои гуногуни таҷриба дастрасанд. HTML ва CSS низ дар браузери шумо нисбат ба JavaScript тезтаранд ва браузери шумо дар маҷмӯъ барои шумо функсияҳои зиёде фароҳам меорад.

Ин принсип API-и дараҷаи якуми JavaScript-и мо 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-и моро соддатар ва мушаххастар нигоҳ медорад.