नजरिया
बूटस्ट्रैप बनाने ते बनाए रखने लेई इस्तेमाल कीते गेदे मार्गदर्शक सिद्धांतें, रणनीतियें, ते तकनीकें दे बारे च जानने लेई तां जे तुस इसगी होर बी आसानी कन्नै अनुकूलित ते अपने आपै गी विस्तार करी सकदे ओ।
जदके शुरू करने दे पन्नें प्रोजेक्ट दा इक परिचयात्मक दौरा ते एह् केह् पेश करदा ऐ, तां एह् दस्तावेज इस गल्लै पर ध्यान केंद्रत करदा ऐ जे अस बूटस्ट्रैप च कीते गेदे कम्में गी कीऽ करदे आं। एह् वेब पर निर्माण करने आस्तै साढ़े दर्शन गी समझा करदा ऐ तां जे दुए साढ़े कोला सिक्खी सकन, साढ़े कन्नै योगदान देई सकन, ते साढ़ी सुधार च मदद करी सकन।
कोई ऐसी गल्ल दिक्खो जेह्ड़ी ठीक नेईं लगदी, जां शायद इस थमां बी बेहतर कीता जाई सकदा ऐ? इक मुद्दा खोलो —अस तुंदे कन्ने इस पर चर्चा करना बड़ा पसंद करगे।
सार
अस पूरे च इन्हें च हर इक च होर गोता लागे, पर उच्च स्तर उप्पर, इत्थें एह् ऐ जेह्ड़ा साढ़े दृष्टिकोण गी मार्गदर्शन करदा ऐ।
- घटक प्रतिक्रियाशील ते मोबाइल-पहले होन चाहिदे न
- घटकें गी इक आधार वर्ग कन्नै बनाया जाना चाहिदा ते संशोधक वर्गें दे राहें विस्तार कीता जाना चाहिदा
- घटक राज्यें गी इक आम जेड-सूचकांक पैमाने दा पालन करना चाहिदा
- जदूं बी होई सकै, जावास्क्रिप्ट थमां इक 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.- एह् पद्धति उच्चतम उपयोगकर्ता प्राथमिकता दी साढ़ी उम्मीदें कन्नै मेल खंदा ऐ। जेकर कोई तत्व केंद्रित ऐ तां ओह् दृष्टिकोण च ते बरतूनी दे ध्यान च ऐ। सक्रिय तत्व दूए उच्चतम न कीजे एह् स्थिति गी दर्शांदे न । होवर त्रीया उच्चतम ऐ की जे एह् बरतूनी दे इरादे गी दर्शांदा ऐ , पर लगभग कुसै बी चीज़ गी होवर कीता जाई सकदा ऐ ।
ओवरले घटक
Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index scale that begins at 1000. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.
Each overlay component increases its z-index value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.
Learn more about this in our z-index layout page.
HTML and CSS over JS
Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.
The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.
Utilities
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
Flexible HTML
जदके हमेशा संभव नेईं ऐ, अस घटकें लेई अपनी HTML जरूरतें च मता हठधर्मी होने थमां बचने दी कोशश करने आं। इस चाल्लीं, अस अपने सीएसएस चयनकर्ताएं च इकल कक्षाएं पर ध्यान दिंदे न ते फौरी बच्चें चयनकर्ताएं थमां बचने दी कोशश करदे आं ( >) । एह् तुसेंगी अपने लागू करने च मता लचीलापन दिंदा ऐ ते साढ़े CSS गी सरल ते कम विशिष्ट रखने च मदद करदा ऐ।