Ona

Lakoko ti awọn oju-iwe ti o bẹrẹ n pese irin-ajo ifarahan ti iṣẹ akanṣe ati ohun ti o funni, iwe-ipamọ yii dojukọ idi ti a ṣe awọn ohun ti a ṣe ni Bootstrap. Ó ń ṣàlàyé ìmọ̀ ọgbọ́n orí wa láti kọ́ sórí Íńtánẹ́ẹ̀tì kí àwọn ẹlòmíràn lè kẹ́kọ̀ọ́ lọ́dọ̀ wa, kí wọ́n ṣe ìrànlọ́wọ́ pẹ̀lú wa, kí wọ́n sì ràn wá lọ́wọ́ láti ṣàtúnṣe.

Wo ohun kan ti ko dun, tabi boya o le ṣe dara julọ? Ṣii ọrọ kan — a yoo nifẹ lati jiroro rẹ pẹlu rẹ.

Lakotan

A yoo besomi sinu ọkọọkan awọn wọnyi diẹ sii jakejado, ṣugbọn ni ipele giga, eyi ni kini itọsọna ọna wa.

• Awọn paati yẹ ki o jẹ idahun ati alagbeka-akọkọ
• Awọn paati yẹ ki o kọ pẹlu kilasi ipilẹ ati faagun nipasẹ awọn kilasi modifier
• Awọn ipinlẹ paati yẹ ki o gbọràn si iwọn z-index ti o wọpọ
• Nigbakugba ti o ṣee ṣe, fẹran imuse HTML ati CSS ju JavaScript lọ
• Nigbakugba ti o ṣee ṣe, lo awọn ohun elo lori awọn aṣa aṣa
• Nigbakugba ti o ba ṣeeṣe, yago fun imuse awọn ibeere HTML ti o muna (awọn yiyan awọn ọmọde)

Idahun

Awọn ara idahun Bootstrap jẹ itumọ lati jẹ idahun, ọna ti a tọka si nigbagbogbo bi alagbeka-akọkọ . A lo ọrọ yii ninu awọn iwe aṣẹ wa ati pe o gba pẹlu rẹ pupọ, ṣugbọn ni awọn igba o le gbooro pupọ. Lakoko ti kii ṣe gbogbo paati gbọdọ jẹ idahun ni kikun ni Bootstrap, ọna idahun yii jẹ nipa idinku awọn ipalọlọ CSS nipa titari ọ lati ṣafikun awọn aza bi wiwo wiwo ti di nla.

Kọja Bootstrap, iwọ yoo rii eyi ni gbangba julọ ninu awọn ibeere media wa. Ni ọpọlọpọ igba, a lo awọn min-widthibeere ti o bẹrẹ lati lo ni aaye fifọ kan pato ati gbe soke nipasẹ awọn aaye fifọ giga. Fun apẹẹrẹ, kan .d-nonekan lati min-width: 0si ailopin. Lori awọn miiran ọwọ, a .d-md-nonekan lati alabọde breakpoint ati si oke.

Ni awọn igba a yoo lo max-widthnigbati idiju atorunwa paati kan nilo rẹ. Ni awọn igba miiran, awọn ifagile wọnyi jẹ iṣẹ ṣiṣe ati mimọ ni ọpọlọ lati ṣe ati atilẹyin ju iṣẹ ṣiṣe ipilẹ kọ lati awọn paati wa. A tiraka lati se idinwo yi ona, sugbon yoo lo o lati akoko si akoko.

Awọn kilasi

Yato si Atunbere wa, iwe aṣa aṣawakiri aṣawakiri kan, gbogbo awọn aṣa wa ni ifọkansi lati lo awọn kilasi bi awọn yiyan. Eyi tumọ si idari ko kuro ninu awọn yiyan iru (fun apẹẹrẹ, input[type="text"]) ati awọn kilasi obi ti o yatọ (fun apẹẹrẹ, .parent .child) ti o jẹ ki awọn aza ni pato pupọ lati danu ni irọrun.

Bii iru bẹẹ, awọn paati yẹ ki o kọ pẹlu kilasi ipilẹ ti o jẹ ile ti o wọpọ, awọn orisii iye-ini ohun-ini ti kii ṣe-lati bori. Fun apẹẹrẹ, .btnati .btn-primary. A lo .btnfun gbogbo awọn aṣa ti o wọpọ bii display, padding, ati border-width. Lẹhinna a lo awọn iyipada bii .btn-primarylati ṣafikun awọ, awọ abẹlẹ, awọ aala, ati bẹbẹ lọ.

Awọn kilasi iyipada yẹ ki o lo nikan nigbati awọn ohun-ini pupọ wa tabi awọn iye lati yipada kọja awọn iyatọ pupọ. Awọn oluyipada kii ṣe pataki nigbagbogbo, nitorinaa rii daju pe o n fipamọ awọn laini koodu gangan ati idilọwọ awọn ipadasẹhin ti ko wulo nigbati o ṣẹda wọn. Awọn apẹẹrẹ ti o dara ti awọn iyipada jẹ awọn kilasi awọ akori ati awọn iyatọ iwọn.

z-index irẹjẹ

Awọn z-indexirẹjẹ meji wa ni Bootstrap-awọn eroja laarin paati kan ati awọn paati apọju.

Awọn eroja eroja

• Diẹ ninu awọn paati ni Bootstrap ti wa ni itumọ pẹlu awọn eroja agbekọja lati ṣe idiwọ awọn aala meji laisi iyipada ohun- borderini naa. Fun apẹẹrẹ, awọn ẹgbẹ bọtini, awọn ẹgbẹ titẹ sii, ati pagination.
• Awọn paati wọnyi pin iwọnwọn z-indexboṣewa 0nipasẹ 3.
• 0jẹ aiyipada (ipilẹṣẹ), 1jẹ :hover, 2jẹ :active/ .active, o si 3jẹ :focus.
• Ọna yii baamu awọn ireti wa ti pataki olumulo ti o ga julọ. Ti ohun kan ba ni idojukọ, o wa ni wiwo ati ni akiyesi olumulo. Awọn eroja ti nṣiṣe lọwọ jẹ keji ti o ga julọ nitori wọn tọka ipo. Rababa jẹ kẹta ti o ga julọ nitori pe o tọkasi ero olumulo, ṣugbọn o fẹrẹ to ohunkohun ti o le gbe.

Apoju irinše

Bootstrap pẹlu ọpọlọpọ awọn paati ti o ṣiṣẹ bi agbekọja ti iru kan. Eyi pẹlu, ni aṣẹ ti o ga julọ z-index, awọn silẹ, ti o wa titi ati awọn navbars alalepo, awọn awoṣe, awọn imọran irinṣẹ, ati awọn agbejade. Awọn paati wọnyi ni iwọn tiwọn z-indexti o bẹrẹ ni 1000. Nọmba ibẹrẹ yii ni a yan lainidii ati ṣiṣẹ bi ifipamọ kekere laarin awọn aza wa ati awọn aṣa aṣa iṣẹ akanṣe rẹ.

Apakan agbekọja kọọkan mu z-indexiye rẹ pọ si diẹ ni iru ọna ti awọn ipilẹ UI ti o wọpọ jẹ ki idojukọ olumulo tabi awọn eroja gbigbe lati wa ni wiwo ni gbogbo igba. Fun apẹẹrẹ, modal jẹ idinamọ iwe (fun apẹẹrẹ, o ko le ṣe igbasilẹ eyikeyi iṣe miiran fun iṣe modal), nitorinaa a fi iyẹn si oke awọn navbars wa.

Kọ ẹkọ diẹ sii nipa eyi ni z-indexoju-iwe iṣeto wa .

HTML ati CSS lori JS

Nigbakugba ti o ba ṣeeṣe, a fẹ lati kọ HTML ati CSS lori JavaScript. Ni gbogbogbo, HTML ati CSS jẹ ilọsiwaju diẹ sii ati wiwọle si awọn eniyan diẹ sii ti gbogbo awọn ipele iriri oriṣiriṣi. HTML ati CSS tun yara ni ẹrọ aṣawakiri rẹ ju JavaScript lọ, ati pe aṣawakiri rẹ ni gbogbogbo pese iṣẹ ṣiṣe pupọ fun ọ.

Ilana yii jẹ JavaScript ti kilasi akọkọ wa ni lilo dataawọn abuda. O ko nilo lati kọ fere eyikeyi JavaScript lati lo awọn afikun JavaScript wa; dipo, kọ HTML. Ka diẹ sii nipa eyi ni oju-iwe Akopọ JavaScript wa .

Nikẹhin, awọn aza wa kọ lori awọn ihuwasi ipilẹ ti awọn eroja wẹẹbu ti o wọpọ. Nigbakugba ti o ba ṣeeṣe, a fẹ lati lo ohun ti ẹrọ aṣawakiri n pese. Fun apẹẹrẹ, o le fi .btnkilaasi sori fere eyikeyi eroja, ṣugbọn ọpọlọpọ awọn eroja ko pese iye atunmọ tabi iṣẹ aṣawakiri. Nitorinaa dipo, a lo <button>s ati <a>s.

Kanna n lọ fun eka sii irinše. Lakoko ti a le kọ ohun itanna afọwọsi fọọmu tiwa lati ṣafikun awọn kilasi si ipin obi kan ti o da lori ipo titẹ sii, nitorinaa gbigba wa laaye lati ṣe ara ọrọ ti o sọ pupa, a fẹran lilo awọn :valid/ :invalidpseudo-eroja gbogbo aṣawakiri n pese wa.

Awọn ohun elo

Awọn kilasi IwUlO — awọn oluranlọwọ tẹlẹ ni Bootstrap 3 — jẹ alabaṣepọ ti o lagbara lati koju bloat CSS ati iṣẹ oju-iwe ti ko dara. Kilasi IwUlO kan jẹ igbagbogbo ẹyọkan, isọpọ iye ohun-ini aile yipada ti a fihan bi kilasi kan (fun apẹẹrẹ, .d-blockawọn aṣoju display: block;). Ipelọ akọkọ wọn jẹ iyara ti lilo lakoko kikọ HTML ati diwọn iye CSS aṣa ti o ni lati kọ.

Ni pataki nipa CSS aṣa, awọn ohun elo le ṣe iranlọwọ lati koju iwọn faili ti o pọ si nipa idinku awọn orisii iye ohun-ini ti o wọpọ julọ si awọn kilasi ẹyọkan. Eyi le ni ipa iyalẹnu ni iwọn ninu awọn iṣẹ akanṣe rẹ.

HTML rọ

Lakoko ti ko ṣee ṣe nigbagbogbo, a ngbiyanju lati yago fun jijẹ dogmatic ni awọn ibeere HTML wa fun awọn paati. Nitorinaa, a fojusi awọn kilasi ẹyọkan ninu awọn yiyan CSS wa ati gbiyanju lati yago fun awọn yiyan ọmọ lẹsẹkẹsẹ ( >). Eyi yoo fun ọ ni irọrun diẹ sii ninu imuse rẹ ati iranlọwọ jẹ ki CSS wa rọrun ati ki o kere si pato.

Awọn apejọ koodu

Itọsọna koodu (lati ọdọ Ẹlẹda Bootstrap, @mdo) ṣe akosile bi a ṣe kọ HTML ati CSS wa kọja Bootstrap. O ṣe apejuwe awọn itọnisọna fun tito kika gbogbogbo, awọn aiyipada ori ti o wọpọ, ohun-ini ati awọn aṣẹ ikasi, ati diẹ sii.

A lo Stylelint lati fi ipa mu awọn iṣedede wọnyi ati diẹ sii ninu Sass/CSS wa. Iṣeto Stylelint aṣa wa jẹ orisun ṣiṣi ati wa fun awọn miiran lati lo ati faagun.

A nlo vnu-jar lati fi ipa mu HTML boṣewa ati itumọ, bakannaa wiwa awọn aṣiṣe ti o wọpọ.