पहुॅंंच
बूटस्ट्रैप बनावे आ रखरखाव खातिर इस्तेमाल होखे वाला मार्गदर्शक सिद्धांत, रणनीति, आ तकनीक के बारे में जानीं जेहसे कि रउरा खुदे एकरा के अउरी आसानी से अनुकूलित आ विस्तार कर सकीलें.
जबकि शुरुआत करे के पन्ना सभ में प्रोजेक्ट के परिचयात्मक दौरा आ ई का पेश करे ला, ई दस्तावेज एह बात पर केंद्रित बा कि हमनी के बूटस्ट्रैप में करे वाला काम सभ के काहें करे लीं जा। एह में हमनी के दर्शन के वेब पर निर्माण करे के बारे में बतावल गइल बा जेहसे कि दोसरो लोग हमनी से सीख सके, हमनी का साथे योगदान दे सके, आ सुधारे में मदद कर सके.
कुछ अइसन देखत बानी जवन सही नइखे लागत, भा शायद एकरा से बढ़िया कइल जा सकेला? एगो मुद्दा खोलीं —हमनी के रउरा से एह पर चरचा कइल बहुते नीक लागी.
हमनी के पूरा में एह में से हर एक में अधिका गोता लगाइब जा, बाकिर उच्च स्तर पर, इहाँ हमनी के दृष्टिकोण के मार्गदर्शन करेला।
- घटक प्रतिक्रियाशील आ मोबाइल-पहिले होखे के चाहीं
- घटक सभ के आधार वर्ग के साथ बनावल जाय आ संशोधक वर्ग सभ के माध्यम से बिस्तार कइल जाय
- घटक राज्यन के एगो आम जेड-सूचकांक पैमाना के पालन करे के चाहीं
- जब भी संभव होखे, जावास्क्रिप्ट के बजाय एचटीएमएल आ सीएसएस के कार्यान्वयन पसंद करीं
- जब भी संभव होखे, कस्टम स्टाइल के ऊपर उपयोगिता के इस्तेमाल करीं
- जब भी संभव होखे, सख्त एचटीएमएल आवश्यकता (बच्चा चयनकर्ता) लागू करे से बची
बूटस्ट्रैप के रिस्पांसिव स्टाइल रिस्पांसिव होखे खातिर बनावल गइल बा, एगो अइसन तरीका जेकरा के अक्सर मोबाइल-फर्स्ट कहल जाला । हमनी के अपना डॉक्स में एह शब्द के इस्तेमाल करेनी जा आ एकरा से बहुत हद तक सहमत बानी जा, बाकिर कई बेर ई बहुते व्यापक हो सकेला. जबकि बूटस्ट्रैप में हर घटक के पूरा तरीका से रिस्पांसिव ना होखे के चाहीं, ई रिस्पांसिव तरीका व्यूपोर्ट बड़ होखे पर स्टाइल जोड़े खातिर धक्का दे के 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 में हेल्पर रहलें – CSS ब्लोट आ खराब पन्ना परफार्मेंस से निपटे में एगो शक्तिशाली सहयोगी हवें। उपयोगिता वर्ग आमतौर पर एकल, अपरिवर्तनीय गुण-मूल्य जोड़ी हवे जे क्लास के रूप में व्यक्त कइल जाला (उदाहरण खातिर, .d-blockप्रतिनिधित्व करे ला display: block;)। इनहन के प्राथमिक आकर्षण एचटीएमएल लिखत घरी इस्तेमाल के गति आ कस्टम सीएसएस के लिखे के मात्रा सीमित कइल बा।
खासतौर पर कस्टम CSS के संबंध में, यूटिलिटी सभ आपके सभसे ढेर दोहरावल जाए वाला प्रॉपर्टी-वैल्यू जोड़ी सभ के एकल क्लास में कम क के बढ़त फाइल साइज से निपटे में मदद क सके लीं। एकर रउरा प्रोजेक्टन में पैमाना पर नाटकीय असर पड़ सकेला.
हालांकि हमेशा संभव ना होखे, हमनी के कोशिश बा कि घटक खाती हमनी के एचटीएमएल आवश्यकता में जादे हठधर्मी होखे से बचे के चाही। एह तरह से, हमनी के अपना सीएसएस चयनकर्ता में एकल कक्षा पर ध्यान केंद्रित करेनी जा आ तुरंत बच्चा चयनकर्ता ( >) से बचे के कोशिश करेनी जा। एह से रउरा अपना कार्यान्वयन में अधिका लचीलापन मिलेला आ हमनी के सीएसएस के सरल आ कम विशिष्ट राखे में मदद मिलेला.