नजरिया
बूटस्ट्रैप बनाने ते बनाए रखने लेई इस्तेमाल कीते गेदे मार्गदर्शक सिद्धांतें, रणनीतियें, ते तकनीकें दे बारे च जानने लेई तां जे तुस इसगी होर बी आसानी कन्नै अनुकूलित ते अपने आपै गी विस्तार करी सकदे ओ।
जदके शुरू करने दे पन्नें प्रोजेक्ट दा इक परिचयात्मक दौरा ते एह् केह् पेश करदा ऐ, तां एह् दस्तावेज इस गल्लै पर ध्यान केंद्रत करदा ऐ जे अस बूटस्ट्रैप च कीते गेदे कम्में गी कीऽ करदे आं। एह् वेब पर निर्माण करने आस्तै साढ़े दर्शन गी समझा करदा ऐ तां जे दुए साढ़े कोला सिक्खी सकन, साढ़े कन्नै योगदान देई सकन, ते साढ़ी सुधार च मदद करी सकन।
कोई ऐसी गल्ल दिक्खो जेह्ड़ी ठीक नेईं लगदी, जां शायद इस थमां बी बेहतर कीता जाई सकदा ऐ? इक मुद्दा खोलो —अस तुंदे कन्ने इस पर चर्चा करना बड़ा पसंद करगे।
सार
अस पूरे च इन्हें च हर इक च होर गोता लागे, पर उच्चे स्तर पर, इत्थें एह् ऐ जे साढ़े दृष्टिकोण गी मार्गदर्शन करदा ऐ।
- घटक प्रतिक्रियाशील ते मोबाइल-पहले होन चाहिदे न
- घटकें गी इक आधार वर्ग कन्नै बनाया जाना चाहिदा ते संशोधक वर्गें दे राहें विस्तार कीता जाना चाहिदा
- घटक राज्यें गी इक आम जेड-सूचकांक पैमाने दा पालन करना चाहिदा
- जदूं बी होई सकै, जावास्क्रिप्ट थमां इक HTML ते CSS लागू करना पसंद करो
- जदूं बी होई सकै, कस्टम शैलियें उप्पर उपयोगिताएं दा इस्तेमाल करो
- जदूं बी होई सकै, सख्त HTML शर्तें गी लागू करने थमां बचो (बच्चें दे चयनकर्ताएं)
जवाबदेही
बूटस्ट्रैप दी प्रतिक्रियाशील शैलियां प्रतिक्रियाशील होने आस्तै बनाई गेदियां न , इक ऐसा दृष्टिकोण जेह् ड़ा अक्सर मोबाइल-पैह् ले आखेआ जंदा ऐ . अस इस शब्द दा इस्तेमाल अपने डॉक्स च करदे आं ते इस कन्नै बड्डे पैमाने पर सहमत आं, पर कदें-कदें एह् मता व्यापक बी होई सकदा ऐ। जदके बूटस्ट्रैप च हर इक घटक गी पूरी चाल्ली प्रतिक्रियाशील नेईं होना चाहिदा ऐ , एह् प्रतिक्रियाशील तरीका तुसेंगी शैलियें गी जोड़ने लेई धक्का देइयै 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लेआउट पेज पर जाओ .
जेएस पर एचटीएमएल ते सीएसएस
जदूं बी होई सकै, अस जावास्क्रिप्ट उप्पर एचटीएमएल ते सीएसएस लिखना पसंद करदे आं। आमतौर उप्पर, एचटीएमएल ते सीएसएस सारें बक्ख-बक्ख अनुभव स्तरें दे मते सारे लोकें लेई मता प्रखर ते सुलभ न। HTML ते CSS बी तुंदे ब्राउज़र च जावास्क्रिप्ट थमां बी तेज़ न, ते तुंदा ब्राउज़र आमतौर पर तुंदे आस्तै मती फ़ंक्शनलटी प्रदान करदा ऐ।
एह् सिद्धांत dataऐट्रिब्यूटें दा इस्तेमाल करदे होई साढ़ा पैह् ली श्रेणी दा जावास्क्रिप्ट एपीआई ऐ। साढ़े जावास्क्रिप्ट प्लगइन्स दा इस्तेमाल करने आस्तै तुसेंगी लगभग कुसै बी जावास्क्रिप्ट लिखने दी लोड़ नेईं ऐ; इसदे बजाय, एचटीएमएल लिखो। इसदे बारे च होर मता पढ़ो साढ़े जावास्क्रिप्ट अवलोकन पृष्ठ पर .
आखरी च, साढ़ी शैलियां आम वेब तत्वें दे बुनियादी व्यवहारें उप्पर आधारित न। जदूं बी होई सकै, अस जेह् ड़ा ब्राउज़र उपलब्ध करोआंदा ऐ उसी बरतना पसंद करदे आं। मसाल आस्तै, तुस .btnलगभग कुसै बी तत्व पर इक वर्ग पाई सकदे ओ, पर मते सारे तत्व कुसै बी शब्दार्थ मूल्य जां ब्राउज़र दी कार्यक्षमता नेईं दिंदे न. तो इसदे बजाय, अस <button>एस ते <a>एस दा इस्तेमाल करदे आं।
होर जटिल घटकें लेई बी इयै हाल ऐ। जदके अस इक इनपुट दी स्थिति दे आधार उप्पर इक पैरेंट तत्व च क्लासें गी जोड़ने आस्तै अपना खुद दा फार्म सत्यापन प्लगइन लिखी सकदे आं , जिसदे कन्नै असेंगी पाठ गी लाल आखने दी शैली बनाने दी अनुमति मिलदी ऐ , अस हर ब्राउज़र असेंगी उपलब्ध करोआने आह् ले :valid/ छद्म-तत्वें दा इस्तेमाल करना पसंद करने आं ।:invalid
उपयोगिताएं दा
उपयोगिता वर्गें-पैह् ले बूटस्ट्रैप 3 च मददगार-CSS ब्लोट ते खराब पृष्ठ प्रदर्शन कन्नै निबड़ने च इक शक्तिशाली सहयोगी न। इक उपयोगिता वर्ग आमतौर पर इक इकल, अपरिवर्तनीय संपत्ति-मूल्य जोड़ी ऐ जेह् ड़ी इक वर्ग दे रूप च व्यक्त कीती जंदी ऐ (जियां, .d-blockप्रतिनिधित्व करदा ऐ display: block;) । उंदी प्राथमिक अपील एचटीएमएल लिखदे बेल्लै इस्तेमाल दी गति ते तुसेंगी लिखने आह् ले कस्टम सीएसएस दी मात्रा गी सीमित करना ऐ।
खास करियै कस्टम CSS दे बारे च, उपयोगिताएं तुंदे सारें शा मते बार-बार होने आह् ले संपत्ति-मूल्य जोड़े गी इकल वर्गें च घट्ट करियै बधदे फाइल आकार कन्नै लड़ने च मदद करी सकदियां न. इसदा तुंदे प्रोजेक्टें च पैमाने पर नाटकीय असर पेई सकदा ऐ।
लचीला एचटीएमएल
जदके हमेशा संभव नेईं ऐ, अस घटकें लेई अपनी HTML जरूरतें च मता हठधर्मी होने थमां बचने दी कोशश करने आं। इस चाल्लीं, अस अपने सीएसएस चयनकर्ताएं च इकल कक्षाएं पर ध्यान दिंदे न ते फौरी बच्चें चयनकर्ताएं थमां बचने दी कोशश करदे आं ( >) । एह् तुसेंगी अपने लागू करने च मता लचीलापन दिंदा ऐ ते साढ़े CSS गी सरल ते कम विशिष्ट रखने च मदद करदा ऐ।
कोड कन्वेंशन
कोड गाइड (बूटस्ट्रैप सह-निर्माता, @mdo थमां) दस्तावेज करदा ऐ जे अस किस चाल्ली बूटस्ट्रैप भर च अपना HTML ते CSS लिखने आं। एह् सामान्य स्वरूपण, सामान्य ज्ञान डिफाल्ट, संपत्ति ते विशेषता आर्डर, ते होर मते आस्तै दिशा-निर्देश निर्दिश्ट करदा ऐ.
अस अपने Sass/CSS च इनें मानकें ते होर मते गी लागू करने आस्तै Stylelint दा इस्तेमाल करदे आं। साढ़ा कस्टम स्टाइलिंट कॉन्फ़िगरेशन ओपन सोर्स ऐ ते दूएं गी बरतून करने ते विस्तार करने आस्तै उपलब्ध ऐ।
अस मानक ते शब्दार्थ HTML गी लागू करने दे कन्नै-कन्नै आम त्रुटिएं दा पता लाने आस्तै vnu-jar दा इस्तेमाल करदे आं।