दृष्टिकोण

बूटस्ट्रैप बनाने और बनाए रखने के लिए उपयोग किए जाने वाले मार्गदर्शक सिद्धांतों, रणनीतियों और तकनीकों के बारे में जानें ताकि आप इसे अधिक आसानी से अनुकूलित और स्वयं बढ़ा सकें।

जबकि आरंभ करने वाले पृष्ठ परियोजना का एक परिचयात्मक दौरा प्रदान करते हैं और यह क्या प्रदान करता है, यह दस्तावेज़ इस बात पर ध्यान केंद्रित करता है कि हम बूटस्ट्रैप में जो काम करते हैं वह क्यों करते हैं। यह वेब पर निर्माण करने के लिए हमारे दर्शन की व्याख्या करता है ताकि दूसरे हमसे सीख सकें, हमारे साथ योगदान कर सकें और हमें बेहतर बनाने में मदद कर सकें।

कुछ ऐसा देखें जो सही नहीं लगता है, या शायद बेहतर किया जा सकता है? एक मुद्दा खोलें —हमें आपके साथ इस पर चर्चा करना अच्छा लगेगा।

सारांश

हम इनमें से प्रत्येक के बारे में अधिक विस्तार से चर्चा करेंगे, लेकिन उच्च स्तर पर, हमारे दृष्टिकोण का मार्गदर्शन करने वाली बातें यहां दी गई हैं।

• घटक उत्तरदायी और मोबाइल-प्रथम होना चाहिए
• घटकों को आधार वर्ग के साथ बनाया जाना चाहिए और संशोधक वर्गों के माध्यम से विस्तारित किया जाना चाहिए
• घटक राज्यों को एक सामान्य जेड-इंडेक्स स्केल का पालन करना चाहिए
• जब भी संभव हो, जावास्क्रिप्ट पर HTML और CSS कार्यान्वयन को प्राथमिकता दें
• जब भी संभव हो, कस्टम शैलियों पर उपयोगिताओं का उपयोग करें
• जब भी संभव हो, सख्त HTML आवश्यकताओं को लागू करने से बचें (बच्चों के चयनकर्ता)

उत्तरदायी

बूटस्ट्रैप की प्रतिक्रियाशील शैलियों को उत्तरदायी होने के लिए बनाया गया है, एक ऐसा दृष्टिकोण जिसे अक्सर मोबाइल-फर्स्ट के रूप में संदर्भित किया जाता है । हम अपने दस्तावेज़ों में इस शब्द का उपयोग करते हैं और इससे काफी हद तक सहमत हैं, लेकिन कभी-कभी यह बहुत व्यापक हो सकता है। जबकि बूटस्ट्रैप में हर घटक पूरी तरह से उत्तरदायी नहीं होना चाहिए, यह उत्तरदायी दृष्टिकोण सीएसएस ओवरराइड को कम करने के बारे में है, जिससे आपको शैलियों को जोड़ने के लिए प्रेरित किया जाता है क्योंकि व्यूपोर्ट बड़ा हो जाता है।

बूटस्ट्रैप में, आप इसे हमारे मीडिया प्रश्नों में सबसे स्पष्ट रूप से देखेंगे। ज्यादातर मामलों में, हम उन min-widthप्रश्नों का उपयोग करते हैं जो एक विशिष्ट ब्रेकपॉइंट पर लागू होने लगते हैं और उच्च ब्रेकप्वाइंट के माध्यम से आगे बढ़ते हैं। उदाहरण के लिए, एक अनंत .d-noneसे लागू होता है । min-width: 0दूसरी ओर, a .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मूल्य को इस तरह से थोड़ा बढ़ा देता है कि सामान्य UI सिद्धांत उपयोगकर्ता को केंद्रित या होवर किए गए तत्वों को हर समय देखने की अनुमति देते हैं। उदाहरण के लिए, एक मोडल दस्तावेज़ ब्लॉकिंग है (उदाहरण के लिए, आप मोडल की कार्रवाई के अलावा कोई अन्य कार्रवाई नहीं कर सकते हैं), इसलिए हम इसे अपने नेवबार के ऊपर रखते हैं।

इसके बारे में हमारे z-indexलेआउट पेज में और जानें ।

जेएस पर एचटीएमएल और सीएसएस

जब भी संभव हो, हम जावास्क्रिप्ट पर HTML और CSS लिखना पसंद करते हैं। सामान्य तौर पर, HTML और CSS सभी अलग-अलग अनुभव स्तरों के अधिक लोगों के लिए अधिक विपुल और सुलभ हैं। जावास्क्रिप्ट की तुलना में आपके ब्राउज़र में HTML और CSS भी तेज़ हैं, और आपका ब्राउज़र आम तौर पर आपके लिए बहुत अधिक कार्यक्षमता प्रदान करता है।

यह सिद्धांत dataविशेषताओं का उपयोग करने वाला हमारा प्रथम श्रेणी का जावास्क्रिप्ट एपीआई है। हमारे जावास्क्रिप्ट प्लगइन्स का उपयोग करने के लिए आपको लगभग कोई जावास्क्रिप्ट लिखने की आवश्यकता नहीं है; इसके बजाय, HTML लिखें। इसके बारे में हमारे जावास्क्रिप्ट अवलोकन पृष्ठ में और पढ़ें ।

अंत में, हमारी शैलियाँ सामान्य वेब तत्वों के मूलभूत व्यवहारों पर निर्मित होती हैं। जब भी संभव हो, हम ब्राउज़र द्वारा प्रदान की जाने वाली चीज़ों का उपयोग करना पसंद करते हैं। उदाहरण के लिए, आप .btnलगभग किसी भी तत्व पर एक वर्ग रख सकते हैं, लेकिन अधिकांश तत्व कोई अर्थपूर्ण मूल्य या ब्राउज़र कार्यक्षमता प्रदान नहीं करते हैं। तो इसके बजाय, हम <button>s और <a>s का उपयोग करते हैं।

वही अधिक जटिल घटकों के लिए जाता है। जबकि हम इनपुट की स्थिति के आधार पर मूल तत्व में कक्षाएं जोड़ने के लिए अपना स्वयं का फॉर्म सत्यापन प्लगइन लिख सकते हैं, जिससे हमें टेक्स्ट को लाल रंग में स्टाइल करने की इजाजत मिलती है, हम प्रत्येक ब्राउज़र द्वारा हमें प्रदान किए जाने वाले :valid/ :invalidछद्म तत्वों का उपयोग करना पसंद करते हैं।

उपयोगिताओं

उपयोगिता वर्ग - बूटस्ट्रैप 3 में पूर्व में सहायक - सीएसएस ब्लोट और खराब पृष्ठ प्रदर्शन का मुकाबला करने में एक शक्तिशाली सहयोगी हैं। एक उपयोगिता वर्ग आम तौर पर एक एकल, अपरिवर्तनीय संपत्ति-मूल्य जोड़ी एक वर्ग के रूप में व्यक्त किया जाता है (उदाहरण के लिए, .d-blockप्रतिनिधित्व करता display: block;है)। उनकी प्राथमिक अपील HTML लिखते समय उपयोग की गति और आपके द्वारा लिखे जाने वाले कस्टम CSS की मात्रा को सीमित करना है।

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

लचीला HTML

जबकि हमेशा संभव नहीं होता, हम घटकों के लिए अपनी HTML आवश्यकताओं में अत्यधिक हठधर्मी होने से बचने का प्रयास करते हैं। इस प्रकार, हम अपने सीएसएस चयनकर्ताओं में एकल कक्षाओं पर ध्यान केंद्रित करते हैं और तत्काल बच्चों के चयनकर्ताओं ( >) से बचने की कोशिश करते हैं। यह आपको अपने कार्यान्वयन में अधिक लचीलापन देता है और हमारे सीएसएस को सरल और कम विशिष्ट रखने में मदद करता है।

कोड सम्मेलन

कोड गाइड (बूटस्ट्रैप को-क्रिएटर, @mdo से) यह दस्तावेज करता है कि हम अपने HTML और CSS को बूटस्ट्रैप में कैसे लिखते हैं। यह सामान्य स्वरूपण, सामान्य ज्ञान चूक, संपत्ति और विशेषता आदेश, और बहुत कुछ के लिए दिशानिर्देश निर्दिष्ट करता है।

हम अपने Sass/CSS में इन मानकों और अधिक को लागू करने के लिए Stylelint का उपयोग करते हैं। हमारा कस्टम Stylelint कॉन्फ़िगरेशन खुला स्रोत है और दूसरों के उपयोग और विस्तार के लिए उपलब्ध है।

हम मानक और अर्थपूर्ण HTML को लागू करने के साथ-साथ सामान्य त्रुटियों का पता लगाने के लिए vnu-jar का उपयोग करते हैं।