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 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.
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 sun fi bayyana a zahiri da tunani don aiwatarwa da goyan baya fiye da sake rubuta ainihin ayyukan daga abubuwan haɗin gwiwarmu. 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ɓɓen 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 .
Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser general provides a great deal of functionality for you.
This principle is our first-class JavaScript API is data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.
The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
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.