Manghenelo
Dyondza hi milawu leyi kongomisaka, tindlela, na tithekiniki leti tirhisiwaka ku aka na ku hlayisa Bootstrap leswaku u ta kota ku yi lulamisa hi ku olova no yi andlala hi wexe.
Loko matluka yo sungula ya nyika riendzo ro sungula ra phurojeke na leswi yi swi nyikaka, tsalwa leri ri kongomisa eka leswaku ha yini hi endla swilo leswi hi swi endlaka eka Bootstrap. Yi hlamusela filosofi ya hina ku aka eka webu leswaku van’wana va ta dyondza eka hina, va hoxa xandla na hina, na ku hi pfuna ku antswisa.
Xana u vona nchumu lowu nga twaliki kahle, kumbexana wu nga endliwa ku antswa? Pfula nkandziyiso —hi nga tsakela ku bula na wena hi wona.
Hi ta nghena eka xin’wana na xin’wana xa leswi ngopfu hinkwako, kambe eka xiyimo xa le henhla, hi leswi swi kongomisaka endlelo ra hina.
- Swiphemu swi fanele ku hlamula naswona swi fanele swi va leswi famba-fambaka
- Swiphemu swi fanele ku akiwa hi tlilasi ya le hansi naswona swi andlariwile hi ku tirhisa titlilasi ta vacinci
- Swiyimo swa swiphemu swi fanele ku yingisa xikalo xa z-index lexi tolovelekeke
- Loko swi koteka, tsakela ku tirhisiwa ka HTML na CSS ku tlula JavaScript
- Loko swi koteka, tirhisa switirhisiwa ku tlula switayele swa ntolovelo
- Loko swi koteka, papalata ku sindzisa swilaveko leswi tiyeke swa HTML (swihlawulekisi swa vana) .
Switayele swo hlamula swa Bootstrap swi akiwile leswaku swi hlamula, endlelo leri talaka ku vuriwa mobile-first . Hi tirhisa rito leri eka ti docs ta hina naswona hi pfumelelana ngopfu na rona, kambe minkarhi yin’wana ri nga anama ngopfu. Hambi leswi ku nga riki xiphemu xin’wana na xin’wana lexi faneleke ku hlamula hi ku helela eka Bootstrap, endlelo leri ro hlamula i mayelana na ku hunguta ku tlula ka CSS hi ku ku susumeta ku engetela switayele loko xivono xi ri karhi xi va xikulu.
Ku tsemakanya Bootstrap, u ta swi vona leswi kahle swinene eka swivutiso swa hina swa vuhangalasi bya mahungu. Hi xitalo, hi tirhisa min-widthswivutiso leswi sungulaka ku tirha eka ndhawu yo karhi yo tshoveka naswona swi yisa emahlweni hi ku tirhisa tindhawu ta le henhla to tshoveka. Hi xikombiso, a yi .d-nonetirha ku suka eka min-width: 0ku nga heli. Hi hala tlhelo, a yi .d-md-nonetirha ku suka eka ndhawu yo tshoveka ya le xikarhi ku ya ehenhla.
Minkarhi yin’wana hi ta tirhisa max-widthloko ku rharhangana ka ntumbuluko ka xiphemu ku swi lava. Minkarhi yin’wana, ku tlula loku ku le rivaleni hi tlhelo ra ntirho na miehleketo ku tirhisa na ku seketela ku tlula ku tsala nakambe ntirho wa nkoka ku suka eka swiphemu swa hina. Hi tikarhatela ku hunguta endlelo leri, kambe hi ta ri tirhisa nkarhi na nkarhi.
Ehandle ka Reboot ya hina, xitayili xa ku cinca-cinca ka xihlamusela-marito xa xihambano, switayele swa hina hinkwaswo swi kongomisa ku tirhisa titlilasi tanihi vahlawuri. Leswi swi vula ku fambela ekule na swihlawulekisi swa muxaka (xikombiso, input[type="text"]) na titlilasi ta vatswari ta le handle (xikombiso, .parent .child) leti endlaka leswaku switayele swi va leswi kongomeke ngopfu ku swi tlula hi ku olova.
Hi ndlela yaleyo, swiphemu swi fanele ku akiwa hi tlilasi ya le hansi leyi nga na mimpatswa ya nkoka wa nhundzu leyi tolovelekeke, leyi nga ta ka yi nga tluriwi. Hi xikombiso, .btnna .btn-primary. Hi tirhisa .btneka switayele hinkwaswo leswi tolovelekeke swo fana na display, padding, na border-width. Hi tlhela hi tirhisa swicinci swo fana na .btn-primaryku engetela muvala, background-color, border-color, na swin’wana.
Titlilasi ta vacinci ti fanele ku tirhisiwa ntsena loko ku ri na swihlawulekisi swo tala kumbe mimpimo leyi faneleke ku cinciwa ku tsemakanya swihlawulekisi swo tala. Swicinci a hi minkarhi hinkwayo swi lavekaka, kutani tiyiseka leswaku entiyisweni u hlayisa milayeni ya khodi ni ku sivela ku tlula loku nga lavekiki loko u yi tumbuluxa. Swikombiso leswinene swa swicinci i titlilasi ta hina ta mihlovo ya nhlokomhaka na ku hambana ka vukulu.
Kuna z-indexswikalo swimbirhi eka Bootstrap—swiaki endzeni ka xiphemu na swiphemu swo funengeta.
- Swiphemu swin’wana eka Bootstrap swi akiwile hi swiaki leswi hlanganisaka ku sivela mindzilakano yimbirhi handle ko cinca
bordernhundzu. Hi xikombiso, mintlawa ya swikomba-nkarhi, mintlawa yo nghenisa ni ku veka mapheji. - Swiphemu leswi swi avelana
z-indexxikalo xa ntolovelo xa ku0hundza3. 0i default (yo sungula),1i:hover,2i:active/.active, na ,3i:focus.- Endlelo leri ri fambelana na ku langutela ka hina ka ku rhangisa ka le henhla ka vatirhisi. Loko elemente yi kongomisiwile, yi le ku voneni naswona yi le ku langutiseni ka mutirhisi. Swiaki leswi tirhaka i swa vumbirhi eka xiyimo xa le henhla hikuva swi kombisa xiyimo. Hover i ya vunharhu ehenhla hikuva yi kombisa xikongomelo xa mutirhisi, kambe kwalomu ka xin’wana ni xin’wana xi nga hover.
Bootstrap yi katsa swiphemu swo hlayanyana leswi tirhaka tanihi xifunengeto xa muxaka wo karhi. Leswi swi katsa, hi ku landzelelana ka le henhla z-index, ku wela ehansi, ti- navbar leti nga cinciki ni leti namarhelaka, ti- modal, ti- toltips, ni ti- popover. Swiphemu leswi swi ni z-indexxikalo xa swona lexi sungulaka eka 1000. Nomboro leyi yo sungula i ya xitshuketa naswona yi tirha tanihi xisirhelelo lexitsongo exikarhi ka switayele swa hina na switayele swa ntolovelo swa phurojeke ya wena.
Xiphemu xin’wana na xin’wana xo funengeta xi engetela z-indexnkoka wa xona katsongo hi ndlela leyi milawu ya UI leyi tolovelekeke yi pfumelelaka swiaki leswi kongomisiweke eka mutirhisi kumbe leswi hovered ku tshama swi ri eku voneni minkarhi hinkwayo. Xikombiso, modal i ku sivela matsalwa (xikombiso, a wu nge teki goza rin’wana handle ka xiendlo xa modal), kutani hi veka sweswo ehenhla ka ti-navbar ta hina.
Dyondza swo tala hi mhaka leyi eka z-indextluka ra hina ra layout .
Loko swi koteka, hi tsakela ku tsala HTML na CSS ku tlula JavaScript. Hi ku angarhela, HTML na CSS swi tele ngopfu naswona swi fikeleleka eka vanhu vo tala va swiyimo hinkwaswo swo hambana swa ntokoto. HTML na CSS na swona swi hatlisa eka browser ya wena ku tlula JavaScript, naswona browser ya wena hi ntolovelo yi ku nyika ntirho lowukulu.
Nsinya lowu wa nawu i dataswihlawulekisi swa hina swa JavaScript API ya xiyimo xo sungula. A wu lavi ku tsala kwalomu ka JavaScript yihi na yihi leswaku u tirhisa ti-plugin ta hina ta JavaScript; ematshan’weni ya sweswo, tsala HTML. Hlaya swo tala hi mhaka leyi eka tluka ra hina ra nkatsakanyo wa JavaScript .
Xo hetelela, switayele swa hina swi aka eka mahanyelo ya xisekelo ya swiaki swa webu leswi tolovelekeke. Loko swi koteka, hi tsakela ku tirhisa leswi browser yi swi nyikaka. Xikombiso, u nga veka .btntlilasi eka kwalomu ka elemente yin’wana na yin’wana, kambe swiaki swo tala a swi nyiki nkoka wihi na wihi wa semantiki kumbe ntirho wa browser. Kutani ematshan’weni ya sweswo, hi tirhisa <button>s na <a>s.
Swi tano ni hi swiphemu leswi rharhanganeke swinene. Loko hi nga tsala plugin ya hina ya ku tiyisisa fomo ku engetela titlilasi eka elemente ya mutswari leyi sekeriweke eka xiyimo xa input, hi ndlela yoleyo hi pfumelela ku xitayili xa tsalwa say red, hi tsakela ku tirhisa :valid/ :invalidpseudo-elements leswi browser yin’wana na yin’wana yi hi nyikaka swona.
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
Hambileswi swi nga kotekiki minkarhi hinkwayo, hi lwela ku papalata ku va ni vutivi byo tlula mpimo eka swilaveko swa hina swa HTML swa swiphemu. Xisweswo, hi kongomisa eka titlilasi leti nga toxe eka swihlawulekisi swa hina swa CSS naswona hi ringeta ku papalata swihlawulekisi swa vana swa xihatla ( >). Leswi swi ku nyika ku cinca-cinca lokukulu eka ku tirhisiwa ka wena naswona swi pfuna ku hlayisa CSS ya hina yi olova naswona yi nga kongomanga ngopfu.