Apwòch

Pandan ke paj pou kòmanse yo bay yon vizit entwodiksyon nan pwojè a ak sa li ofri, dokiman sa a konsantre sou poukisa nou fè bagay sa yo nou fè nan Bootstrap. Li eksplike filozofi nou pou konstwi sou entènèt la pou lòt moun ka aprann nan men nou, kontribye avèk nou, epi ede nou amelyore.

Wè yon bagay ki pa son byen, oswa petèt ka fè pi byen? Louvri yon pwoblèm — nou ta renmen diskite sou li avèk ou.

Rezime

Nou pral plonje nan chak nan sa yo plis nan tout, men nan yon nivo segondè, men sa ki gide apwòch nou an.

• Eleman yo ta dwe reponn ak mobil-premye
• Konpozan yo ta dwe bati ak yon klas de baz ak pwolonje atravè klas modifye
• Eta eleman yo ta dwe obeyi yon echèl z-endèks komen
• Chak fwa sa posib, pito yon aplikasyon HTML ak CSS pase JavaScript
• Chak fwa sa posib, sèvi ak sèvis piblik sou estil koutim
• Chak fwa sa posib, evite fè respekte kondisyon HTML strik (seleksyon timoun)

Reponn

Estil reponn Bootstrap yo bati pou yo reponn, yon apwòch ki souvan refere yo kòm mobil-premye . Nou itilize tèm sa a nan dokiman nou yo ak lajman dakò ak li, men pafwa li ka twò laj. Pandan ke se pa tout eleman ki dwe totalman reponn nan Bootstrap, apwòch sa a reponn se sou diminye CSS overrides pa pouse ou ajoute estil kòm vi a ap vin pi gwo.

Atravè Bootstrap, ou pral wè sa pi klè nan demann medya nou yo. Nan pifò ka yo, nou itilize min-widthdemann ki kòmanse aplike nan yon breakpoint espesifik epi pote moute nan pi wo pwen breakpoint yo. Pou egzanp, yon .d-noneaplike soti min-width: 0nan a enfini. Nan lòt men an, yon .d-md-noneaplike soti nan breakpoint nan mwayen ak moute.

Pafwa nou pral itilize max-widthlè konpleksite nannan yon eleman mande pou li. Pafwa, ranvwa sa yo pi klè fonksyonèl ak mantalman pou aplike ak sipòte pase reekri fonksyonalite debaz nan eleman nou yo. Nou fè efò pou limite apwòch sa a, men nou pral sèvi ak li de tan zan tan.

Klas

Akote de rdemare nou an, yon fèy style nòmalizasyon kwa-navigatè, tout estil nou yo vize sèvi ak klas kòm seleksyon. Sa vle di evite seleksyon kalite yo (egzanp, input[type="text"]) ak klas paran ki pa etranje (egzanp, .parent .child) ki fè estil yo twò espesifik pou fasilman pase sou plas.

Kòm sa yo, konpozan yo ta dwe bati ak yon klas debaz ki kay komen, pa-yo dwe pase sou tèt pè pwopriyete-valè. Pou egzanp, .btnak .btn-primary. Nou itilize .btnpou tout estil komen tankou display, padding, ak border-width. Lè sa a, nou itilize modifye tankou .btn-primaryajoute koulè a, background-koulè, fwontyè-koulè, elatriye.

Klas modifye yo ta dwe itilize sèlman lè gen plizyè pwopriyete oswa valè yo dwe chanje atravè plizyè varyant. Moditè yo pa toujou nesesè, kidonk asire w ke ou aktyèlman sove liy kòd yo epi anpeche ranvwa ki pa nesesè lè w ap kreye yo. Bon egzanp modifikatè yo se klas koulè tèm ak varyant gwosè nou yo.

echèl z-endèks

Gen de z-indexechèl nan Bootstrap—eleman nan yon eleman ak konpozan kouvri.

Eleman eleman yo

• Gen kèk eleman nan Bootstrap yo bati ak eleman sipèpoze pou anpeche fwontyè doub san yo pa modifye borderpwopriyete a. Pou egzanp, gwoup bouton, gwoup opinyon, ak paginasyon.
• Konpozan sa yo pataje yon z-indexechèl estanda 0nan 3.
• 0se default (inisyal), 1se :hover, 2se :active/ .active, epi li 3se :focus.
• Apwòch sa a matche ak atant nou yo nan pi gwo priyorite itilizatè. Si yon eleman konsantre, li nan vi ak nan atansyon itilizatè a. Eleman aktif yo dezyèm pi wo paske yo endike eta. Hover se twazyèm pi wo paske li endike entansyon itilizatè, men prèske nenpòt bagay ka plane.

Konpozan kouvri

Bootstrap gen ladan plizyè konpozan ki fonksyone kòm yon superposition nan kèk kalite. Sa a gen ladan, nan lòd ki pi wo z-index, dropdowns, fiks ak kolan navbars, modal, konsèy sou zouti, ak popovers. Konpozan sa yo gen pwòp z-indexechèl yo ki kòmanse nan 1000. Nimewo sa a te chwazi abitrèman epi li sèvi kòm yon ti tanpon ant estil nou yo ak estil koutim pwojè ou a.

Chak eleman kouvri ogmante z-indexvalè li yon ti kras nan yon fason ke prensip komen UI pèmèt itilizatè konsantre oswa plane eleman yo rete nan gade tout tan. Pa egzanp, yon modal se bloke dokiman (pa egzanp, ou pa ka pran okenn lòt aksyon eksepte aksyon modal la), kidonk nou mete sa anlè navbar nou yo.

Aprann plis sou sa nan z-indexpaj layout nou an .

HTML ak CSS sou JS

Chak fwa sa posib, nou pito ekri HTML ak CSS sou JavaScript. An jeneral, HTML ak CSS yo pi prolifik ak aksesib a plis moun nan tout nivo eksperyans diferan. HTML ak CSS yo tou pi vit nan navigatè ou a pase JavaScript, epi navigatè ou a jeneralman bay anpil fonksyonalite pou ou.

Prensip sa a se API JavaScript premye klas nou an lè l sèvi avèk dataatribi. Ou pa bezwen ekri prèske okenn JavaScript pou itilize grefon JavaScript nou yo; olye de sa, ekri HTML. Li plis sou sa a nan paj JavaScript nou an .

Anfen, estil nou yo bati sou konpòtman fondamantal eleman entènèt komen yo. Chak fwa sa posib, nou prefere sèvi ak sa navigatè a bay. Pou egzanp, ou ka mete yon .btnklas sou prèske nenpòt eleman, men pifò eleman pa bay okenn valè semantik oswa fonksyonalite navigatè. Se konsa, olye de sa, nou itilize <button>s ak <a>s.

Menm bagay la tou ale pou eleman ki pi konplèks. Pandan ke nou ta ka ekri pwòp plugin validation fòm nou an pou ajoute klas nan yon eleman paran ki baze sou eta yon opinyon, kidonk pèmèt nou style tèks la di wouj, nou prefere itilize :valid/ :invalidpseudo-eleman chak navigatè bay nou.

Itilite yo

Klas sèvis piblik yo-ansyen èd nan Bootstrap 3-se yon alye pwisan nan konbat CSS gonfleman ak pèfòmans pòv paj. Yon klas sèvis piblik se tipikman yon koup pwopriyete-valè imuiabl ki eksprime kòm yon klas (egzanp, .d-blockreprezante display: block;). Apèl prensipal yo se vitès itilizasyon pandan y ap ekri HTML ak limite kantite CSS koutim ou dwe ekri.

Espesyalman konsènan CSS koutim, sèvis piblik yo ka ede konbat ogmante gwosè fichye a lè yo diminye pè pwopriyete-valè ki pi souvan repete nan klas sèl. Sa a ka gen yon efè dramatik nan echèl nan pwojè ou yo.

HTML fleksib

Byenke pa toujou posib, nou fè efò pou nou evite twò dogmatik nan kondisyon HTML nou an pou konpozan. Kidonk, nou konsantre sou klas sèl nan seleksyon CSS nou yo epi eseye evite seleksyon timoun imedya ( >). Sa a ba ou plis fleksibilite nan aplikasyon ou epi li ede kenbe CSS nou an pi senp epi mwens espesifik.

Konvansyon kòd

Gid Kòd (ki soti nan Bootstrap ko-kreyatè, @mdo) dokimante kijan nou ekri HTML ak CSS nou atravè Bootstrap. Li presize direktiv pou fòma jeneral, defo on sans, lòd pwopriyete ak atribi, ak plis ankò.

Nou itilize Stylelint pou aplike estanda sa yo ak plis ankò nan Sass/CSS nou an. Konfigirasyon Stylelint koutim nou an se sous louvri epi li disponib pou lòt moun itilize ak pwolonje.

Nou itilize vnu-jar pou fè respekte HTML estanda ak semantik, ansanm ak detekte erè komen.