Kwan

Bere a nkratafa a wɔde fi ase no de nnianim nsɛm a ɛfa adwuma no ho ne nea ɛde ma no ma no, saa krataa yi twe adwene si nea enti a yɛyɛ nneɛma a yɛyɛ wɔ Bootstrap mu no so. Ɛkyerɛkyerɛ yɛn nyansapɛ mu kɔ ɔdansi wɔ wɛbsaet so sɛnea ɛbɛyɛ a afoforo betumi asua biribi afi yɛn hɔ, ne yɛn aboa, na aboa yɛn ma yɛatu mpɔn.

Woahu biribi a ɛnte sɛ nea ɛteɛ, anaasɛ ebia wobetumi ayɛ no yiye? Bue asɛm bi —yɛbɛpɛ sɛ yɛne wo susuw ho.

Tɔfabɔ

Yɛbɛkɔ eyinom mu biara mu kɛse wɔ ne nyinaa mu, nanso wɔ ɔfã a ɛkorɔn mu no, nea ɛkyerɛ yɛn kwan no kwan ni.

• Ɛsɛ sɛ nneɛma a ɛwom no yɛ nea ɛyɛ adwuma yiye na ɛyɛ nea edi kan wɔ telefon so
• Ɛsɛ sɛ wɔde base class na ɛkyekyere components na wɔtrɛw mu denam modifier classes so
• Ɛsɛ sɛ afã horow no di z-index nsenia a wɔtaa de di dwuma no so
• Bere biara a ɛbɛyɛ yiye no, pɛ HTML ne CSS dwumadie sen JavaScript
• Bere biara a ɛbɛyɛ yiye no, fa utilities di dwuma sen custom styles
• Bere biara a ɛbɛyɛ yiye no, kwati sɛ wobɛhyɛ HTML ahwehwɛde ahorow a emu yɛ den (mmofra a wɔpaw wɔn) .

Mmuae a wɔde ma

Wɔasi Bootstrap no mmuaeɛ akwan no sɛdeɛ ɛbɛyɛ a ɛbɛtumi ayɛ adwuma, ɔkwan a wɔtaa frɛ no mobile-first . Yɛde saa asɛmfua yi di dwuma wɔ yɛn docs mu na yɛpene so kɛse, nanso ɛtɔ da bi a ebetumi atrɛw dodo. Bere a ɛnyɛ ɔfã biara na ɛsɛ sɛ ɛyɛ mmuae koraa wɔ Bootstrap mu no, saa mmuae kwan yi fa CSS a wɔde hyɛ so a wɔbɛtew so denam pia a ɛbɛpia wo ma wode style ahorow aka ho bere a viewport no bɛyɛ kɛse no so.

Across Bootstrap, wobɛhunu yei pefee wɔ yɛn media nsɛmmisa mu. Mpɛn pii no, yɛde min-widthnsɛmmisa a efi ase di dwuma wɔ breakpoint pɔtee bi na ɛkɔ so fa breakpoints a ɛkorɔn no mu di dwuma. Sɛ nhwɛso no, a .d-nonefa ho fi min-width: 0kosi nea enni ano. Ɔkwan foforo so no, a .d-md-nonedi dwuma fi mfinimfini breakpoint ne soro.

Ɛtɔ mmere bi a yɛde bedi dwuma max-widthbere a component bi inherent complexity hwehwɛ sɛ ɛyɛ. Ɛtɔ da bi a, saa overrides yi yɛ adwuma ne adwene mu pefee sɛ wɔde bedi dwuma na wɔaboa sen sɛ yɛbɛsan akyerɛw core functionality afi yɛn components no mu. Yɛbɔ mmɔden sɛ yɛbɛto saa kwan yi ano hye, nanso yɛde bedi dwuma bere ne bere mu.

Adesua ahorow

Sɛ yɛde yɛn Reboot, cross-browser normalization stylesheet to nkyɛn a, yɛn styles nyinaa botae ne sɛ yɛde classes bedi dwuma sɛ selectors. Eyi kyerɛ sɛ wobɛtwe wo ho afi type selectors (sɛ nhwɛso no, input[type="text"]) ne extraneous parent classes (sɛ nhwɛso no, .parent .child) a ɛma style ahorow no yɛ pɔtee dodo sɛ ɛbɛyɛ mmerɛw sɛ wobebu so no ho.

Sɛnea ɛte no, ɛsɛ sɛ wɔkyekye afã horow no a ɛwɔ nnyinaso adesuakuw a ɛwɔ agyapade-botae abien a wɔtaa de di dwuma, a ɛnsɛ sɛ wɔhyɛ so. Sɛ nhwɛso no, .btnne .btn-primary. Yɛde di dwuma .btnma ntade a wɔtaa de di dwuma nyinaa te sɛ display, padding, ne border-width. Afei yɛde modifiers te sɛ .btn-primarysɛ yɛde kɔla, akyi-kɔla, border-kɔla, ne nea ɛkeka ho bɛka ho di dwuma.

Ɛsɛ sɛ wɔde Modifier classes di dwuma bere a agyapade anaa botae ahorow pii wɔ hɔ a ɛsɛ sɛ wɔsesa wɔ variants ahorow pii so nkutoo. Ɛnyɛ bere nyinaa na ɛho hia sɛ wosakra nneɛma, enti hwɛ hu sɛ worekora koodu nkyerɛwde ahorow so ankasa na woresiw nsɛm a ɛho nhia a wɔde bɛto so no ano bere a woreyɛ no. Nhwɛsoɔ pa a ɛfa modifiers ho ne yɛn theme color classes ne size variants.

z-index nsenia ahorow

Nsusuwii abien na z-indexɛwɔ Bootstrap mu—nneɛma a ɛwɔ ade bi mu ne afã horow a wɔde kata so.

Nneɛma a ɛka bom yɛ adwuma

• Wɔde nneɛma a ɛka bom na ɛkyekye afã horow bi wɔ Bootstrap mu de siw ahye abien ano a wɔrensakra borderagyapade no. Sɛ nhwɛso no, button akuw, input akuw, ne nkratafa.
• Saa nneɛma yi kyɛ gyinapɛn z-indexnsenia a 0ɛfa 3.
• 0yɛ default (mfiase), 1ɛyɛ :hover, 2yɛ :active/ .active, na 3ɛyɛ :focus.
• Saa kwan yi ne yɛn akwanhwɛ a ɛfa nea ɔde di dwuma a ɛkorɔn sen biara ho no hyia. Sɛ element bi twe adwene si so a, ɛwɔ adwene mu na ɛwɔ nea ɔde di dwuma no adwene mu. Active elements yɛ nea ɛto so abien a ɛkorɔn sen biara efisɛ ɛkyerɛ tebea. Hover yɛ nea ɛto so abiɛsa a ɛkorɔn sen biara efisɛ ɛkyerɛ sɛ ɔdefo no abɔ ne tirim, nanso ɛkame ayɛ sɛ wobetumi de biribiara ahyɛ mu.

Fa nneɛma a ɛwom no kata so

Bootstrap no wɔ nneɛma pii a ɛyɛ adwuma sɛ overlay a ɛyɛ ɔkwan bi so. Eyi ka ho, sɛnea ɛkɔ soro sen biara z-indexno , dropdowns, fixed ne sticky navbars, modals, tooltips, ne popovers. Saa nneɛma yi wɔ wɔn ankasa z-indexnsenia a efi ase wɔ 1000. Wɔpaw saa nɔma a wɔde fi ase yi wɔ ɔkwan a wɔpɛ so na ɛyɛ buffer ketewaa bi wɔ yɛn ntadehyɛ ne wo dwumadi no amanne kwan ahorow ntam.

Overlay component biara ma ne z-indexbo kɔ soro kakra wɔ ɔkwan bi so a UI nnyinasosɛm ahorow a wɔtaa de di dwuma no ma kwan ma elements a wɔde wɔn adwene si so anaasɛ wɔde wɔn ho to so no kɔ so tra hɔ bere nyinaa. Sɛ nhwɛsoɔ no, modal yɛ document blocking (sɛ nhwɛsoɔ no, worentumi nyɛ adeyɛ foforɔ biara gye sɛ modal no adeyɛ), enti yɛde saa no to yɛn navbars no atifi.

Sua eyi ho nsɛm pii wɔ yɛn z-indexnhyehyɛe kratafa no so .

HTML ne CSS wɔ JS so

Bere biara a ɛbɛyɛ yiye no, yɛpɛ sɛ yɛkyerɛw HTML ne CSS sen JavaScript. Mpɛn pii no, HTML ne CSS yɛ nea ɛdɔɔso na nnipa pii a wɔwɔ osuahu ahorow nyinaa betumi anya bi. HTML ne CSS nso yɛ ntɛmntɛm wɔ wo browser no mu sen JavaScript, na mpɛn pii no wo browser no ma wo yɛ adwuma kɛse.

Saa nnyinasosɛm yi yɛ yɛn JavaScript API a edi kan a yɛde datasu ahorow di dwuma. Ɛkame ayɛ sɛ ɛho nhia sɛ wobɛkyerɛw JavaScript biara ansa na wode yɛn JavaScript plugins no adi dwuma; mmom no, kyerɛw HTML. Kenkan eyi ho nsɛm pii wɔ yɛn JavaScript nsusuwii kratafa no so .

Nea etwa to no, yɛn styles no gyina suban atitiriw a ɛwɔ wɛb nneɛma a wɔtaa de di dwuma no so. Bere biara a ɛbɛyɛ yiye no, yɛpɛ sɛ yɛde nea browser no de ma no di dwuma. Sɛ nhwɛso no, ɛkame ayɛ sɛ wubetumi de .btnadesua bi ahyɛ element biara so, nanso element dodow no ara mma semantic value anaa browser dwumadi biara. Enti mmom, yɛde <button>s ne <a>s na edi dwuma.

Saa ara na ɛte wɔ nneɛma a ɛwom a ɛyɛ den kɛse no ho. Bere a yebetumi akyerɛw yɛn ankasa form validation plugin de adesua ahorow aka ɔwofo element bi ho a egyina input bi tebea so, na ɛnam so ama yɛatumi ayɛ nkyerɛwee no style ka sɛ kɔkɔɔ no, yɛpɛ sɛ yɛde :valid/ :invalidpseudo-elements a browser biara de ma yɛn no bedi dwuma.

Nneɛma a wɔde di dwuma

Utility adesua ahorow —kan no na wɔyɛ aboafo wɔ Bootstrap 3 mu —yɛ ɔyɔnko a ɔwɔ tumi wɔ CSS bloat ne krataafa no adwumayɛ a enye a wɔko tia mu. Mfaso adesuakuw taa yɛ agyapade-botae abien a entumi nsakra a wɔda no adi sɛ adesuakuw (sɛ nhwɛso no, .d-blockegyina hɔ ma display: block;). Nea ɛyɛ anigye titiriw ne sɛ wode bedi dwuma ntɛmntɛm bere a worekyerɛw HTML no na woato CSS dodow a ɛsɛ sɛ wokyerɛw no ano hye.

Titiriw ɛfa custom CSS ho no, utilities betumi aboa ma wɔako atia fael kɛse a ɛrekɔ soro denam wo agyapade-botae abien a wotaa san yɛ no a wobɛtew so ayɛ no adesuakuw biako no so. Eyi betumi anya nkɛntɛnso kɛse wɔ kɛseyɛ mu wɔ wo nnwuma ahorow mu.

HTML a ɛyɛ mmerɛw

Bere a ɛnyɛ bere nyinaa na ɛbɛyɛ yiye no, yɛbɔ mmɔden sɛ yɛbɛkwati sɛ yɛbɛyɛ gyidikasɛm dodo wɔ yɛn HTML ahwehwɛde ahorow a ɛfa nneɛma a ɛwom ho no mu. Enti, yɛde yɛn adwene si adesuakuw biako so wɔ yɛn CSS selectors mu na yɛbɔ mmɔden sɛ yɛbɛkwati mmofra selectors ntɛm ara ( >). Wei ma wo kwan pii wɔ wo dwumadie mu na ɛboa ma yɛn CSS no yɛ mmerɛ na ɛnyɛ pɔtee.

Mmara nhyiam ahorow

Code Guide (a efi Bootstrap co-creator, @mdo) kyerɛw sɛnea yɛkyerɛw yɛn HTML ne CSS wɔ Bootstrap no nyinaa so. Ɛkyerɛ akwankyerɛ a ɛfa general formatting, common sense defaults, agyapade ne attribute nhyehyɛe, ne nea ɛkeka ho.

Yɛde Stylelint di dwuma de hyɛ saa gyinapɛn ahorow yi ne nea ɛkeka ho wɔ yɛn Sass/CSS no mu. Yɛn custom Stylelint config no yɛ open source na ɛwɔ hɔ ma afoforo sɛ wɔde bedi dwuma na wɔatrɛw mu.

Yɛde vnu-jar di dwuma de hyɛ HTML a ɛyɛ gyinapɛn ne nkyerɛase mu den, ne mfomso a ɛtaa ba a yehu.