Te ɖe

Togbɔ be gɔmedzedze ƒe axawo naa ŋgɔdonya tsaɖiɖi le dɔa kple nusiwo wòna ŋu hã la, nuŋlɔɖi sia ku ɖe nusita míewɔa nusiwo míewɔna le Bootstrap me ŋu. Eɖe míaƒe xexemenunya me na xɔtutu le nyatakakadzraɖoƒea ale be ame bubuwo nate ŋu asrɔ̃ nu tso mía gbɔ, akpe asi ɖe mía ŋu, eye wòakpe ɖe mía ŋu míawɔ ŋgɔyiyi.

Èkpɔ nane si meɖi nyuie o, alo ɖewohĩ woate ŋu awɔe nyuie wua? Ʋu tata aɖe —adzɔ dzi na mí be míadzro eme kpli wò.

Totoɖeme

Míage ɖe esiawo dometɔ ɖesiaɖe me geɖe wu le ɣeyiɣi bliboa me, gake le ɖoƒe kɔkɔ aɖe la, nusi fiaa mɔ míaƒe mɔnu lae nye esi.

• Ele be akpaawo nawɔ dɔ nyuie eye woanye asitelefon gbãtɔ
• Ele be woatu akpawo kple gɔmeɖoanyi ƒe hatsotso eye woakeke wo ɖe enu to tɔtrɔ ƒe hatsotsowo dzi
• Ele be akpa aɖewo ƒe nɔnɔmewo nawɔ ɖe z-index dzidzenu si bɔ dzi
• Ɣesiaɣi si wòanya wɔ la, di HTML kple CSS ƒe dɔwɔwɔ wu JavaScript
• Ɣesiaɣi si wòanya wɔ la, zã dɔwɔnu siwo wozãna tsɔ wu atsyã siwo wowɔ ɖe ɖoɖo nu
• Ɣesiaɣi si wòanya wɔ la, ƒo asa na HTML ƒe nudidi sesẽwo dzi wɔwɔ (ɖeviwo ƒe tiatiawɔlawo) .

Nyaŋuɖoɖo

Wotu Bootstrap ƒe nuwɔna ƒe atsyãwo be woawɔ nu ɖe ​​ame ŋu, mɔnu si woyɔna zi geɖe be mobile-first . Míezãa nya sia le míaƒe docs me eye míelɔ̃ ɖe edzi le akpa gãtɔ me, gake ɣeaɖewoɣi la, ate ŋu akeke akpa. Togbɔ be menye akpa ɖesiaɖee wòle be wòawɔ dɔ bliboe le Bootstrap me o hã la, ŋuɖoɖomɔnu sia ku ɖe CSS ƒe tsɔtsɔke dzi ɖeɖe kpɔtɔ ŋu to etutu be nàtsɔ atsyãwo akpe ɖe eŋu ne nukpɔkpɔ ƒe ʋɔtrua le lolom ɖe edzi.

Le Bootstrap godoo la, àkpɔ esia nyuie wu le míaƒe nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo me. Zi geɖe la, míezãa min-widthbiabia siwo dzea dɔwɔwɔ gɔme le gbagbãƒe aɖe koŋ eye woyia edzi toa gbagbãƒe kɔkɔwo me. Le kpɔɖeŋu me, a .d-noneku min-width: 0ɖe seɖoƒemanɔsitɔ ŋu. Le go bubu me la, a .d-md-nonewɔa dɔ tso titina ƒe gbagbãƒe kple dzi.

Ɣeaɖewoɣi la, míazã max-widthne akpa aɖe ƒe dzɔdzɔmeŋusẽ ƒe sesẽ bia be wòawɔe. Ɣeaɖewoɣi la, nusiwo woɖena ɖa siawo me kɔna le dɔwɔwɔ kple susu me nyuie wu be woawɔ wo ŋudɔ ahado alɔ wo wu dɔwɔwɔ veviwo gbugbɔŋlɔ tso míaƒe akpawo me. Míedzea agbagba be míaɖo seɖoƒe na mɔnu sia, gake míazãe tso ɣeyiɣi yi ɣeyiɣi.

Klasswo me

Le míaƒe Reboot, si nye cross-browser normalization stylesheet ɖeɖeko megbe la, míaƒe atsyãwo katã ƒe taɖodzinue nye be míazã klasswo abe tiatiawɔlawo ene. Esia fia be nàƒo asa na ƒomevi tiatia (le kpɔɖeŋu me, input[type="text"]) kple dzila ƒe klass siwo gbɔ eme (le kpɔɖeŋu me, .parent .child) siwo na atsyãwo le tẽ akpa be woate ŋu aɖu wo dzi bɔbɔe.

Abe alesi wòle ene la, ele be woatu akpawo kple gɔmeɖoanyi ƒe hatsotso si me nunɔamesi-asixɔxɔ eve siwo bɔ, siwo mele be woaɖe asi le wo ŋu o la le. Le kpɔɖeŋu me, .btnkple .btn-primary. Míezãa .btnatsyã siwo katã bɔ abe display, padding, kple border-width. Emegbe míezãa tɔtrɔwo abe .btn-primaryamadede, megbe-amadede, liƒo-amadede, kple bubuawo tsɔtsɔ kpee ene.

Ele be woazã tɔtrɔɖenu ƒe hatsotsowo ne nɔnɔme alo asixɔxɔ geɖewo li siwo woatrɔ le vovototo geɖewo me ko. Menye ɣesiaɣie tɔtrɔwo hiãna o, eyata kpɔ egbɔ be yele kɔda ƒe fliwo dzram ɖo ŋutɔŋutɔ eye nèle mɔ xem ɖe asitɔtrɔ siwo mehiã o nu ne èle wo wɔm. Trɔtrɔlawo ƒe kpɔɖeŋu nyuiwoe nye míaƒe tanya ƒe amadede ƒe hatsotsowo kple lolome ƒe vovototowo.

z-index ƒe dzidzenuwo

Nudzidzenu eve z-indexle Bootstrap me—nu siwo le akpa aɖe me kple akpa siwo wotsɔ tsyɔa wo dzi.

Nusiwo wotsɔ wɔa akpa aɖee

• Wotu akpa aɖewo le Bootstrap me kple nusiwo tsi tre ɖe wo nɔewo ŋu be woaxe mɔ ɖe liƒo eve nu evɔ womatrɔ asi le nɔnɔmea borderŋu o. Le kpɔɖeŋu me, abɔta ƒe ƒuƒoƒowo, nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo, kple axawo ɖoɖo.
• Akpa siawo ma dzidzenu si wozãna ɖaa z-indexsi nye 0to 3.
• 0nye default (gɔmedzedze), 1nye :hover, 2nye :active/ .active, eye 3nye :focus.
• Mɔnu sia sɔ kple míaƒe mɔkpɔkpɔwo le ezãlawo ƒe nu vevitɔ kekeake ŋu. Ne element aɖe ƒe susu le nu ŋu la, ele ŋkume eye wòle ezãla ƒe susu me. Nu siwo le dɔ wɔm lae nye evelia si kɔkɔ wu elabena wofiaa nɔnɔme. Hover nye etɔ̃lia si kɔkɔ wu elabena efia be ezãla ƒe tameɖoɖo, gake woate ŋu atsɔ nusianu kloe aɖo edzi.

Kpe akpa aɖewo dzi

Bootstrap la ƒe akpa geɖe siwo wɔa dɔ abe nutsyɔtsyɔ ƒomevi aɖe ene la le eme. Esia lɔ, le ɖoɖo si nu kɔkɔ wu nu ɖo nu z-indexla, nusiwo wotsɔna ƒua gbe, navbar siwo woɖo ɖe teƒe ɖeka kple esiwo léna ɖe nu ŋu, modals, dɔwɔnu ƒe aɖaŋuɖoɖowo, kple popovers ɖe eme. Woawo ŋutɔ ƒe z-indexdzidzenu le akpa siawo ŋu si dzea egɔme tso 1000. Wotia gɔmedzedze xexlẽdzesi sia le wo ɖokui si eye wòwɔa dɔ abe buffer sue aɖe ene le míaƒe atsyãwo kple wò dɔa ƒe atsyã tɔxɛwo dome.

Nutsyɔnu ƒe akpa ɖesiaɖe dzia eƒe z-indexasixɔxɔ ɖe edzi vie le mɔ si ana be UI ƒe gɔmeɖose siwo bɔ la nana nu siwo zãla ƒe susu nɔa nu ŋu alo esiwo le ʋuʋu ɖi la nanɔ nukpɔkpɔ me ɣesiaɣi. Le kpɔɖeŋu me, modal nye nuŋlɔɖi ƒe mɔxexe (le kpɔɖeŋu me, màteŋu awɔ afɔɖeɖe bubu aɖeke o negbe ɖe modal ƒe dɔwɔwɔ ta), eyata míetsɔ ema da ɖe míaƒe navbars dzi.

Srɔ̃ nu geɖe tso esia ŋu le míaƒe z-indexɖoɖowɔɖi ƒe axaa dzi .

HTML kple CSS le JS dzi

Ɣesiaɣi si wòanya wɔ la, míedina be míaŋlɔ HTML kple CSS ɖe JavaScript dzi. Le goawo katã me la, HTML kple CSS wɔa dɔ geɖe wu eye ame geɖe siwo si nuteƒekpɔkpɔ ƒe ɖoƒe vovovowo le la ate ŋu akpɔ wo. HTML kple CSS hã wɔa dɔ kabakaba le wò web-browser me wu JavaScript, eye zi geɖe la, wò web-browser la wɔa dɔ geɖe wò.

Gɔmeɖose sia nye míaƒe JavaScript API gbãtɔ si zãa datanɔnɔmewo. Mehiã be nàŋlɔ JavaScript aɖeke kloe hafi azã míaƒe JavaScript ƒe kpeɖeŋutɔawo o; ke boŋ ŋlɔ HTML. Xlẽ nu geɖe tso esia ŋu le míaƒe JavaScript ƒe axaa dzi .

Mlɔeba la, míaƒe atsyãwo tua web ƒe akpa siwo bɔ ƒe nuwɔna veviwo dzi. Ɣesiaɣi si wòanya wɔ la, míedina be míazã nusiwo web-browser la naa mí. Le kpɔɖeŋu me, àteŋu atsɔ .btnklass ade element ɖesiaɖe kloe dzi, gake element akpa gãtɔ menaa gɔmesese ƒe asixɔxɔ alo browser ƒe dɔwɔwɔ aɖeke o. Eyata míezãa <button>s kple <a>s boŋ.

Nenema kee wòle le akpa siwo gɔme sese sesẽ wu hã gome. Togbɔ be míateŋu aŋlɔ mía ŋutɔwo ƒe nuŋlɔɖi ƒe kpeɖodzina ƒe kpeɖeŋutɔ atsɔ akpe ɖe klasswo ŋu ɖe dzila ƒe akpa aɖe ŋu le nya si wotsɔ de eme ƒe nɔnɔme nu, to esia me la, míate ŋu awɔ nuŋɔŋlɔa ƒe atsyã agblɔ be dzĩ hã la, míelɔ̃a :valid/ :invalidpseudo-elements siwo browser ɖesiaɖe naa mí la zazã.

Dɔwɔnu Siwo Wozãna

Utility classes—si nye kpekpeɖeŋunalawo tsã le Bootstrap 3 me—nye hadɔwɔla sẽŋu aɖe le avuwɔwɔ kple CSS ƒe ʋuʋu kple axa ƒe dɔwɔwɔ nyuie me. Zi geɖe la, viɖe ƒe hatsotso nyea nunɔamesi-asixɔxɔ ƒe ƒuƒoƒo ɖeka si metrɔna o si woɖena fiana abe hatsotso ene (le kpɔɖeŋu me, .d-blocktsi tre ɖi na display: block;). Woƒe nu vevitɔe nye be woazã wo kabakaba ne èle HTML ŋlɔm eye woaɖo seɖoƒe na CSS tɔxɛ si wòle be nàŋlɔ.

Etɔxɛe le CSS si wowɔ ɖe ɖoɖo nu gome la, dɔwɔnuwo ateŋu akpeɖeŋu awɔ avu kple faɛl ƒe lolome si le dzidzim ɖe edzi to wò nunɔamesi-asixɔxɔ eve siwo wogbugbɔ gblɔna zi geɖe la dzi ɖeɖe kpɔtɔ ɖe hatsotso ɖeka me. Esia ate ŋu akpɔ ŋusẽ ɖe ame dzi ŋutɔ le wò dɔwo me.

HTML si te ŋu trɔna ɖe nɔnɔmewo ŋu

Togbɔ be menye ɣesiaɣie wòanya wɔ o hã la, míedzea agbagba be míaƒo asa na nukpɔsusu siwo me kɔ akpa le míaƒe HTML nudidi siwo ku ɖe akpa aɖewo ŋu me. Eyata míetsɔa míaƒe susu ɖoa klass ɖekaɖekawo ŋu le míaƒe CSS tiatiawɔnuwo me eye míedzea agbagba be míaƒo asa na ɖeviwo tiatia enumake ( >). Esia naa nète ŋu trɔna ɖe nɔnɔmewo ŋu wu le wò dɔwɔwɔ me eye wòkpena ɖe ŋuwò be míaƒe CSS la nanɔ bɔbɔe eye wòagagblɔ nya aɖeke tẽ o.

Sedede ƒe ɖoɖowo

Code Guide (tso Bootstrap co-creator, @mdo) ŋlɔ alesi míeŋlɔa míaƒe HTML kple CSS le Bootstrap katã me la ɖi. Egblɔ mɔfiamewo na ɖoɖowɔwɔ le mɔ gbadza nu, susuŋudɔwɔwɔ ƒe gɔmedzedze, nunɔamesi kple nɔnɔme ƒe ɖoɖowo, kple bubuwo.

Míezãa Stylelint tsɔ wɔa dzidzenu siawo kple bubuwo dzi le míaƒe Sass/CSS me. Míaƒe Stylelint config si wowɔ ɖe ɖoɖo nu la nye open source eye wòli na ame bubuwo be woazã ahakekee ɖe enu.

Míezãa vnu-jar tsɔ zia HTML si sɔ kple gɔmesese dzi, kpakple vodada siwo bɔ la kpɔkpɔ.