दृष्टिकोण
बूटस्ट्रैप कें निर्माण आ रखरखाव कें लेल उपयोग कैल जाय वाला मार्गदर्शक सिद्धांतक, रणनीतियक, आ तकनीक कें बारे मे जानूं ताकि अहां खुद एकरा बेसि आसानी सं अनुकूलित आ विस्तारित कयर सकय छी.
जखन कि शुरू करय कें पन्ना परियोजना कें परिचयात्मक भ्रमण आ इ की पेशकश करयत छै, इ दस्तावेज इ बात पर केंद्रित छै की हम बूटस्ट्रैप मे हम करय वाला काज कियाक करय छी. ई वेब पर निर्माण लेली हमरऽ दर्शन क॑ समझाबै छै ताकि दोसरऽ लोग हमरा स॑ सीख॑ सक॑, हमरा साथ योगदान करी सक॑, आरू सुधार म॑ मदद करी सक॑ ।
किछु एहन देखू जे सही नहि लागय, वा शायद एहि सं नीक काज भ' सकैत छल? कोनो मुद्दा खोलू —हमरा सभकेँ अहाँसँ चर्चा करब नीक लागत।
हम एहि में सं प्रत्येक में बेसी गोता लगाएब पूरा में, मुदा उच्च स्तर पर, एतय हमर दृष्टिकोण के मार्गदर्शन करैत अछि.
- घटक प्रतिक्रियाशील आ मोबाइल-पहिने हेबाक चाही
- घटक कें एकटा आधार वर्ग कें साथ बनायल जेबाक चाही आ संशोधक वर्गक कें माध्यम सं विस्तारित कैल जेबाक चाही
- घटक राज्यक कें एकटा आम z-सूचकांक पैमाना कें पालन करबाक चाहि
- जखन संभव होयत, जावास्क्रिप्ट सं बेसी एचटीएमएल आ सीएसएस कार्यान्वयन पसंद करू
- जखन संभव होयत, कस्टम शैली पर उपयोगिताक उपयोग करू
- जखन संभव होयत, सख्त एचटीएमएल आवश्यकताक कें लागू करय सं बचूं (बच्चा चयनकर्ता)
बूटस्ट्रैप केरऽ रिस्पांसिव स्टाइल रिस्पांसिव होबै लेली बनालऽ गेलऽ छै, एगो ऐन्हऽ दृष्टिकोण जेकरा अक्सर मोबाइल-फर्स्ट के रूप म॑ संदर्भित करलऽ जाय छै । हम अपनऽ डॉक्स म॑ ई शब्द के प्रयोग करै छियै आरू एकरा स॑ बहुत हद तलक सहमत छियै, लेकिन कई बार ई बहुत व्यापक भी होय सकै छै । जबकि बूटस्ट्रैप म॑ हर घटक क॑ पूरा तरह स॑ उत्तरदायी नै होना चाहियऽ , ई उत्तरदायी दृष्टिकोण व्यूपोर्ट बड़ऽ होय के साथ-साथ शैली जोड़ै लेली धक्का द॑ क॑ CSS ओवरराइड क॑ कम करै के बारे म॑ छै ।
बूटस्ट्रैप के पार, अहां के ई सबसँ बेसी स्पष्ट रूप सं हमर मीडिया क्वेरी मे देखय लेल मिलत. अधिकांश मामलों म ं॑, हम min-widthऐन्हऽ क्वेरी के उपयोग करय छै जे एक विशिष्ट ब्रेकपॉइंट प ं॑ लागू होना शुरू होय जाय छै आरू उच्च ब्रेकपॉइंट के माध्यम स ं॑ ऊपर ले जाय छै । जेना, क सँ अनंत धरि .d-noneलागू होइत अछि | min-width: 0दोसर दिस, .d-md-noneक मध्यम ब्रेकपॉइंट स आ ऊपर लागू होइत अछि ।
कखनो काल हम तखन उपयोग करब max-widthजखन कोनो घटक के अंतर्निहित जटिलता के आवश्यकता होयत. कखनो-कखनो, ई ओवरराइड हमर घटक सं कोर कार्यक्षमता कें पुनर्लेखन सं बेसि कार्यात्मक आ मानसिक रूप सं लागू करय आ समर्थन करय कें लेल स्पष्ट छै. हम सब एहि दृष्टिकोण के सीमित करबाक प्रयास करैत छी, मुदा समय-समय पर एकर उपयोग करब।
हमरऽ रिबूट, एक क्रॉस-ब्राउजर नॉर्मलाइजेशन स्टाइलशीट के अलावा, हमरऽ सब स्टाइलऽ के उद्देश्य छै कि क्लासऽ क॑ चयनकर्ता के रूप म॑ इस्तेमाल करलऽ जाय । एकरऽ मतलब छै कि प्रकार चयनकर्ता (जैना, input[type="text"]) आरू अतिरिक्त अभिभावक वर्ग (जैना, .parent .child) स॑ स्टीयरिंग क्लीयर करलऽ जाय जे शैली क॑ बहुत विशिष्ट बनाबै छै आरू आसानी स॑ ओवरराइड करलऽ जाय सकै छै.
अइ प्रकार, घटक कें निर्माण एकटा आधार वर्ग कें साथ कैल जैबाक चाहि जे आम, ओवरराइड नहि कैल जै वाला संपत्ति-मूल्य जोड़ी कें रखयत छै. जेना, .btnआ .btn-primary. हम .btnसब आम शैली जेना display, padding, आ border-width. हम तखन संशोधक के प्रयोग .btn-primaryकरैत छी जेना रंग, पृष्ठभूमि-रंग, सीमा-रंग आदि जोड़ब |
संशोधक वर्गक कें उपयोग तखनहि करबाक चाहि जखन अनेक गुण या मान होयत छै जकरा अनेक वेरिएंट मे बदलल जेबाक चाही. संशोधक हमेशा आवश्यक नै होय छै, अतः सुनिश्चित करऽ कि आप वास्तव म॑ कोड केरऽ लाइनऽ क॑ सेव करी रहलऽ छियै आरू ओकरा बनाबै के समय अनावश्यक ओवरराइड क॑ रोकी रहलऽ छियै । संशोधक केरऽ अच्छा उदाहरण हमरऽ थीम रंग वर्ग आरू आकार वेरिएंट छै ।
बूटस्ट्रैप मे दूटा z-indexपैमाना छै-एक घटक कें भीतर तत्व आ ओवरले घटक.
- बूटस्ट्रैप म॑ कुछ घटक क॑ ओवरलैपिंग तत्वऽ के साथ बनालऽ गेलऽ छै ताकि
borderगुण क॑ संशोधित करलऽ बिना डबल बॉर्डर क॑ रोकलऽ जाय सक॑ । जेना, बटन समूह, इनपुट समूह, आओर पृष्ठांकन. - ई घटक माध्यम सं के एकटा मानक
z-indexपैमाना साझा करैत अछि .03 0पूर्वनिर्धारित अछि (प्रारम्भिक),1अछि:hover,2अछि:active/.active, आ ,3अछि:focus.- इ दृष्टिकोण उच्चतम उपयोगकर्ता प्राथमिकता कें हमर अपेक्षाक सं मेल खायत छै. यदि कोनो तत्व केंद्रित छै त ओ दृष्टि में छै आ उपयोगकर्ता के ध्यान में छै. सक्रिय तत्व दोसर सर्वोच्च होइत अछि कारण ओ अवस्थाक संकेत करैत अछि | होवर तेसरऽ सबसें अधिक छै, कैन्हेंकि ई उपयोगकर्ता केरऽ इरादा क॑ दर्शाबै छै, लेकिन लगभग कोनो भी चीज क॑ होवर करलऽ जाब॑ सकै छै ।
बूटस्ट्रैप मे कईटा घटक शामिल छै जे कोनों तरह कें ओवरले कें रूप मे काज करएयत छै. एहि मे शामिल अछि, उच्चतम क क्रम मे z-index, ड्रॉपडाउन, स्थिर आ चिपचिपा नवबार, मोडल, टूलटिप्स, आ पोपोवर. एहि घटक सभक अपन z-indexपैमाना होइत छैक जे 1000. ई प्रारंभिक संख्या यादृच्छिक छै आरू हमरऽ शैली आरू आपकऽ प्रोजेक्ट केरऽ कस्टम शैली के बीच एगो छोटऽ बफर के रूप म॑ काम करै छै ।
प्रत्येक ओवरले घटक अपनऽ z-indexमूल्य क॑ ऐन्हऽ तरीका स॑ कनी बढ़ाबै छै कि आम यूआई सिद्धांत उपयोगकर्ता केंद्रित या होवर तत्वऽ क॑ हर समय दृश्य म॑ रहय के अनुमति दै छै । जेना कि मोडल डॉक्यूमेंट ब्लॉकिंग अछि (जैना, मोडल के एक्शन के लेल छोड़ि क' अहाँ कोनो आन एक्शन नहि क' सकैत छी), ताहि लेल हम ओहि बात के अपन नवबार के ऊपर राखैत छी.
एहि बारे मे बेसी जानू हमर z-indexलेआउट पेज पर .
जखन संभव हो, हम जावास्क्रिप्ट पर एचटीएमएल आ सीएसएस लिखब पसंद करैत छी । सामान्य तौर पर, एचटीएमएल आरू सीएसएस सब अलग-अलग अनुभव स्तर के अधिक लोगऽ लेली अधिक विपुल आरू सुलभ छै. एचटीएमएल आरू सीएसएस भी जावास्क्रिप्ट के तुलना म॑ आपकऽ ब्राउज़र म॑ तेज छै, आरू आपकऽ ब्राउज़र सामान्य आपक॑ लेली बहुत तरह के कार्यक्षमता प्रदान करै छै ।
ई सिद्धांत हमरऽ प्रथम श्रेणी के जावास्क्रिप्ट एपीआई dataविशेषता छै । हमरऽ जावास्क्रिप्ट प्लगइन के उपयोग करै लेली आपने क॑ लगभग कोनो जावास्क्रिप्ट लिखै के जरूरत नै छै; एकर बदला मे एचटीएमएल लिखू। एहि बारे मे बेसी पढ़ू हमर जावास्क्रिप्ट अवलोकन पृष्ठ पर .
अंत में, हमरऽ शैली आम वेब तत्वऽ के मौलिक व्यवहारऽ प॑ आधारित छै । जखन संभव होयत, हम ब्राउज़र जे उपलब्ध कराबैत अछि ओकर उपयोग करब पसंद करैत छी. जेना कि, आप .btnलगभग कोनो भी तत्व पर एक वर्ग डाल सकै छै, लेकिन अधिकांश तत्व कोनों शब्दार्थ मान या ब्राउज़र कार्यक्षमता प्रदान नै करै छै. अतः एकर बदला मे हम <button>s आ <a>s के प्रयोग करैत छी।
इएह बात बेसी जटिल घटकक लेल सेहो अछि। जबकि हम अपनऽ फॉर्म वैलिडेशन प्लगइन लिखी सकै:valid छियै ताकि एक इनपुट केरऽ स्टेट के आधार प॑ एक पैरेंट एलिमेंट म॑ क्लास जोड़लऽ जाय सक॑, जेकरा स॑ हम्मं॑ टेक्स्ट क॑ लाल कहै के स्टाइल करै के अनुमति मिल॑ सक॑, हम हर ब्राउज़र न॑ हमरा उपलब्ध करै वाला / :invalidpseudo-elements क॑ इस्तेमाल करना पसंद करै छियै ।
उपयोगिता वर्ग-पूर्व बूटस्ट्रैप 3 म॑ सहायक-सीएसएस ब्लोट आरू खराब पन्ना प्रदर्शन स॑ निपटै म॑ एगो शक्तिशाली सहयोगी छै । एक उपयोगिता वर्ग आम तौर पर एक एकल, अपरिवर्तनीय गुण-मूल्य युग्मन कक एक वर्ग (जैसे, .d-blockप्रततनिधधत्व display: block;) ककयका गयका हह | हुनकऽ प्राथमिक आकर्षण एचटीएमएल लिखै के दौरान उपयोग के गति आरू कस्टम सीएसएस के मात्रा क॑ सीमित करना छै जेकरा आपने क॑ लिखै के छै ।
विशेष रूप सं कस्टम सीएसएस कें संबंध मे, उपयोगिताअक अहां कें सब सं बेसि दोहराएल जाय वाला गुण-मूल्य जोड़ी कें एकल वर्गक मे कम करयत बढ़ैत फाइल आकार कें मुकाबला करय मे मदद कयर सकय छै. एकर नाटकीय प्रभाव पैमाना पर अहां के प्रोजेक्ट मे पड़ि सकैत अछि.
जबकि हमेशा संभव नै छै, हम घटकऽ लेली अपनऽ एचटीएमएल आवश्यकता म॑ अत्यधिक हठधर्मी होय स॑ बचै के कोशिश करै छियै । एहि तरहें, हम अपन सीएसएस चयनकर्ता मे एकल कक्षा पर ध्यान केंद्रित करैत छी आ तत्काल बच्चा चयनकर्ता ( ~) सँ बचबाक प्रयास करैत छी । ई आहाँ क॑ अपनऽ कार्यान्वयन म॑ अधिक लचीलापन दै छै आरू हमरऽ सीएसएस क॑ सरल आरू कम विशिष्ट रखै म॑ मदद करै छै ।