kusanci

Yayin da shafukan farawa suna ba da ziyarar gabatarwa na aikin da abin da yake bayarwa, wannan takaddar tana mai da hankali kan dalilin da yasa muke yin abubuwan da muke yi a Bootstrap. Yana bayyana falsafar mu don ginawa akan yanar gizo don wasu su koya daga gare mu, ba da gudummawa tare da mu, da kuma taimaka mana mu inganta.

Duba wani abu da bai yi kyau ba, ko watakila za a iya yin shi mafi kyau? Bude wani batu — za mu so mu tattauna da ku.

Takaitawa

Za mu nutse cikin kowane ɗayan waɗannan gabaɗaya, amma a babban matakin, ga abin da ke jagorantar tsarinmu.

• Abubuwan da aka gyara yakamata su kasance masu amsawa da wayar hannu-na farko
• Ya kamata a gina abubuwan da aka haɗa tare da ajin tushe kuma a faɗaɗa ta hanyar azuzuwan masu gyara
• Ya kamata jihohin da ke cikin ɓangaren suyi biyayya ga ma'aunin z-index na gama gari
• A duk lokacin da zai yiwu, fi son aiwatar da HTML da CSS akan JavaScript
• A duk lokacin da zai yiwu, yi amfani da kayan aiki akan salon al'ada
• A duk lokacin da zai yiwu, guje wa aiwatar da ƙayyadaddun buƙatun HTML (masu zaɓin yara)

Mai amsawa

An gina sifofin amsawar Bootstrap don su kasance masu amsawa, tsarin da galibi ake kira wayar hannu-farko . Muna amfani da wannan kalma a cikin takardunmu kuma mun yarda da shi, amma a wasu lokuta yana iya yin faɗi da yawa. Duk da yake ba kowane bangare dole ne ya kasance mai cikakken amsawa a cikin Bootstrap ba, wannan tsarin amsawa shine game da rage abubuwan da suka mamaye CSS ta hanyar tura ku don ƙara salo yayin da kallon kallo ke ƙara girma.

A duk faɗin Bootstrap, za ku ga wannan a fili a cikin tambayoyin kafofin watsa labarai. A mafi yawan lokuta, muna amfani da min-widthtambayoyin da suka fara aiki a takamaiman wurin hutu kuma suna ɗauka ta cikin wuraren hutu mafi girma. Misali, a .d-noneshafi daga min-width: 0zuwa rashin iyaka. A daya hannun, a .d-md-noneshafi daga matsakaici breakpoint zuwa sama.

A wasu lokuta za mu yi amfani max-widthda lokacin da ƙayyadaddun abubuwan da ke tattare da su ke buƙatar sa. A wasu lokuta, waɗannan ƙetare na aiki da hankali sun fi bayyana don aiwatarwa da goyan baya fiye da sake rubuta ainihin ayyukan daga abubuwan da muka haɗa. Muna ƙoƙari don iyakance wannan hanya, amma za mu yi amfani da shi lokaci zuwa lokaci.

Darasi

Baya ga Sake yi mana, tsarin daidaita tsarin mai binciken giciye, duk salon mu yana nufin amfani da azuzuwan azaman masu zaɓe. Wannan yana nufin kawar da nau'in zaɓaɓɓun nau'in (misali, input[type="text"]) da azuzuwan iyaye masu ban sha'awa (misali, .parent .child) waɗanda ke sa salo ya keɓanta don sauƙaƙewa.

Don haka, ya kamata a gina abubuwan ɓangarorin tare da ajin tushe wanda ke da gidaje na gama-gari, waɗanda ba za a soke su ba. Misali, .btnda .btn-primary. Muna amfani .btnda kowane salon gama gari kamar display, padding, da border-width. Muna amfani da masu gyara kamar .btn-primaryƙara launi, launi-baya, launi-launi, da sauransu.

Ya kamata a yi amfani da azuzuwan gyare-gyare kawai lokacin da akwai kaddarori masu yawa ko ƙima da za a canza a cikin bambance-bambance masu yawa. Masu gyare-gyare ba koyaushe suke zama dole ba, don haka tabbatar da cewa a zahiri kuna adana layukan lamba kuma kuna hana abubuwan da ba dole ba lokacin ƙirƙirar su. Kyakkyawan misalan masu gyara su ne azuzuwan launi na jigon mu da bambance-bambancen girman.

z-index ma'auni

Akwai z-indexma'auni guda biyu a cikin Bootstrap - abubuwan da ke cikin wani abu da abin rufe fuska.

Abubuwan da ke kunshe

• Wasu abubuwan da ke cikin Bootstrap an gina su tare da abubuwa masu haɗuwa don hana iyakoki biyu ba tare da canza borderkayan ba. Misali, ƙungiyoyin maɓalli, ƙungiyoyin shigarwa, da fafutuka.
• Waɗannan ɓangarorin suna raba daidaitaccen z-indexma'auni 0ta hanyar 3.
• 0tsoho ne (na farko), 1shine :hover, 2shine :active/ .active, kuma 3shine :focus.
• Wannan hanya ta dace da tsammaninmu na fifikon mai amfani. Idan an mai da hankali ga wani abu, ana gani kuma a hankalin mai amfani. Abubuwa masu aiki sune na biyu mafi girma saboda suna nuna yanayi. Hover shine na uku mafi girma saboda yana nuna niyyar mai amfani, amma kusan komai ana iya jujjuyawa.

Abubuwan da aka rufe

Bootstrap ya ƙunshi abubuwa da yawa waɗanda ke aiki azaman mai rufi na wani nau'i. Wannan ya haɗa da, cikin tsari mafi girma z-index, zazzagewa, ƙayyadaddun navbars masu tsayi da tsayi, modal, tukwici, da popovers. Wadannan sassan suna da nasu z-indexma'auni wanda zai fara a 1000. An zaɓi wannan lambar farawa ba bisa ka'ida ba kuma tana aiki azaman ƙaramar ma'auni tsakanin salonmu da salon al'ada na aikinku.

Kowane ɓangaren mai rufi yana ƙara ƙimarsa z-indexkaɗan ta yadda ka'idodin UI na gama gari ke ba da damar mai da hankali ga mai amfani ko abubuwan da ke shawagi su kasance cikin gani a kowane lokaci. Misali, modal shine toshe daftarin aiki (misali, ba za ku iya ɗaukar wani mataki na daban ba don aikin modal), don haka mun sanya hakan sama da navbars ɗin mu.

Ƙara koyo game da wannan a cikin z-indexshimfidar wuri na mu .

HTML da CSS akan JS

A duk lokacin da zai yiwu, mun fi son rubuta HTML da CSS akan JavaScript. Gabaɗaya, HTML da CSS sun fi ƙwarewa kuma suna samun dama ga ƙarin mutane na kowane matakan gogewa daban-daban. HTML da CSS suma suna da sauri a cikin burauzarku fiye da JavaScript, kuma burauzar ku gabaɗaya tana ba ku ayyuka da yawa.

Wannan ƙa'idar ita ce JavaScript API ɗinmu ta farko ta amfani da datahalaye. Ba kwa buƙatar rubuta kusan kowane JavaScript don amfani da plugins ɗin mu na JavaScript; maimakon, rubuta HTML. Kara karantawa game da wannan a cikin shafin mu na JavaScript .

A ƙarshe, salon mu yana ginu ne akan ainihin halayen abubuwan yanar gizo gama gari. A duk lokacin da zai yiwu, mun gwammace mu yi amfani da abin da mai lilo ya bayar. Misali, zaku iya sanya .btnaji akan kusan kowane nau'i, amma yawancin abubuwan ba sa samar da kowane ƙimar tamani ko aikin burauza. Don haka a maimakon haka, muna amfani <button>da s da <a>s.

Haka yake don ƙarin hadaddun abubuwa. Duk da yake za mu iya rubuta namu kayan aikin ingantaccen tsari don ƙara azuzuwan zuwa kashi na iyaye dangane da yanayin shigarwar, ta haka yana ba mu damar yin salon rubutun da ke cewa ja, mun fi son yin amfani da abubuwan :valid/ :invalidabubuwan da kowane mai bincike ke ba mu.

Abubuwan amfani

Azuzuwan masu amfani — tsoffin mataimaka a cikin Bootstrap 3 — ƙawance ne mai ƙarfi wajen yaƙar kumburin CSS da rashin aikin shafi. Ajin mai amfani yawanci guda ɗaya ne, haɗe-haɗe-haɗe-haden darajar dukiya mara canzawa wanda aka bayyana azaman aji (misali, .d-blockwakilta display: block;). Babban roƙonsu shine saurin amfani yayin rubuta HTML da iyakance adadin CSS na al'ada da yakamata ku rubuta.

Musamman game da CSS na al'ada, abubuwan amfani zasu iya taimakawa wajen magance haɓaka girman fayil ta rage yawan maimaita-daraja nau'i-nau'i na dukiya zuwa azuzuwa guda. Wannan na iya yin tasiri mai ban mamaki a ma'auni a cikin ayyukanku.

HTML mai sassauƙa

Duk da yake ba koyaushe yana yiwuwa ba, muna ƙoƙari don guje wa kasancewa mai wuce gona da iri a cikin buƙatun mu na HTML don abubuwan haɗin gwiwa. Don haka, muna mai da hankali kan azuzuwan guda ɗaya a cikin masu zaɓenmu na CSS kuma muna ƙoƙarin guje wa zaɓen yara ( >). Wannan yana ba ku ƙarin sassauƙa a aiwatar da ku kuma yana taimakawa ci gaba da sauƙaƙe CSS ɗin mu da ƙarancin ƙayyadaddun bayanai.

Ƙididdigar ƙididdiga

Jagorar lamba (daga mai haɗin gwiwar Bootstrap, @mdo) ya rubuta yadda muke rubuta HTML da CSS ɗin mu a cikin Bootstrap. Yana ƙayyadaddun jagororin tsarawa gabaɗaya, ɓangarorin hankali na gama gari, odar dukiya da sifa, da ƙari.

Muna amfani da Stylelint don tilasta waɗannan ƙa'idodi da ƙari a cikin Sass/CSS. Tsarin Stylelint ɗin mu na al'ada buɗaɗɗe ne kuma akwai don wasu don amfani da haɓakawa.

Muna amfani da vnu-jar don aiwatar da daidaitattun HTML da na fassara, da kuma gano kurakuran gama gari.