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-width
ebibuuzo ebitandika okukola ku kifo ekigere eky’okumenyawo ne bitwala waggulu okuyita mu bifo eby’okumenya eby’oku ntikko. Okugeza, a .d-none
ekola okuva min-width: 0
ku butakoma. Ku luuyi olulala, a .d-md-none
ekola okuva ku kifo eky’okumenya eky’omu makkati n’okudda waggulu.
Ebiseera ebimu tujja kukozesa max-width
ng’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, .btn
ne .btn-primary
. Tukozesa .btn
ku sitayiro zonna eza bulijjo nga display
, padding
, ne border-width
. Olwo tukozesa ebikyusakyusa nga .btn-primary
okugattako 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-index
minzaani 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
border
kintu. Okugeza, ebibinja bya button, ebibinja by’okuyingiza, n’okuwandiika empapula. - Ebitundu bino bigabana
z-index
ekipimo eky’omutindo eky’okuyita0
mu3
. 0
ye default (esooka),1
ye:hover
,2
ye:active
/.active
, era3
ye: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-index
y’ebisinga obunene , ebigwa, navbars ezitakyukakyuka n’ezikwatagana, modals, toltips, ne popovers. Ebitundu bino birina minzaani yabyo z-index
etandika 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-index
muwendo gwakyo katono mu ngeri nti emisingi gya UI egy’awamu gisobozesa ebintu ebitunuulidde omukozesa oba ebiteekeddwako okusigala nga bitunuuliddwa 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-index
lupapula 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 data
attributes. 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 .btn
ekibiina 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
/ :invalid
pseudo-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 okulagibwa nga kiraasi (okugeza, .d-block
ekiikirira 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
While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>
). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
Code conventions
Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifies guidelines for general formatting, common sense defaults, property and attribute orders, and more.
We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.
Tukozesa vnu-jar okussa mu nkola HTML eya mutindo n’ey’amakulu, wamu n’okuzuula ensobi eza bulijjo.