दृष्टिकोण

जखन कि शुरू करय कें पन्ना परियोजना कें परिचयात्मक भ्रमण आ इ की पेशकश करयत छै, इ दस्तावेज इ बात पर केंद्रित छै की हम बूटस्ट्रैप मे हम करय वाला काज कियाक करय छी. ई वेब पर निर्माण लेली हमरऽ दर्शन क॑ समझाबै छै ताकि दोसरऽ लोग हमरा स॑ सीख॑ सक॑, हमरा साथ योगदान करी सक॑, आरू सुधार म॑ मदद करी सक॑ ।

किछु एहन देखू जे सही नहि लागय, वा शायद एहि सं नीक काज भ' सकैत छल? कोनो मुद्दा खोलू —हमरा सभकेँ अहाँसँ चर्चा करब नीक लागत।

सार

हम एहि में सं प्रत्येक में बेसी गोता लगाएब पूरा में, मुदा उच्च स्तर पर, एतय हमर दृष्टिकोण के मार्गदर्शन करैत अछि.

• घटक प्रतिक्रियाशील आ मोबाइल-पहिने हेबाक चाही
• घटक कें एकटा आधार वर्ग कें साथ बनायल जेबाक चाही आ संशोधक वर्गक कें माध्यम सं विस्तारित कैल जेबाक चाही
• घटक राज्यक कें एकटा आम 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-सूचकांक पैमाने

बूटस्ट्रैप मे दूटा 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;) ककयका गयका हह | हुनकऽ प्राथमिक आकर्षण एचटीएमएल लिखै के दौरान उपयोग के गति आरू कस्टम सीएसएस के मात्रा क॑ सीमित करना छै जेकरा आपने क॑ लिखै के छै ।

विशेष रूप सं कस्टम सीएसएस कें संबंध मे, उपयोगिताअक अहां कें सब सं बेसि दोहराएल जाय वाला गुण-मूल्य जोड़ी कें एकल वर्गक मे कम करयत बढ़ैत फाइल आकार कें मुकाबला करय मे मदद कयर सकय छै. एकर नाटकीय प्रभाव पैमाना पर अहां के प्रोजेक्ट मे पड़ि सकैत अछि.

लचीला एचटीएमएल

जबकि हमेशा संभव नै छै, हम घटकऽ लेली अपनऽ एचटीएमएल आवश्यकता म॑ अत्यधिक हठधर्मी होय स॑ बचै के कोशिश करै छियै । एहि तरहें, हम अपन सीएसएस चयनकर्ता मे एकल कक्षा पर ध्यान केंद्रित करैत छी आ तत्काल बच्चा चयनकर्ता ( >) सँ बचबाक प्रयास करैत छी । ई आहाँ क॑ अपनऽ कार्यान्वयन म॑ अधिक लचीलापन दै छै आरू हमरऽ सीएसएस क॑ सरल आरू कम विशिष्ट रखै म॑ मदद करै छै ।

संहिता सम्मेलन

कोड गाइड (बूटस्ट्रैप सह-निर्माता, @mdo स) दस्तावेजीकरण करैत अछि जे हम कोना बूटस्ट्रैप भर मे अपन एचटीएमएल आ सीएसएस लिखैत छी | इ सामान्य प्रारूपण, सामान्य ज्ञान डिफ़ॉल्ट, गुण आ विशेषता आदेश, आ बेसि कें लेल दिशा निर्देश निर्दिष्ट करयत छै.

हम अपन Sass/CSS मे इ मानक आओर बेसि लागू करय कें लेल Stylelint कें उपयोग करय छी. हमरऽ कस्टम स्टाइललिंट कॉन्फ़िगरेशन ओपन सोर्स छै आरू दोसरऽ के उपयोग आरू विस्तार करै लेली उपलब्ध छै ।

हम मानक आरू शब्दार्थ एचटीएमएल क॑ लागू करै लेली, साथ ही आम त्रुटि के पता लगाबै लेली vnu-jar क॑ प्रयोग करै छियै ।