Okutuukirira

Yiga ku misingi egilungamya, obukodyo, n’obukodyo obukozesebwa okuzimba n’okulabirira Bootstrap osobole okwanguyirwa okulongoosa n’okugigaziya ggwe kennyini.

Wadde ng’emiko gy’okutandika giwa okulambula okw’ennyanjula ku pulojekiti n’ebyo by’ewa, ekiwandiiko kino kissa essira ku nsonga lwaki tukola ebintu bye tukola mu Bootstrap. Kinnyonnyola obufirosoofo bwaffe okutuuka ku kuzimba ku mukutu abalala basobole okutuyigirako, okuwaayo naffe, n’okutuyamba okulongoosa.

Laba ekintu ekitawulikika bulungi, oba mpozzi ekiyinza okukolebwa obulungi? Ggulawo ensonga —twandyagadde okugikubaganyaako ebirowoozo naawe.

Okubumbako

Tujja kubbira mu buli kimu ku bino ebisingawo wonna, naye ku mutendera ogwa waggulu, wuuno ekilungamya enkola yaffe.

• Ebitundu birina okuba nga biddamu era nga bisooka ku ssimu
• Ebitundu birina okuzimbibwa nga biriko kiraasi ey’omusingi era ne bigaziyizibwa nga biyita mu kiraasi z’abakyusa
• Embeera z’ebitundu zirina okugondera minzaani ya z-index eya bulijjo
• Buli lwe kiba kisoboka, oyagala okussa mu nkola HTML ne CSS okusinga JavaScript
• Buli lwe kiba kisoboka, kozesa ebikozesebwa ku sitayiro eza bulijjo
• Buli lwe kiba kisoboka, weewale okussa mu nkola ebisaanyizo ebikakali ebya HTML (abalonda abaana) .

Okuddamu

Bootstrap's responsive styles zizimbibwa okusobola okuddamu, enkola etera okuyitibwa mobile-first . Ekigambo kino tukikozesa mu docs zaffe era okusinga tukkiriziganya nakyo, naye oluusi kiyinza okuba ekigazi ennyo. Wadde nga si buli kitundu nti kirina okuba nga kiddamu ddala mu Bootstrap, enkola eno ey’okuddamu ekwata ku kukendeeza ku CSS overrides nga ekusika okwongerako sitayiro nga viewport efuuka ennene.

Across Bootstrap, kino ojja kukiraba bulungi mu bibuuzo byaffe eby'emikutu. Emirundi egisinga, tukozesa min-widthebibuuzo ebitandika okukola ku kifo ekigere eky’okumenyawo ne bitwala waggulu okuyita mu bifo eby’okumenya eby’oku ntikko. Okugeza, a .d-noneekola okuva min-width: 0ku butakoma. Ku luuyi olulala, a .d-md-noneekola okuva ku kifo eky’okumenya eky’omu makkati n’okudda waggulu.

Ebiseera ebimu tujja kukozesa max-widthng’obuzibu obuzaaliranwa obw’ekitundu bwe bwetaaga. Ebiseera ebimu, bino overrides biba functionally ne mentally clearer okussa mu nkola n'okuwagira okusinga okuddamu okuwandiika core functionality okuva mu bitundu byaffe. Tufuba okussa ekkomo ku nkola eno, naye tujja kugikozesa oluusi n’oluusi.

Ebisulo by’abayizi

Ng’oggyeeko Reboot yaffe, cross-browser normalization stylesheet, sitayiro zaffe zonna zigenderera okukozesa kiraasi ng’abasunsula. Kino kitegeeza okwewala ebilonda ebika (okugeza, input[type="text"]) ne kiraasi z’abazadde ez’ebweru (okugeza, .parent .child) ezifuula emisono egy’enjawulo ennyo okusobola okwanguyirwa okusazaamu.

Nga bwe kiri, ebitundu bisaana okuzimbibwa n’ekibiina eky’omusingi ekirimu ebibiri ebya bulijjo, ebitali bigenda kusazibwamu eby’obugagga-omuwendo. Ng’ekyokulabirako, .btnne .btn-primary. Tukozesa .btnku sitayiro zonna eza bulijjo nga display, padding, ne border-width. Olwo tukozesa ebikyusakyusa nga .btn-primaryokugattako langi, background-color, border-color, n’ebirala.

Ebika by’ebikyusa birina okukozesebwa nga waliwo eby’obugagga oba emiwendo mingi egy’okukyusibwa okuyita mu nkyukakyuka eziwera. Ebikyusa tebyetaagisa bulijjo, kale kakasa nti ddala otereka layini za koodi n'okuziyiza okusazaamu okuteetaagisa ng'ozikola. Ebyokulabirako ebirungi eby’ebikyusakyusa bye bika byaffe ebya langi z’omulamwa n’enjawulo za sayizi.

minzaani za z-index

Waliwo z-indexminzaani bbiri mu Bootstrap —ebintu ebiri munda mu kitundu n’ebitundu ebibikka.

Ebintu ebikola ebitundu

• Ebitundu ebimu mu Bootstrap bizimbibwa n’ebintu ebikwatagana okuziyiza ensalosalo ez’emirundi ebiri awatali kukyusa borderkintu. Okugeza, ebibinja bya button, ebibinja by’okuyingiza, n’okuwandiika empapula.
• Ebitundu bino bigabana z-indexekipimo eky’omutindo eky’okuyita 0mu 3.
• 0ye default (esooka), 1ye :hover, 2ye :active/ .active, era 3ye :focus.
• Enkola eno ekwatagana n’ebyo bye tusuubira eby’okukulembeza abakozesa okusinga. Singa ekintu kiba kitunuuliddwa, kiba mu kulaba era nga kiri ku kufaayo kw’omukozesa. Element ezikola ziri mu kyakubiri mu waggulu kubanga ziraga embeera. Hover ye yakusatu mu waggulu kubanga eraga ekigendererwa ky’omukozesa, naye kumpi ekintu kyonna kisobola okuteekebwako hover.

Ebitundu ebibikkako

Bootstrap erimu ebitundu ebiwerako ebikola nga overlay ey’ekika ekimu. Kino kizingiramu, mu nsengeka z-indexy’ebisinga obunene , ebigwa, navbars ezitakyukakyuka n’ezikwata, modals, toltips, ne popovers. Ebitundu bino birina minzaani yabyo z-indexetandika ku 1000. Ennamba eno etandika yalondebwa mu ngeri ey’ekimpatiira era ekola nga buffer entono wakati w’emisono gyaffe n’emisono egy’ennono egya pulojekiti yo.

Buli kitundu eky’okubikka kyongera ku z-indexmuwendo gwakyo katono mu ngeri nti emisingi gya UI egy’awamu gisobozesa ebintu ebitunuuliddwa oba ebiteekeddwako omukozesa okusigala mu kulaba ekiseera kyonna. Okugeza, modal kwe kuziyiza ebiwandiiko (okugeza, tosobola kukola kikolwa kirala kyonna okuggyako ekikolwa kya modal), kale ekyo tukiteeka waggulu wa navbars zaffe.

Manya ebisingawo ku nsonga eno mu z-indexlupapula lwaffe olw'ensengeka .

HTML ne CSS ku JS

Buli lwe kiba kisoboka, twagala nnyo okuwandiika HTML ne CSS ku JavaScript. Okutwaliza awamu, HTML ne CSS zisinga kukola era zituukirirwa abantu bangi ab’emitendera gyonna egy’enjawulo egy’obumanyirivu. HTML ne CSS nazo zikola mangu mu browser yo okusinga JavaScript, era okutwalira awamu browser yo ekuweereza emirimu mingi.

Omusingi guno gwe API yaffe eya JavaScript ey’omutindo ogusooka nga tukozesa dataattributes. Teweetaaga kuwandiika kumpi JavaScript yonna okukozesa JavaScript plugins zaffe; mu kifo ky’ekyo, wandiika HTML. Soma ebisingawo ku nsonga eno mu lupapula lwaffe olw'okulaba JavaScript .

Ekisembayo, emisono gyaffe gizimba ku nneeyisa enkulu ez’ebintu eby’omukutu ebya bulijjo. Buli lwe kiba kisoboka, twagala nnyo okukozesa ebyo bbulawuzi by’ewa. Okugeza, osobola okuteeka .btnekibiina kumpi ku elementi yonna, naye elementi ezisinga teziwa muwendo gwonna ogw’amakulu oba enkola ya browser. Kale mu kifo ky’ekyo, tukozesa <button>s ne <a>s.

Bwe kityo bwe kiri ne ku bitundu ebizibu ennyo. Wadde nga tusobola okuwandiika plugin yaffe ey’okukakasa foomu okwongera kiraasi ku elementi omuzadde okusinziira ku mbeera y’okuyingiza, bwe tutyo ne tutusobozesa okukola sitayiro y’ekiwandiiko tugambe emmyufu, twagala nnyo okukozesa :valid/ :invalidpseudo-elements buli browser gy’etuwa.

Ebikozesebwa

Utility classes —eyali abayambi mu Bootstrap 3 —mukwano gwa maanyi mu kulwanyisa CSS bloat n'okukola obubi page. Ekibiina ky’omugaso kitera okuba ekintu kimu, ekitali kikyukakyuka okugatta omuwendo gw’ebintu eragiddwa nga kiraasi (okugeza, .d-blockekiikirira display: block;). Ekisinga okusikiriza kwe kukozesa amangu nga owandiika HTML n’okussa ekkomo ku bungi bwa CSS eya custom gy’olina okuwandiika.

Okusingira ddala ku bikwata ku CSS eya bulijjo, ebikozesebwa bisobola okuyamba okulwanyisa obunene bwa fayiro obweyongera nga bikendeeza ku bibiri byo ebisinga okuddiŋŋanwa eby’omuwendo gw’ebintu mu kiraasi emu. Kino kiyinza okuba n’akakwate ak’amaanyi ku mutendera mu pulojekiti zo.

HTML ekyukakyuka

Wadde nga bulijjo tekisoboka, tufuba okwewala okubeera ennyo enzikiriza mu byetaago byaffe ebya HTML ku bitundu. Bwe kityo, essira tulitadde ku bibiina ebimu mu basunsula baffe aba CSS era tugezaako okwewala abasunsula abaana ab’amangu ( >). Kino kikuwa okukyukakyuka okusingawo mu kuteeka mu nkola kwo era kiyamba okukuuma CSS yaffe nga nnyangu era nga tekwatagana nnyo.

Enkolagana za koodi

Code Guide (okuva mu Bootstrap co-creator, @mdo) ewandiika engeri gye tuwandiikamu HTML ne CSS yaffe okubuna Bootstrap. Eraga ebiragiro ku nsengeka eya bulijjo, ebisookerwako eby’amagezi aga bulijjo, ebiragiro by’ebintu n’ebintu, n’ebirala.

Tukozesa Stylelint okussa mu nkola emitendera gino n’ebirala mu Sass/CSS yaffe. Custom Stylelint config yaffe open source era eriwo abalala okukozesa n'okugaziya.

Tukozesa vnu-jar okussa mu nkola HTML eya mutindo n’ey’amakulu, wamu n’okuzuula ensobi eza bulijjo.