Муносибат

Дар бораи принсипҳо, стратегияҳо ва усулҳои роҳнамо, ки барои сохтан ва нигоҳдории 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-и моро соддатар ва мушаххастар нигоҳ медорад.

Конвенсияҳои код

Дастури код (аз созандаи Bootstrap, @mdo) ҳуҷҷат медиҳад, ки чӣ гуна мо HTML ва CSS-и худро дар саросари Bootstrap менависем. Он дастурҳоро барои форматкунии умумӣ, пешфарзҳои ақли солим, фармоишҳои амвол ва атрибутҳо ва ғайраро мушаххас мекунад.

Мо Stylelint-ро барои татбиқи ин стандартҳо ва ғайра дар Sass/CSS-и худ истифода мебарем. Танзимоти махсуси Stylelint мо манбаи кушода аст ва барои дигарон истифода ва васеъ кардан дастрас аст.

Мо vnu-jar-ро барои татбиқи HTML-и стандартӣ ва семантикӣ ва инчунин ошкор кардани хатогиҳои умумӣ истифода мебарем.