Ụzọ

Ọ bụ ezie na ibe mmalite na-enye nlegharị anya mmalite nke oru ngo na ihe ọ na-enye, akwụkwọ a na-elekwasị anya na ihe mere anyị ji eme ihe ndị anyị na-eme na Bootstrap. Ọ na-akọwa nkà ihe ọmụma anyị iwulite na webụ ka ndị ọzọ nwee ike ịmụta ihe n'aka anyị, tinye aka na anyị, ma nyere anyị aka imeziwanye.

Hụ ihe na-adaghị nke ọma, ma ọ bụ ikekwe enwere ike ime ya nke ọma? Mepee mbipụta — ọ ga-amasị anyị ka gị na gị kparịta ya.

Nchịkọta

Anyị ga-abanye n'ime nke ọ bụla n'ime ihe ndị a oge niile, mana n'ogo dị elu, nke a bụ ihe na-eduzi ụzọ anyị.

• Ngwa kwesịrị ịdị na-anabata na mkpanaka-mbụ
• Ekwesịrị iji klas ntọala wuo akụrụngwa wee gbasaa site na klaasị mgbanwe
• Steeti mpaghara kwesịrị irube isi n'ogo z-index nkịtị
• Mgbe ọ bụla enwere ike, na-ahọrọ mmejuputa HTML na CSS karịa Javascript
• Mgbe ọ bụla o kwere mee, jiri akụrụngwa karịa ụdị omenala
• Mgbe ọ bụla enwere ike, zere ịmanye iwu HTML siri ike (ndị na-ahọpụta ụmụaka)

Na-anabata

A na-ewu ụdị nnabata nke Bootstrap ka ọ bụrụ nke na-anabata ya, ụzọ a na-akpọkarị ekwentị-mbụ . Anyị na-eji okwu a na docs anyị ma kwenye na ya, mana mgbe ụfọdụ ọ nwere ike ịkarị oke. Ọ bụ ezie na ọ bụghị akụrụngwa ọ bụla ga -anabatarịrị kpamkpam na Bootstrap, usoro nnabata a bụ maka ibelata CSS ga-emerịrị site n'ịkwanye gị ịgbakwunye ụdị ka ihe nlele na-abawanye.

N'ofe Bootstrap, ị ga-ahụ nke a nke ọma na ajụjụ mgbasa ozi anyị. N'ọtụtụ oge, anyị na-eji min-widthajụjụ na-amalite itinye n'otu ebe nkwụsịtụ ma na-ebufe ebe nkwụsịtụ dị elu. Dịka ọmụmaatụ, a na .d-none-emetụta site min-width: 0na ruo enweghi ngwụcha. N'aka nke ọzọ, a na .d-md-none-emetụta site na ọkara breakpoint na elu.

Mgbe ụfọdụ, anyị ga-eji max-widthmgbe mgbagwoju anya akụrụngwa chọrọ ya. Mgbe ụfọdụ, ihe nfefe ndị a na-arụ ọrụ na n'uche dokwuo anya iji mejuputa na nkwado karịa idegharị isi ọrụ site na ngwa anyị. Anyị na-agba mbọ ịkwụsị usoro a, mana anyị ga-eji ya site n'oge ruo n'oge.

Klas

Wezụga Reboot anyị, akwụkwọ nhazi ihe nleba anya nke ihe nchọgharị, ụdị anyị niile na-achọ iji klaasị dị ka ndị nhọpụta. Nke a pụtara ịpụpụ ụdị ahọpụtara (dịka ọmụmaatụ input[type="text"]) na klaasị nne na nna na-enweghị atụ (dịka ọmụmaatụ .parent .child) nke na-eme ka ụdị dị iche iche pụta ìhè ngwa ngwa.

Dị ka ndị dị otú a, ekwesịrị iji klas ntọala wuo akụrụngwa nke nwere ụzọ abụọ bara uru ihe onwunwe na-agaghị agafe agafe. Dị ka ihe atụ, .btnna .btn-primary. Anyị na-eji .btnmaka ụdị niile a na-ahụkarị dịka display, padding, na border-width. Anyị na-eji ihe mgbanwe dị .btn-primaryka ịgbakwunye agba, agba ndabere, agba oke, wdg.

Ekwesịrị iji klas mgbanwe naanị mgbe enwere ọtụtụ akụrụngwa ma ọ bụ ụkpụrụ a ga-agbanwe n'ofe ọtụtụ ụdị. Ndị na-agbanwe agbanwe anaghị adị mkpa mgbe niile, yabụ jide n'aka na ị na-echekwa ahịrị koodu ma na-egbochi mbugharị na-enweghị isi mgbe ị na-eke ha. Ezi ihe atụ nke ndị ngbanwe bụ klaasị agba agba na nha nha.

z-index akpịrịkpa

Enwere z-indexakpịrịkpa abụọ na Bootstrap—ihe dị n'ime akụrụngwa yana ihe machie.

Ihe mejupụtara

• A na-eji ihe ndị na-adakọba wuo ụfọdụ ihe dị na Bootstrap iji gbochie oke okpukpu abụọ na-agbanweghị ihe borderonwunwe ahụ. Dịka ọmụmaatụ, otu bọtịnụ, otu ntinye, na pagination.
• Ngwa ndị a na-ekekọrịta ọkọlọtọ z-indexsite 0na 3.
• 0bụ ndabara (mbụ), 1bụ :hover, 2bụ :active/ .active, na ọ 3bụ :focus.
• Ụzọ a dabara na atụmanya anyị nke mkpa onye ọrụ kachasị elu. Ọ bụrụ na etinyere ihe mmewere, ọ dị na nlele yana nlebara onye ọrụ anya. Ihe ndị na-arụ ọrụ bụ nke abụọ kachasị elu n'ihi na ha na-egosi steeti. Hover bụ nke atọ kachasị elu n'ihi na ọ na-egosi ebumnobi onye ọrụ, mana ọ fọrọ nke nta ka ọ bụrụ ihe ọ bụla nwere ike ibugharị.

Ihe machie

Bootstrap gụnyere ọtụtụ ihe na-arụ ọrụ dị ka ihe mkpuchi n'ụdị ụfọdụ. Nke a na-agụnye, n'usoro nke kachasị elu z-index, mkpọda, navbars kwụ ọtọ na nke nnyapade, modal, ndụmọdụ ngwaọrụ, na popovers. Akụkụ ndị a nwere z-indexọnụ ọgụgụ nke ha na-amalite na 1000. Ahọpụtara ọnụọgụ mmalite a na aka aka ma na-eje ozi dị ka obere nchekwa n'etiti ụdị anyị na ụdị omenala nke ọrụ gị.

Akụkụ ihe mkpuchi nke ọ bụla na-abawanye z-indexuru ya ntakịrị n'ụzọ nke na ụkpụrụ UI na-enye ohere ka onye ọrụ lekwasịrị anya ma ọ bụ ihe na-ekpo ọkụ ka ọ dịgidere na-elele oge niile. Dịka ọmụmaatụ, modal bụ igbochi akwụkwọ (dịka ọmụmaatụ, ị nweghị ike ịme ihe ọ bụla ọzọ echekwabara maka ihe omume modal), yabụ anyị na-etinye nke ahụ n'elu navbars anyị.

Mụtakwuo maka nke a na z-indexibe nhazi anyị .

HTML na CSS karịa JS

Mgbe ọ bụla enwere ike, anyị na-ahọrọ ide HTML na CSS karịa Javascript. N'ozuzu, HTML na CSS na-aba ụba nke ukwuu na ịnweta ọtụtụ ndị nwere ọkwa ahụmahụ dị iche iche. HTML na CSS dịkwa ọsọ na ihe nchọgharị gị karịa Javascript, ihe nchọgharị gị na-enye gị nnukwu ọrụ.

Ụkpụrụ a bụ klaasị Javascript API anyị na-eji datanjirimara. Ịkwesighi ide ihe fọrọ nke nta ka ọ bụrụ Javascript ọ bụla iji jiri plugins Javascript anyị; kama, dee HTML. Gụkwuo maka nke a na ibe nyocha Javascript anyị .

N'ikpeazụ, ụdị anyị na-adabere n'àgwà ndị bụ isi nke ihe weebụ nkịtị. Mgbe ọ bụla enwere ike, anyị na-ahọrọ iji ihe nchọgharị na-enye. Dịka ọmụmaatụ, ị nwere ike itinye .btnklaasị na ihe fọrọ nke nta ka ọ bụrụ mmewere ọ bụla, mana ọtụtụ ihe anaghị enye uru ọ bụla gbasara semantic ma ọ bụ ọrụ nchọgharị. Ya mere, kama, anyị na-eji <button>s na <a>s.

Otu na-aga maka ihe mgbagwoju anya. Ọ bụ ezie na anyị nwere ike ide ngwa mgbakwunye nkwado ụdị nke anyị ka ịgbakwunye klaasị na mmewere nne na nna dabere na steeti ntinye, si otú ahụ na-enye anyị ohere ịke ederede na-acha uhie uhie, anyị na-ahọrọ iji :valid/ :invalidpseudo-elements ọ bụla nchọgharị na-enye anyị.

Ngwa ọrụ

Klas bara uru — ndị bụbu ndị inyeaka na Bootstrap 3—bụ ihe jikọrọ aka na ọgụ megide bloat CSS na arụmọrụ ibe adịghị mma. klaasị ịba uru bụ otu ọnụ ahịa akụrụngwa na-enweghị ike ịgbanwe dị ka klaasị (dịka ọmụmaatụ, .d-blockna-anọchi anya display: block;). Ihe kacha amasị ha bụ ọsọ iji mgbe ị na-ede HTML na ịmachi ọnụọgụ CSS omenala ị ga-ede.

Kpọmkwem gbasara CSS omenala, ụlọ ọrụ nwere ike inye aka ịlụ ọgụ na-abawanye nha faịlụ site na ibelata ụzọ abụọ bara uru ihe onwunwe gị na-emekarị ka ọ bụrụ otu klas. Nke a nwere ike inwe mmetụta dị egwu n'ọkwa na ọrụ gị.

HTML na-agbanwe agbanwe

Ọ bụ ezie na ọ bụghị mgbe niile ka ọ ga-ekwe omume, anyị na-agba mbọ ka anyị ghara ịdị na-ekwubiga okwu ókè na ihe HTML anyị chọrọ maka ihe mejupụtara ya. Ya mere, anyị na-elekwasị anya na otu klas na ndị na-ahọpụta CSS anyị ma gbalịa izere ndị na-ahọrọ ụmụaka ozugbo ( >). Nke a na-enye gị mgbanwe karịa na mmejuputa gị ma na-enyere aka mee ka CSS anyị dị mfe na obere nkọwa.

Usoro nkwekọrịta

Ntuziaka koodu (nke sitere na onye nrụpụta Bootstrap, @mdo) na-edepụta otu anyị si ede HTML na CSS n'ofe Bootstrap. Ọ na-akọwapụta ụkpụrụ nduzi maka nhazi n'ozuzu, mmejọ ọgụgụ isi, iwu ihe onwunwe na njirimara, na ndị ọzọ.

Anyị na-eji Stylelint mmanye ụkpụrụ ndị a yana ndị ọzọ na Sass/CSS anyị. Nhazi Stylelint omenala anyị bụ ebe mepere emepe ma dị maka ndị ọzọ iji na ịgbatị.

Anyị na-eji vnu-jar iji manye HTML ọkọlọtọ yana semantic, yana ịchọpụta mmejọ ndị a na-ahụkarị.