ग्रिड प्रणाली
बारह कॉलम सिस्टम, पांच डिफ़ॉल्ट रिस्पॉन्सिव टियर, सैस वेरिएबल्स और मिक्सिन और दर्जनों पूर्वनिर्धारित कक्षाओं के लिए धन्यवाद, सभी आकारों और आकारों के लेआउट बनाने के लिए हमारे शक्तिशाली मोबाइल-फर्स्ट फ्लेक्सबॉक्स ग्रिड का उपयोग करें।
यह काम किस प्रकार करता है
बूटस्ट्रैप का ग्रिड सिस्टम सामग्री को लेआउट और संरेखित करने के लिए कंटेनरों, पंक्तियों और स्तंभों की एक श्रृंखला का उपयोग करता है। यह फ्लेक्सबॉक्स के साथ बनाया गया है और पूरी तरह उत्तरदायी है। नीचे एक उदाहरण दिया गया है और गहराई से देखें कि ग्रिड कैसे एक साथ आता है।
फ्लेक्सबॉक्स के लिए नया या अपरिचित? पृष्ठभूमि, शब्दावली, दिशानिर्देश और कोड स्निपेट के लिए इस CSS ट्रिक्स फ्लेक्सबॉक्स गाइड को पढ़ें ।
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
उपरोक्त उदाहरण हमारे पूर्वनिर्धारित ग्रिड वर्गों का उपयोग करके छोटे, मध्यम, बड़े और अतिरिक्त बड़े उपकरणों पर तीन समान-चौड़ाई वाले कॉलम बनाता है। वे कॉलम पेरेंट के साथ पेज में केंद्रित होते हैं .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
. आपको आवश्यक प्रत्येक ब्रेकपॉइंट के लिए किसी भी संख्या में यूनिट-कम कक्षाएं जोड़ें और प्रत्येक कॉलम समान चौड़ाई का होगा।
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
समान-चौड़ाई वाली बहु-पंक्ति
समान-चौड़ाई वाले कॉलम बनाएं जो कई पंक्तियों को फैलाते हैं, .w-100
जहां आप चाहते हैं कि कॉलम एक नई लाइन में टूट जाए। .w-100
कुछ रिस्पॉन्सिव डिस्प्ले यूटिलिटीज के साथ मिक्स करके ब्रेक्स को रिस्पॉन्सिव बनाएं ।
एक सफारी फ्लेक्सबॉक्स बग था जिसने इसे स्पष्ट flex-basis
या border
. पुराने ब्राउज़र संस्करणों के लिए वर्कअराउंड हैं, लेकिन यदि आपके लक्षित ब्राउज़र बग्गी संस्करणों में नहीं आते हैं, तो वे आवश्यक नहीं होने चाहिए।
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
एक कॉलम चौड़ाई सेट करना
फ्लेक्सबॉक्स ग्रिड कॉलम के लिए ऑटो-लेआउट का मतलब यह भी है कि आप एक कॉलम की चौड़ाई सेट कर सकते हैं और इसके चारों ओर सिबलिंग कॉलम स्वचालित रूप से आकार बदल सकते हैं। आप पूर्वनिर्धारित ग्रिड कक्षाओं (जैसा कि नीचे दिखाया गया है), ग्रिड मिक्सिन या इनलाइन चौड़ाई का उपयोग कर सकते हैं। ध्यान दें कि अन्य स्तंभों का आकार बदल जाएगा, चाहे केंद्र स्तंभ की चौड़ाई कितनी भी हो।
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
चर चौड़ाई सामग्री
col-{breakpoint}-auto
उनकी सामग्री की प्राकृतिक चौड़ाई के आधार पर स्तंभों को आकार देने के लिए कक्षाओं का उपयोग करें ।
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
उत्तरदायी वर्ग
बूटस्ट्रैप के ग्रिड में जटिल उत्तरदायी लेआउट बनाने के लिए पूर्वनिर्धारित कक्षाओं के पांच स्तर शामिल हैं। अतिरिक्त छोटे, छोटे, मध्यम, बड़े, या अतिरिक्त बड़े उपकरणों पर अपने कॉलम के आकार को अनुकूलित करें, हालांकि आप फिट देखते हैं।
सभी ब्रेकप्वाइंट
ग्रिड के लिए जो छोटे उपकरणों से लेकर सबसे बड़े तक समान हैं, .col
और .col-*
कक्षाओं का उपयोग करें। जब आपको विशेष आकार के कॉलम की आवश्यकता हो तो एक क्रमांकित वर्ग निर्दिष्ट करें; अन्यथा, बेझिझक चिपके रहें .col
।
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
क्षैतिज करने के लिए स्टैक्ड
कक्षाओं के एक सेट का उपयोग करके .col-sm-*
, आप एक बुनियादी ग्रिड सिस्टम बना सकते हैं जो स्टैक से शुरू होता है और छोटे ब्रेकपॉइंट ( sm
) पर क्षैतिज हो जाता है।
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
मिश्रण और मैच
क्या आप नहीं चाहते कि आपके कॉलम कुछ ग्रिड स्तरों में बस ढेर हो जाएं? आवश्यकतानुसार प्रत्येक स्तर के लिए विभिन्न वर्गों के संयोजन का उपयोग करें। यह सब कैसे काम करता है, इसके बेहतर विचार के लिए नीचे दिया गया उदाहरण देखें।
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
गटर
ब्रेकपॉइंट-विशिष्ट पैडिंग और नकारात्मक मार्जिन उपयोगिता वर्गों द्वारा गटर को प्रतिक्रियात्मक रूप से समायोजित किया जा सकता है। किसी दी गई पंक्ति में गटर बदलने के लिए, नकारात्मक मार्जिन उपयोगिता को s पर .row
और मिलान करने वाली पैडिंग उपयोगिताओं पर जोड़ दें .col
। फिर से मिलान करने वाली पैडिंग उपयोगिता का उपयोग करके अवांछित अतिप्रवाह से बचने के लिए माता .container
- .container-fluid
पिता को भी समायोजित करने की आवश्यकता हो सकती है।
lg
बूटस्ट्रैप ग्रिड को बड़े ( ) ब्रेकपॉइंट और ऊपर पर अनुकूलित करने का एक उदाहरण यहां दिया गया है। हमने .col
पैडिंग को के साथ बढ़ाया है, इसके साथ पैरेंट पर .px-lg-5
विरोध किया है और फिर रैपर को के साथ समायोजित किया है ।.mx-lg-n5
.row
.container
.px-lg-5
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
पंक्ति स्तंभ
आपकी सामग्री और लेआउट को सर्वोत्तम रूप से प्रस्तुत करने वाले स्तंभों की संख्या शीघ्रता से निर्धारित करने के लिए प्रतिक्रियाशील .row-cols-*
कक्षाओं का उपयोग करें। जबकि सामान्य .col-*
वर्ग अलग-अलग कॉलम (जैसे, .col-md-4
) पर लागू होते हैं, रो कॉलम क्लास को पैरेंट पर .row
शॉर्टकट के रूप में सेट किया जाता है।
बुनियादी ग्रिड लेआउट बनाने या अपने कार्ड लेआउट को नियंत्रित करने के लिए इन पंक्ति कॉलम कक्षाओं का उपयोग करें।
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
आप साथ में Sass mixin का भी उपयोग कर सकते हैं row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
संरेखण
कॉलम को लंबवत और क्षैतिज रूप से संरेखित करने के लिए फ्लेक्सबॉक्स संरेखण उपयोगिताओं का उपयोग करें। जब फ्लेक्स कंटेनर में नीचे दिखाया गया है तो इंटरनेट एक्सप्लोरर 10-11 फ्लेक्स आइटम के लंबवत संरेखण का समर्थन नहीं करता है । min-height
अधिक जानकारी के लिए फ्लेक्सबग्स #3 देखें।
ऊर्ध्वाधर संरेखण
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
क्षैतिज संरेखण
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
कोई गटर नहीं
हमारे पूर्वनिर्धारित ग्रिड वर्गों में स्तंभों के बीच के गटर को .no-gutters
. यह सभी तत्काल चिल्ड्रन कॉलम से नकारात्मक margin
s .row
और क्षैतिज को हटा देता है।padding
इन शैलियों को बनाने के लिए स्रोत कोड यहां दिया गया है। ध्यान दें कि कॉलम ओवरराइड केवल पहले चिल्ड्रन कॉलम तक सीमित हैं और विशेषता चयनकर्ता के माध्यम से लक्षित हैं । हालांकि यह एक अधिक विशिष्ट चयनकर्ता उत्पन्न करता है, फिर भी कॉलम पैडिंग को स्पेसिंग यूटिलिटीज के साथ और भी अनुकूलित किया जा सकता है ।
एज-टू-एज डिज़ाइन की आवश्यकता है? माता-पिता को छोड़ें .container
या .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
व्यवहार में, यह कैसा दिखता है। ध्यान दें कि आप अन्य सभी पूर्वनिर्धारित ग्रिड वर्गों (स्तंभ की चौड़ाई, प्रतिक्रियाशील स्तरों, पुन: क्रम, और अधिक सहित) के साथ इसका उपयोग करना जारी रख सकते हैं।
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
कॉलम रैपिंग
यदि एक पंक्ति में 12 से अधिक कॉलम रखे जाते हैं, तो अतिरिक्त कॉलम का प्रत्येक समूह, एक इकाई के रूप में, एक नई लाइन पर लपेट जाएगा।
9 + 4 = 13> 12 के बाद से, यह 4-स्तंभ-चौड़ा डिव एक नई लाइन पर एक सन्निहित इकाई के रूप में लिपट जाता है।
बाद के कॉलम नई लाइन के साथ जारी हैं।
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
कॉलम ब्रेक
फ्लेक्सबॉक्स में कॉलम को एक नई लाइन में तोड़ने के लिए एक छोटी सी हैक की आवश्यकता होती है: width: 100%
जहां भी आप अपने कॉलम को एक नई लाइन में लपेटना चाहते हैं, वहां एक तत्व जोड़ें। आम तौर पर यह कई .row
s के साथ पूरा किया जाता है, लेकिन प्रत्येक कार्यान्वयन विधि इसके लिए जिम्मेदार नहीं हो सकती है।
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
आप इस ब्रेक को हमारी प्रतिक्रियाशील प्रदर्शन उपयोगिताओं के साथ विशिष्ट ब्रेकप्वाइंट पर भी लागू कर सकते हैं ।
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
पुन: क्रम
आदेश कक्षाएं
अपनी सामग्री के दृश्य क्रम.order-
को नियंत्रित करने के लिए कक्षाओं का उपयोग करें । ये कक्षाएं उत्तरदायी हैं, इसलिए आप ब्रेकपॉइंट (जैसे, ) द्वारा सेट कर सकते हैं। सभी पांच ग्रिड स्तरों के माध्यम से समर्थन शामिल है ।order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
ऐसे प्रतिक्रियाशील .order-first
और .order-last
वर्ग भी होते हैं जो क्रमशः और ( ) order
को लागू करके किसी तत्व को बदलते हैं। इन वर्गों को आवश्यकतानुसार क्रमांकित वर्गों के साथ भी मिलाया जा सकता है।order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
ऑफसेटिंग कॉलम
आप ग्रिड कॉलम को दो तरह से ऑफसेट कर सकते हैं: हमारी प्रतिक्रियाशील .offset-
ग्रिड क्लासेस और हमारी मार्जिन यूटिलिटीज । ग्रिड वर्गों का आकार स्तंभों से मेल खाने के लिए होता है जबकि मार्जिन त्वरित लेआउट के लिए अधिक उपयोगी होते हैं जहां ऑफ़सेट की चौड़ाई परिवर्तनशील होती है।
ऑफसेट कक्षाएं
.offset-md-*
कक्षाओं का उपयोग करके कॉलम को दाईं ओर ले जाएं । ये वर्ग स्तंभ के बाएँ हाशिये को *
स्तंभों द्वारा बढ़ाते हैं। उदाहरण के लिए, चार स्तंभों पर .offset-md-4
चलता है।.col-md-4
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
रिस्पॉन्सिव ब्रेकप्वाइंट पर कॉलम क्लियरिंग के अलावा, आपको ऑफ़सेट रीसेट करने की आवश्यकता हो सकती है। इसे ग्रिड उदाहरण में क्रिया में देखें ।
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
मार्जिन उपयोगिताओं
v4 में फ्लेक्सबॉक्स में जाने के साथ, आप मार्जिन उपयोगिताओं का उपयोग कर सकते हैं जैसे .mr-auto
कि सिबलिंग कॉलम को एक दूसरे से दूर करने के लिए मजबूर करना।
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
घोंसला करने की क्रिया
अपनी सामग्री को डिफ़ॉल्ट ग्रिड के साथ नेस्ट करने के लिए, मौजूदा कॉलम में एक नया .row
और कॉलम का सेट जोड़ें । नेस्टेड पंक्तियों में कॉलम का एक सेट शामिल होना चाहिए जो 12 या उससे कम तक जोड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलम का उपयोग करें)।.col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
सास मिश्रण
बूटस्ट्रैप के स्रोत Sass फ़ाइलों का उपयोग करते समय, आपके पास कस्टम, सिमेंटिक और उत्तरदायी पृष्ठ लेआउट बनाने के लिए Sass चर और मिक्सिन का उपयोग करने का विकल्प होता है। हमारी पूर्वनिर्धारित ग्रिड कक्षाएं तेजी से प्रतिक्रियाशील लेआउट के लिए उपयोग के लिए तैयार कक्षाओं का एक पूरा सूट प्रदान करने के लिए इन्हीं चर और मिश्रणों का उपयोग करती हैं।
चर
चर और मानचित्र स्तंभों की संख्या, गटर की चौड़ाई और मीडिया क्वेरी बिंदु निर्धारित करते हैं जिस पर फ़्लोटिंग कॉलम शुरू करना है। हम इनका उपयोग ऊपर प्रलेखित पूर्वनिर्धारित ग्रिड कक्षाओं के साथ-साथ नीचे सूचीबद्ध कस्टम मिश्रणों के लिए भी करते हैं।
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
मिक्सिन्स
अलग-अलग ग्रिड कॉलम के लिए सिमेंटिक सीएसएस उत्पन्न करने के लिए मिक्सिन का उपयोग ग्रिड चर के साथ संयोजन में किया जाता है।
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
उदाहरण उपयोग
आप चरों को अपने स्वयं के कस्टम मानों में संशोधित कर सकते हैं, या केवल उनके डिफ़ॉल्ट मानों के साथ मिश्रित का उपयोग कर सकते हैं। यहां एक दो-स्तंभ लेआउट बनाने के लिए डिफ़ॉल्ट सेटिंग्स का उपयोग करने का एक उदाहरण दिया गया है, जिसके बीच का अंतर है।
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
ग्रिड को अनुकूलित करना
हमारे अंतर्निर्मित ग्रिड Sass चर और मानचित्रों का उपयोग करके, पूर्वनिर्धारित ग्रिड कक्षाओं को पूरी तरह से अनुकूलित करना संभव है। स्तरों की संख्या, मीडिया क्वेरी आयाम और कंटेनर की चौड़ाई बदलें—फिर पुन: संकलित करें।
कॉलम और गटर
ग्रिड कॉलम की संख्या Sass चर के माध्यम से संशोधित की जा सकती है। कॉलम गटर के लिए चौड़ाई निर्धारित $grid-columns
करते समय प्रत्येक व्यक्तिगत कॉलम की चौड़ाई (प्रतिशत में) उत्पन्न करने के लिए उपयोग किया जाता है ।$grid-gutter-width
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
ग्रिड टियर
स्तंभों से आगे बढ़ते हुए, आप ग्रिड स्तरों की संख्या को भी अनुकूलित कर सकते हैं। यदि आप केवल चार ग्रिड टियर चाहते हैं, तो आप $grid-breakpoints
और $container-max-widths
कुछ इस तरह से अपडेट करेंगे:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sass चर या मानचित्र में कोई भी परिवर्तन करते समय, आपको अपने परिवर्तनों को सहेजना और पुन: संकलित करना होगा। ऐसा करने से कॉलम चौड़ाई, ऑफ़सेट और ऑर्डरिंग के लिए पूर्वनिर्धारित ग्रिड कक्षाओं का एक नया सेट आउटपुट होगा। कस्टम ब्रेकप्वाइंट का उपयोग करने के लिए उत्तरदायी दृश्यता उपयोगिताओं को भी अपडेट किया जाएगा। px
ग्रिड मानों को (नहीं rem
, em
, या %
) में सेट करना सुनिश्चित करें ।