ग्रिड प्रणाली
बारह कॉलम सिस्टम, पांच डिफ़ॉल्ट रिस्पॉन्सिव टियर, सैस वेरिएबल्स और मिक्सिन और दर्जनों पूर्वनिर्धारित कक्षाओं के लिए धन्यवाद, सभी आकारों और आकारों के लेआउट बनाने के लिए हमारे शक्तिशाली मोबाइल-फर्स्ट फ्लेक्सबॉक्स ग्रिड का उपयोग करें।
बूटस्ट्रैप का ग्रिड सिस्टम सामग्री को लेआउट और संरेखित करने के लिए कंटेनरों, पंक्तियों और स्तंभों की एक श्रृंखला का उपयोग करता है। यह फ्लेक्सबॉक्स के साथ बनाया गया है और पूरी तरह उत्तरदायी है। नीचे एक उदाहरण दिया गया है और गहराई से देखें कि ग्रिड कैसे एक साथ आता है।
फ्लेक्सबॉक्स के लिए नया या अपरिचित? पृष्ठभूमि, शब्दावली, दिशानिर्देश और कोड स्निपेट के लिए इस CSS ट्रिक्स फ्लेक्सबॉक्स गाइड को पढ़ें ।
उपरोक्त उदाहरण हमारे पूर्वनिर्धारित ग्रिड वर्गों का उपयोग करके छोटे, मध्यम, बड़े और अतिरिक्त बड़े उपकरणों पर तीन समान-चौड़ाई वाले कॉलम बनाता है। वे कॉलम पेरेंट के साथ पेज में केंद्रित होते हैं .container
।
इसे तोड़कर, यहां बताया गया है कि यह कैसे काम करता है:
- कंटेनर आपकी साइट की सामग्री को केंद्र में रखने और क्षैतिज रूप से पैड करने का एक साधन प्रदान करते हैं।
.container
प्रतिक्रियाशील पिक्सेल चौड़ाई.container-fluid
के लिए याwidth: 100%
सभी व्यूपोर्ट और डिवाइस आकारों के लिए उपयोग करें । - पंक्तियाँ स्तंभों के लिए आवरण हैं। प्रत्येक स्तंभ में
padding
उनके बीच की जगह को नियंत्रित करने के लिए क्षैतिज (गटर कहा जाता है) होता है। इसकेpadding
बाद नकारात्मक मार्जिन वाली पंक्तियों पर इसका प्रतिकार किया जाता है। इस तरह, आपके कॉलम की सभी सामग्री को बाईं ओर नीचे की ओर दृष्टिगत रूप से संरेखित किया जाता है। - ग्रिड लेआउट में, सामग्री को कॉलम के भीतर रखा जाना चाहिए और केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं।
- फ्लेक्सबॉक्स के लिए धन्यवाद, बिना किसी निर्दिष्ट के ग्रिड कॉलम
width
स्वचालित रूप से समान चौड़ाई वाले कॉलम के रूप में लेआउट करेंगे। उदाहरण के लिए,.col-sm
वसीयत के चार उदाहरण छोटे ब्रेकपॉइंट और ऊपर से स्वचालित रूप से 25% चौड़े होंगे। अधिक उदाहरणों के लिए ऑटो-लेआउट कॉलम अनुभाग देखें । - स्तंभ वर्ग संभावित 12 प्रति पंक्ति में से उन स्तंभों की संख्या को इंगित करते हैं जिनका आप उपयोग करना चाहते हैं। इसलिए, यदि आप तीन समान-चौड़ाई वाले कॉलम चाहते हैं, तो आप इसका उपयोग कर सकते हैं
.col-4
। - कॉलम
width
s प्रतिशत में सेट हैं, इसलिए वे हमेशा अपने मूल तत्व के सापेक्ष तरल और आकार के होते हैं। padding
कॉलम में अलग-अलग कॉलम के बीच गटर बनाने के लिए क्षैतिज होते हैं, हालांकि, आपmargin
पंक्तियोंpadding
से और कॉलम से.no-gutters
को हटा सकते हैं.row
।- ग्रिड को प्रतिक्रियाशील बनाने के लिए, पांच ग्रिड ब्रेकपॉइंट हैं, प्रत्येक उत्तरदायी ब्रेकपॉइंट के लिए एक : सभी ब्रेकपॉइंट (अतिरिक्त छोटे), छोटे, मध्यम, बड़े और अतिरिक्त बड़े।
- ग्रिड ब्रेकप्वाइंट न्यूनतम चौड़ाई वाले मीडिया प्रश्नों पर आधारित होते हैं, जिसका अर्थ है कि वे उस एक ब्रेकपॉइंट और इसके ऊपर के सभी पर लागू होते हैं (उदाहरण के लिए,
.col-sm-4
छोटे, मध्यम, बड़े और अतिरिक्त बड़े उपकरणों पर लागू होते हैं, लेकिन पहलेxs
ब्रेकपॉइंट पर नहीं)। - अधिक सिमेंटिक मार्कअप के लिए आप पूर्वनिर्धारित ग्रिड क्लासेस (जैसे
.col-4
) या सैस मिक्सिन का उपयोग कर सकते हैं।
फ्लेक्सबॉक्स के आसपास की सीमाओं और बगों से अवगत रहें , जैसे कुछ HTML तत्वों को फ्लेक्स कंटेनर के रूप में उपयोग करने में असमर्थता ।
जबकि बूटस्ट्रैप अधिकांश आकारों को परिभाषित करने के लिए em
s या s का उपयोग करता है, s का उपयोग ग्रिड ब्रेकप्वाइंट और कंटेनर चौड़ाई के लिए किया जाता है। ऐसा इसलिए है क्योंकि व्यूपोर्ट की चौड़ाई पिक्सेल में है और फ़ॉन्ट आकार के साथ नहीं बदलती है ।rem
px
देखें कि बूटस्ट्रैप ग्रिड सिस्टम के पहलू एक आसान तालिका के साथ कई उपकरणों पर कैसे काम करते हैं।
अतिरिक्त छोटा <576px |
छोटा 576px |
मध्यम 768px |
बड़ा 992px |
अतिरिक्त बड़ा ≥1200px |
|
---|---|---|---|---|---|
अधिकतम कंटेनर चौड़ाई | कोई नहीं (ऑटो) | 540px | 720px | 960px | 1140पीएक्स |
कक्षा उपसर्ग | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# कॉलम | 12 | ||||
नाले की चौड़ाई | 30px (एक कॉलम के प्रत्येक तरफ 15px) | ||||
नेस्टेबल | हाँ | ||||
कॉलम ऑर्डरिंग | हाँ |
स्पष्ट क्रमांकित वर्ग जैसे .col-sm-6
.
उदाहरण के लिए, यहां दो ग्रिड लेआउट दिए गए हैं जो प्रत्येक डिवाइस और व्यूपोर्ट पर लागू होते हैं, xs
से xl
. आपको आवश्यक प्रत्येक ब्रेकपॉइंट के लिए किसी भी संख्या में यूनिट-कम कक्षाएं जोड़ें और प्रत्येक कॉलम समान चौड़ाई का होगा।
समान-चौड़ाई वाले स्तंभों को कई पंक्तियों में तोड़ा जा सकता है, लेकिन एक सफारी फ्लेक्सबॉक्स बग था जो इसे स्पष्ट flex-basis
या border
. पुराने ब्राउज़र संस्करणों के लिए वर्कअराउंड हैं, लेकिन यदि आप अप-टू-डेट हैं तो वे आवश्यक नहीं होने चाहिए।
फ्लेक्सबॉक्स ग्रिड कॉलम के लिए ऑटो-लेआउट का मतलब यह भी है कि आप एक कॉलम की चौड़ाई निर्धारित कर सकते हैं और इसके चारों ओर सिबलिंग कॉलम स्वचालित रूप से आकार बदल सकते हैं। आप पूर्वनिर्धारित ग्रिड कक्षाओं (जैसा कि नीचे दिखाया गया है), ग्रिड मिक्सिन या इनलाइन चौड़ाई का उपयोग कर सकते हैं। ध्यान दें कि केंद्र कॉलम की चौड़ाई से कोई फर्क नहीं पड़ता अन्य कॉलम का आकार बदल जाएगा।
col-{breakpoint}-auto
उनकी सामग्री की प्राकृतिक चौड़ाई के आधार पर स्तंभों को आकार देने के लिए कक्षाओं का उपयोग करें ।
समान-चौड़ाई वाले कॉलम बनाएं, जो कई पंक्तियों को फैलाते हैं .w-100
, जहां आप चाहते हैं कि कॉलम एक नई लाइन में टूट जाएं। .w-100
कुछ रिस्पॉन्सिव डिस्प्ले यूटिलिटीज के साथ मिलाकर ब्रेक्स को रिस्पॉन्सिव बनाएं ।
बूटस्ट्रैप के ग्रिड में जटिल उत्तरदायी लेआउट बनाने के लिए पूर्वनिर्धारित कक्षाओं के पांच स्तर शामिल हैं। अतिरिक्त छोटे, छोटे, मध्यम, बड़े, या अतिरिक्त बड़े उपकरणों पर अपने कॉलम के आकार को अनुकूलित करें, हालांकि आप फिट देखते हैं।
ग्रिड के लिए जो छोटे उपकरणों से लेकर सबसे बड़े तक समान हैं, .col
और .col-*
कक्षाओं का उपयोग करें। जब आपको विशेष आकार के कॉलम की आवश्यकता हो तो एक क्रमांकित वर्ग निर्दिष्ट करें; अन्यथा, बेझिझक चिपके रहें .col
।
कक्षाओं के एक सेट का उपयोग करके .col-sm-*
, आप एक बुनियादी ग्रिड सिस्टम बना सकते हैं जो स्टैक से शुरू होता है और छोटे ब्रेकपॉइंट ( sm
) पर क्षैतिज हो जाता है।
क्या आप नहीं चाहते कि आपके कॉलम कुछ ग्रिड स्तरों में बस ढेर हो जाएं? आवश्यकतानुसार प्रत्येक स्तर के लिए विभिन्न वर्गों के संयोजन का उपयोग करें। यह सब कैसे काम करता है, इसके बेहतर विचार के लिए नीचे दिया गया उदाहरण देखें।
कॉलम को लंबवत और क्षैतिज रूप से संरेखित करने के लिए फ्लेक्सबॉक्स संरेखण उपयोगिताओं का उपयोग करें।
हमारे पूर्वनिर्धारित ग्रिड वर्गों में स्तंभों के बीच के गटर को .no-gutters
. यह सभी तत्काल चिल्ड्रन कॉलम से नकारात्मक margin
s .row
और क्षैतिज को हटा देता है।padding
इन शैलियों को बनाने के लिए स्रोत कोड यहां दिया गया है। ध्यान दें कि कॉलम ओवरराइड केवल पहले चिल्ड्रन कॉलम तक सीमित हैं और विशेषता चयनकर्ता के माध्यम से लक्षित हैं । हालांकि यह एक अधिक विशिष्ट चयनकर्ता उत्पन्न करता है, फिर भी कॉलम पैडिंग को स्पेसिंग यूटिलिटीज के साथ और भी अनुकूलित किया जा सकता है ।
एज-टू-एज डिज़ाइन की आवश्यकता है? माता-पिता को छोड़ें .container
या .container-fluid
.
व्यवहार में, यह कैसा दिखता है। ध्यान दें कि आप अन्य सभी पूर्वनिर्धारित ग्रिड वर्गों (स्तंभ की चौड़ाई, प्रतिक्रियाशील स्तरों, पुन: क्रम, और अधिक सहित) के साथ इसका उपयोग करना जारी रख सकते हैं।
यदि एक पंक्ति में 12 से अधिक कॉलम रखे जाते हैं, तो अतिरिक्त कॉलम का प्रत्येक समूह, एक इकाई के रूप में, एक नई लाइन पर लपेट जाएगा।
9 + 4 = 13> 12 के बाद से, यह 4-स्तंभ-चौड़ा डिव एक नई लाइन पर एक सन्निहित इकाई के रूप में लिपट जाता है।
बाद के कॉलम नई लाइन के साथ जारी हैं।
फ्लेक्सबॉक्स में कॉलम को एक नई लाइन में तोड़ने के लिए एक छोटी सी हैक की आवश्यकता होती है: width: 100%
जहां भी आप अपने कॉलम को एक नई लाइन में लपेटना चाहते हैं, वहां एक तत्व जोड़ें। आम तौर पर यह कई .row
s के साथ पूरा किया जाता है, लेकिन प्रत्येक कार्यान्वयन विधि इसके लिए जिम्मेदार नहीं हो सकती है।
आप इस ब्रेक को हमारी प्रतिक्रियाशील प्रदर्शन उपयोगिताओं के साथ विशिष्ट ब्रेकप्वाइंट पर भी लागू कर सकते हैं ।
अपनी सामग्री के दृश्य क्रम.order-
को नियंत्रित करने के लिए कक्षाओं का उपयोग करें । ये कक्षाएं उत्तरदायी हैं, इसलिए आप ब्रेकपॉइंट (जैसे, ) द्वारा सेट कर सकते हैं। सभी पांच ग्रिड स्तरों के माध्यम से समर्थन शामिल है ।order
.order-1.order-md-2
1
12
ऐसे प्रतिक्रियाशील .order-first
और .order-last
वर्ग भी होते हैं जो क्रमशः और ( ) order
को लागू करके किसी तत्व को बदलते हैं। इन वर्गों को आवश्यकतानुसार क्रमांकित वर्गों के साथ भी मिलाया जा सकता है।order: -1
order: 13
order: $columns + 1
.order-*
आप ग्रिड कॉलम को दो तरह से ऑफसेट कर सकते हैं: हमारी प्रतिक्रियाशील .offset-
ग्रिड क्लासेस और हमारी मार्जिन यूटिलिटीज । ग्रिड वर्गों का आकार कॉलम से मेल खाने के लिए होता है जबकि मार्जिन त्वरित लेआउट के लिए अधिक उपयोगी होते हैं जहां ऑफ़सेट की चौड़ाई परिवर्तनशील होती है।
.offset-md-*
कक्षाओं का उपयोग करके कॉलम को दाईं ओर ले जाएं । ये वर्ग कॉलम के बाएं मार्जिन को कॉलम से बढ़ाते *
हैं। उदाहरण के लिए, चार स्तंभों पर .offset-md-4
चलता है।.col-md-4
प्रतिक्रियाशील विराम बिंदुओं पर स्तंभ समाशोधन के अलावा, आपको ऑफ़सेट रीसेट करने की आवश्यकता हो सकती है। इसे ग्रिड उदाहरण में क्रिया में देखें ।
v4 में फ्लेक्सबॉक्स में जाने के साथ, आप मार्जिन उपयोगिताओं का उपयोग कर सकते हैं जैसे .mr-auto
कि सिबलिंग कॉलम को एक दूसरे से दूर करने के लिए मजबूर करना।
अपनी सामग्री को डिफ़ॉल्ट ग्रिड के साथ नेस्ट करने के लिए, मौजूदा कॉलम में एक नया .row
और कॉलम का सेट जोड़ें । नेस्टेड पंक्तियों में कॉलम का एक सेट शामिल होना चाहिए जो 12 या उससे कम तक जोड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलम का उपयोग करें)।.col-sm-*
.col-sm-*
बूटस्ट्रैप के स्रोत Sass फ़ाइलों का उपयोग करते समय, आपके पास कस्टम, सिमेंटिक और उत्तरदायी पृष्ठ लेआउट बनाने के लिए Sass चर और मिक्सिन का उपयोग करने का विकल्प होता है। हमारी पूर्वनिर्धारित ग्रिड कक्षाएं तेजी से प्रतिक्रियाशील लेआउट के लिए उपयोग के लिए तैयार कक्षाओं का एक पूरा सूट प्रदान करने के लिए इन्हीं चर और मिश्रणों का उपयोग करती हैं।
चर और मानचित्र स्तंभों की संख्या, गटर की चौड़ाई और मीडिया क्वेरी बिंदु निर्धारित करते हैं जिस पर फ़्लोटिंग कॉलम शुरू करना है। हम इनका उपयोग ऊपर प्रलेखित पूर्वनिर्धारित ग्रिड कक्षाओं के साथ-साथ नीचे सूचीबद्ध कस्टम मिश्रणों के लिए भी करते हैं।
अलग-अलग ग्रिड कॉलम के लिए सिमेंटिक सीएसएस उत्पन्न करने के लिए मिक्सिन का उपयोग ग्रिड चर के साथ संयोजन में किया जाता है।
आप चरों को अपने स्वयं के कस्टम मानों में संशोधित कर सकते हैं, या केवल उनके डिफ़ॉल्ट मानों के साथ मिश्रित का उपयोग कर सकते हैं। यहां एक दो-स्तंभ लेआउट बनाने के लिए डिफ़ॉल्ट सेटिंग्स का उपयोग करने का एक उदाहरण दिया गया है, जिसके बीच का अंतर है।
हमारे अंतर्निर्मित ग्रिड Sass चर और मानचित्रों का उपयोग करके, पूर्वनिर्धारित ग्रिड कक्षाओं को पूरी तरह से अनुकूलित करना संभव है। स्तरों की संख्या, मीडिया क्वेरी आयाम और कंटेनर की चौड़ाई बदलें—फिर पुन: संकलित करें।
ग्रिड कॉलम की संख्या Sass चर के माध्यम से संशोधित की जा सकती है। कॉलम गटर के लिए चौड़ाई निर्धारित $grid-columns
करते समय प्रत्येक व्यक्तिगत कॉलम की चौड़ाई (प्रतिशत में) उत्पन्न करने के लिए उपयोग किया जाता है ।$grid-gutter-width
स्तंभों से आगे बढ़ते हुए, आप ग्रिड स्तरों की संख्या को भी अनुकूलित कर सकते हैं। यदि आप केवल चार ग्रिड स्तर चाहते हैं, तो आप $grid-breakpoints
और $container-max-widths
कुछ इस तरह से अपडेट करेंगे:
Sass चर या मानचित्र में कोई भी परिवर्तन करते समय, आपको अपने परिवर्तनों को सहेजना और पुन: संकलित करना होगा। ऐसा करने से कॉलम चौड़ाई, ऑफ़सेट और ऑर्डरिंग के लिए पूर्वनिर्धारित ग्रिड कक्षाओं का एक नया सेट आउटपुट होगा। कस्टम ब्रेकप्वाइंट का उपयोग करने के लिए उत्तरदायी दृश्यता उपयोगिताओं को भी अपडेट किया जाएगा। px
ग्रिड मानों को (नहीं rem
, em
, या %
) में सेट करना सुनिश्चित करें ।