पहुॅंंच
बूटस्ट्रैप बनावे आ रखरखाव खातिर इस्तेमाल होखे वाला मार्गदर्शक सिद्धांत, रणनीति, आ तकनीक के बारे में जानीं जेहसे कि रउरा खुदे एकरा के अउरी आसानी से अनुकूलित आ विस्तार कर सकीलें.
जबकि शुरुआत करे के पन्ना सभ में प्रोजेक्ट के परिचयात्मक दौरा आ ई का पेश करे ला, ई दस्तावेज एह बात पर केंद्रित बा कि हमनी के बूटस्ट्रैप में करे वाला काम सभ के काहें करे लीं जा। एह में हमनी के दर्शन के वेब पर निर्माण करे के बारे में बतावल गइल बा जेहसे कि दोसरो लोग हमनी से सीख सके, हमनी का साथे योगदान दे सके, आ सुधारे में मदद कर सके.
कुछ अइसन देखत बानी जवन सही नइखे लागत, भा शायद एकरा से बढ़िया कइल जा सकेला? एगो मुद्दा खोलीं —हमनी के रउरा से एह पर चरचा कइल बहुते नीक लागी.
सारांश
हमनी के पूरा में एह में से हर एक में अधिका गोता लगाइब जा, बाकिर उच्च स्तर पर, इहाँ हमनी के दृष्टिकोण के मार्गदर्शन करेला।
- घटक प्रतिक्रियाशील आ मोबाइल-पहिले होखे के चाहीं
- घटक सभ के आधार वर्ग के साथ बनावल जाय आ संशोधक वर्ग सभ के माध्यम से बिस्तार कइल जाय
- घटक राज्यन के एगो आम जेड-सूचकांक पैमाना के पालन करे के चाहीं
- जब भी संभव होखे, जावास्क्रिप्ट के बजाय एचटीएमएल आ सीएसएस के कार्यान्वयन पसंद करीं
- जब भी संभव होखे, कस्टम स्टाइल के ऊपर उपयोगिता के इस्तेमाल करीं
- जब भी संभव होखे, सख्त एचटीएमएल आवश्यकता (बच्चा चयनकर्ता) लागू करे से बची
जवाबदेह बा
बूटस्ट्रैप के रिस्पांसिव स्टाइल रिस्पांसिव होखे खातिर बनावल गइल बा, एगो अइसन तरीका जेकरा के अक्सर मोबाइल-फर्स्ट कहल जाला । हमनी के अपना डॉक्स में एह शब्द के इस्तेमाल करेनी जा आ एकरा से बहुत हद तक सहमत बानी जा, बाकिर कई बेर ई बहुते व्यापक हो सकेला. जबकि बूटस्ट्रैप में हर घटक के पूरा तरीका से रिस्पांसिव ना होखे के चाहीं, ई रिस्पांसिव तरीका व्यूपोर्ट बड़ होखे पर स्टाइल जोड़े खातिर धक्का दे के 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 is random and serves as a small buffer between our styles and your project’s custom styles.
Each overlay component increases it’s 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 is 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
हालांकि हमेशा संभव ना होखे, हमनी के कोशिश बा कि घटक खाती हमनी के एचटीएमएल आवश्यकता में जादे हठधर्मी होखे से बचे के चाही। एह तरह से, हमनी के अपना सीएसएस चयनकर्ता में एकल कक्षा पर ध्यान केंद्रित करेनी जा आ तुरंत बच्चा चयनकर्ता ( >) से बचे के कोशिश करेनी जा। एह से रउरा अपना कार्यान्वयन में अधिका लचीलापन मिलेला आ हमनी के सीएसएस के सरल आ कम विशिष्ट राखे में मदद मिलेला.