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