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