Mit

Pan ɔl we di pej dɛn we de sho aw fɔ bigin di prɔjek de gi wan introdukshɔn tour fɔ di prɔjek ɛn wetin i de gi, dis dɔkyumɛnt de tɔk mɔ bɔt wetin mek wi de du di tin dɛn we wi de du na Bootstrap. I de ɛksplen wi filɔsofi fɔ bil na di wɛb so dat ɔda pipul dɛn go lan frɔm wi, kɔntribyut wit wi, ɛn ɛp wi fɔ impɔtant.

Si sɔntin we nɔ de sawnd rayt, ɔ sɔntɛm dɛn go ebul fɔ du am bɛtɛ? Opin wan isyu —wi go lɛk fɔ tɔk bɔt am wit yu.

Ɛksplen

Wi go dayv insay ɛni wan pan dɛn wan ya mɔ ɔlsay, bɔt na ay levul, na dis de gayd wi we fɔ du tin.

• Komponent dɛn fɔ bi responsiv ɛn mobayl-fɔs
• Komponent dɛn fɔ bil wit wan bays klas ɛn ɛkstɛnd via modifya klas dɛn
• Komponent stet dɛn fɔ obe wan kɔmɔn z-indeks skel
• Ɛnitɛm we i pɔsibul, lɛk fɔ yuz HTML ɛn CSS implimɛnt pas JavaSkript
• Ɛnitɛm we i pɔsibul, yuz yutiliti dɛn pas kɔstɔm stayl dɛn
• Ɛnitɛm we i pɔsibul, nɔ mek dɛn fala di strikt HTML rikwaymɛnt dɛn (pikin dɛn we de pik pikin dɛn) .

Fɔ ansa

Bootstrap in rispɔnsiv stayl dɛn bil fɔ bi rispɔnsiv, wan we we dɛn kin kɔl bɔku tɛm mobayl-fɔs . Wi de yuz dis wɔd na wi doks ɛn wi kin gri wit am bɔku wan, bɔt sɔntɛnde i kin tu brayt. Pan ɔl we nɔto ɔl kɔmpɔnɛnt fɔ rispɔns ɔlsay na Bootstrap, dis rispɔnsiv we fɔ du tin na fɔ ridyus CSS ɔvarayd dɛn bay we i de push yu fɔ ad stayl dɛn as di viupɔt de big.

Across Bootstrap, yu go si dis klia wan na wi midia kweshon dem. Bɔku tɛm, wi kin yuz min-widthkwɛstyɔn dɛn we kin bigin fɔ aplay na wan patikyula brek pɔynt ɛn kɛr go ɔp tru di ay brek pɔynt dɛn. Fɔ ɛgzampul, a .d-nonede aplay frɔm min-width: 0to infiniti. Na di ɔda say, a .d-md-nonede aplay frɔm di midul brekpɔynt ɛn ɔp.

Sɔntɛnde wi go yuz max-widthwe wan kɔmpɔnɛnt in inhɛrɛnt kɔmplisiti nid am. Sɔntɛnde, dɛn ɔvarayd ya kin wok ɛn mental klia fɔ impruv ɛn sɔpɔt pas fɔ rayt bak di kɔr funkshɔnaliti frɔm wi kɔmpɔnɛnt dɛn. Wi de tray fɔ stɔp dis we fɔ du tin, bɔt wi go yuz am wan wan tɛm.

Klas dɛn

Apat frɔm wi Ribɔt, we na wan krɔs-brawza nɔmalizeshɔn staylshit, ɔl wi stayl dɛn aim fɔ yuz klas dɛn as sɛlɛktɔ. Dis min se yu fɔ stiar klia pan di tayp sɛlɛktɔ dɛn (ɛgz., input[type="text"]) ɛn ɛkstra mama ɛn papa klas dɛn (ɛgz., .parent .child) we de mek stayl dɛn tu spɛshal fɔ mek dɛn ebul fɔ ɔvalayz izi wan.

As a so, kɔmpɔnɛnt dɛn fɔ bil wit wan bays klas we gɛt kɔmɔn, nɔ fɔ ɔvarayd prɔpati-valyu pe dɛn. Fɔ ɛgzampul, .btnɛn .btn-primary. Wi de yuz .btnfɔ ɔl di kɔmɔn stayl dɛn lɛk display, padding, ɛn border-width. Dɔn wi kin yuz modifya dɛn lɛk .btn-primaryfɔ ad di kɔlɔ, bakgrɔn-kɔlɔ, bɔda-kɔlɔ, ɛn ɔda tin dɛn.

Modifaya klas dɛn fɔ jɔs yuz we bɔku prɔpati ɔ valyu dɛn de fɔ chenj akɔdin to bɔku vayriɔnt dɛn. Modifaya dɛn nɔ kin nid ɔltɛm, so mek shɔ se yu rili de sev layn dɛn fɔ kɔd ɛn mek dɛn nɔ ɔvalayz dɛn we nɔ nid we yu de mek dɛn. Gud ɛgzampul dɛn fɔ modifya dɛn na wi tim kɔlɔ klas dɛn ɛn saiz difrɛns dɛn.

z-indeks skel dɛn

Tu z-indexskel dɛn de na Bootstrap—ɛlimɛnt dɛn insay wan kɔmpɔnɛnt ɛn ɔvlay kɔmpɔnɛnt dɛn.

Komponent elemɛnt dɛn

• Sɔm kɔmpɔnɛnt dɛn na Bootstrap dɛn bil wit ɔvalap ɛlimɛnt dɛn fɔ mek dɛn nɔ gɛt dɛbul bɔda dɛn we nɔ chenj di borderprɔpati. Fɔ ɛgzampul, bɔtin grup dɛn, input grup dɛn, ɛn pej dɛn.
• Dis komponent dεm de sheb wan standad z-indexskel fכ 0tru 3.
• 0na difɔlt (initial), 1na :hover, 2na :active/ .active, ɛn 3na :focus.
• Dis we fɔ du tin de mach di tin dɛn we wi de op fɔ fɔ di wan dɛn we de yuz am fɔs. If wan ɛlimɛnt de fɔs, i de na di say we dɛn de si am ɛn na di pɔsin we de yuz am in atɛnshɔn. Aktiv ɛlimɛnt dɛn na sɛkɔn ay wan bikɔs dɛn de sho stet. Hover na di tɔd ay wan bikɔs i de sho se di pɔsin want fɔ yuz am, bɔt dɛn kin hova klos to ɛnitin .

Di kɔmpɔnɛnt dɛn we de ɔvalayz

Bootstrap inklud sɔm komponent dɛn we de wok as ɔvlay fɔ sɔm kayn. Dis inklud, in oda of highest z-index, dropdowns, fiks ɛn stika navbar, modals, tultips, ɛn popovers. Dɛn kɔmpɔnɛnt ya gɛt dɛn yon z-indexskel we de bigin na 1000. Dis statin nɔmba bin pik wan bay wan ɛn i de wok as smɔl bafa bitwin wi stayl dɛn ɛn yu prɔjek in kɔstɔm stayl dɛn.

Ɛni ɔvlay kɔmpɔnɛnt de inkrisayz in z-indexvalyu smɔl insay wan we we kɔmɔn UI prinsipul dɛn de alaw yuz fɔs ɔ hova ɛlimɛnt dɛn fɔ de na di vishɔn ɔltɛm. Fɔ ɛgzampul, wan modal na fɔ blok dɔkyumɛnt (ɛgz., yu nɔ go ebul fɔ tek ɛni ɔda akshɔn sev fɔ di modal in akshɔn), so wi put dat ɔp wi navbar dɛn.

Lan mɔ bɔt dis na wi z-indexlayout pej .

HTML ɛn CSS oba JS

Ɛnitɛm we i pɔsibul, wi kin lɛk fɔ rayt HTML ɛn CSS pas JavaSkript. In jɔnal, HTML ɛn CSS na mɔ prolific ɛn aksesbul fɔ mɔ pipul dɛn we gɛt ɔl difrɛn ɛkspiriɛns lɛvɛl dɛn. HTML ɛn CSS sɛf de fast na yu brɔwza pas JavaSkript, ɛn yu brɔwza jɔs de gi yu bɔku tin dɛn fɔ du.

Dis prinsipul na wi fɔs klas JavaSkript API we de yuz dataatribyut dɛn. Yu nɔ nid fɔ rayt nia ɛni JavaSkript fɔ yuz wi JavaSkript plɔgin dɛn; bifo dat, rayt HTML. Rid mɔ bɔt dis na wi JavaSkript ɔvaviu pej .

Las las, wi stayl dɛn bil pan di fawndeshɔnal bihayvya dɛn fɔ kɔmɔn wɛb ɛlimɛnt dɛn. Ɛnitɛm we i pɔsibul, wi kin lɛk fɔ yuz wetin di brɔwza de gi wi. Fɔ ɛgzampul, yu kin put .btnklas pan klos to ɛni ɛlimɛnt, bɔt bɔku pan di ɛlimɛnt dɛn nɔ de gi ɛni sɛmantik valyu ɔ brɔwza wok. So bifo dat, wi de yuz <button>s ɛn <a>s.

Na di sem tin kin apin to di kɔmpɔnɛnt dɛn we rili kɔmpleks. Pan ɔl we wi kin rayt wi yon fɔm validɛshɔn plɔgin fɔ ad klas dɛn to wan mama ɛn papa ɛlimɛnt bays pan wan input in stet, so dat wi go alaw wi fɔ stayl di tɛks se rɛd, wi kin lɛk fɔ yuz di :valid/ :invalidpseudo-ɛlimɛnt dɛn we ɛvri brawza de gi wi.

Yutiliti dɛn

Yutiliti klas dɛm—we bin de ɛp fɔs na Bootstrap 3—na pawaful padi fɔ fɛt CSS bloat ɛn di bad pej pefɔmɛns. Wan yutiliti klas na tipikli wan singl, immutable prɔpati-valyu pe we dɛn ɛksprɛs as wan klas (ɛgz., .d-blockripresent display: block;). Di men tin we kin mek dɛn apil na fɔ yuz am kwik kwik wan we yu de rayt HTML ɛn fɔ stɔp di kɔstɔm CSS we yu fɔ rayt.

Speshali bɔt kɔstɔm CSS, yutiliti dɛn kin ɛp fɔ fɛt di fayl saiz we de go ɔp bay we dɛn de ridyus yu prɔpati-valyu pe dɛn we yu kin ripit mɔs to wan klas dɛn. Dis kin gɛt dramatik ifɛkt pan skel na yu prɔjek dɛm.

HTML we de chenj chenj

Pan ɔl we i nɔ pɔsibul ɔltɛm, wi de tray fɔ avɔyd fɔ bi ɔva dogmatik insay wi HTML rikwaymɛnt fɔ kɔmpɔnɛnt dɛn. So, wi de pe atɛnshɔn pan wan klas dɛn na wi CSS sɛlɛktɔ dɛn ɛn tray fɔ avɔyd pikin dɛn sɛlɛktɔ dɛn wantɛm wantɛm ( >). Dis de gi yu mɔ fleksibiliti fɔ yu implimɛnt ɛn ɛp fɔ mek wi CSS simpul ɛn nɔ spɛshal.

Kɔd kɔnvɛnshɔn dɛn

Kɔd Gayd (frɔm Bootstrap kɔ-krieta, @mdo) de dɔkyumɛnt aw wi de rayt wi HTML ɛn CSS akɔdin to Bootstrap. I de sho gaydlayn fɔ jenɛral fɔmat, kɔmɔn sɛns difɔlt, prɔpati ɛn atribyut ɔda, ɛn ɔda tin dɛn.

Wi de yuz Stylelint fɔ mek dɛn du wetin dɛn standad ya ɛn mɔ na wi Sass/CSS. Wi kɔstɔm Stylelint kɔnfig na opin sɔs ɛn i de fɔ ɔda pipul dɛn fɔ yuz ɛn ɛkstɛnd.

Wi de yuz vnu-jar fɔ ɛnfɔs standad ɛn sɛmantik HTML, ɛn bak fɔ detekt kɔmɔn mistek dɛn.