kusanci
Koyi game da ƙa'idodin jagora, dabaru, da dabarun da ake amfani da su don ginawa da kula da Bootstrap ta yadda za ku iya keɓancewa cikin sauƙi da tsawaita shi da kanku.
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 falsafancin 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.
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)
Salon amsawar Bootstrap an gina su don su kasance masu amsawa, tsarin da galibi ake kira wayar hannu-farko . Muna amfani da wannan kalmar a cikin takardunmu kuma mun yarda da shi sosai, 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, wani .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.
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 ƙididdiga da za a canza a cikin bambance-bambance masu yawa. Masu gyare-gyare ba koyaushe suke zama dole ba, don haka tabbatar da gaske 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.
Akwai z-indexma'auni guda biyu a cikin Bootstrap - abubuwan da ke cikin wani abu da abin rufe fuska.
- 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'auni0ta hanyar3. 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.
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. z-indexWaɗannan sassan suna da ma'aunin nasu wanda zai fara a 1000. Wannan lambar farawa ba ta dace ba kuma tana aiki azaman ƙaramar ma'auni tsakanin salon mu da salon al'ada na aikin ku.
Kowane sashi mai rufi yana ƙara z-indexƙimarsa kaɗan ta yadda ka'idodin UI na gama gari ke ba da damar mai da hankali ga abubuwan da aka mai da hankali ga mai amfani ko su kasance a 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 .
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 datahalayen mu na JavaScript na farko. 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 a kan muhimman halaye na abubuwan yanar gizon 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. Yayin da za mu iya rubuta namu kayan aikin inganta nau'in nau'i 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.
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.
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.