Source

ग्रिड प्रणाली

बाह्र स्तम्भ प्रणाली, पाँच पूर्वनिर्धारित उत्तरदायी तहहरू, Sass चर र मिक्सिनहरू, र दर्जनौं पूर्वनिर्धारित कक्षाहरूका लागि सबै आकार र आकारहरूको लेआउटहरू निर्माण गर्न हाम्रो शक्तिशाली मोबाइल-पहिलो फ्लेक्सबक्स ग्रिड प्रयोग गर्नुहोस्।

यसले कसरी काम गर्छ

बुटस्ट्र्यापको ग्रिड प्रणालीले सामग्री लेआउट र पङ्क्तिबद्ध गर्न कन्टेनरहरू, पङ्क्तिहरू र स्तम्भहरूको श्रृंखला प्रयोग गर्दछ। यो flexbox संग निर्मित छ र पूर्ण उत्तरदायी छ। तल एउटा उदाहरण र ग्रिड कसरी सँगै आउँछ भन्ने बारे गहिरो नजर छ।

flexbox मा नयाँ वा अपरिचित? पृष्ठभूमि, शब्दावली, दिशानिर्देशहरू, र कोड स्निपेटहरूको लागि यो 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-fluidwidth: 100%
पङ्क्तिहरू स्तम्भहरूको लागि र्यापरहरू हुन्। प्रत्येक स्तम्भमा तेर्सो paddingहुन्छ (जसलाई नाली भनिन्छ) तिनीहरू बीचको ठाउँ नियन्त्रण गर्नका लागि। paddingत्यसपछि नकारात्मक मार्जिनको साथ पङ्क्तिहरूमा यसलाई प्रतिवाद गरिन्छ । यस तरिकाले, तपाइँको स्तम्भहरूमा सबै सामग्री बायाँ छेउमा भिजुअल रूपमा पङ्क्तिबद्ध गरिएको छ।
ग्रिड लेआउटमा, सामग्री स्तम्भहरूमा राखिएको हुनुपर्छ र केवल स्तम्भहरू पङ्क्तिहरूको तत्काल बच्चाहरू हुन सक्छन्।
फ्लेक्सबक्सलाई धन्यवाद, निर्दिष्ट नगरी ग्रिड स्तम्भहरू widthसमान चौडाइ स्तम्भहरूको रूपमा स्वचालित रूपमा लेआउट हुनेछ। उदाहरणका लागि, विलका चारवटा उदाहरणहरू .col-smप्रत्येक स्वचालित रूपमा सानो ब्रेकपोइन्ट र माथिबाट २५% चौडा हुनेछन्। थप उदाहरणहरूको लागि स्वत: लेआउट स्तम्भहरू खण्ड हेर्नुहोस् ।
स्तम्भ वर्गहरूले तपाईंले प्रति पङ्क्तिमा सम्भावित १२ मध्ये प्रयोग गर्न चाहनुहुने स्तम्भहरूको सङ्ख्या सङ्केत गर्दछ। त्यसोभए, यदि तपाइँ तीन बराबर-चौडाइ स्तम्भहरू भरि चाहनुहुन्छ भने, तपाइँ प्रयोग गर्न सक्नुहुन्छ .col-4।
स्तम्भहरू widthप्रतिशतमा सेट गरिएका छन्, त्यसैले तिनीहरू सधैँ तरल र आकारका हुन्छन्।
paddingव्यक्तिगत स्तम्भहरू बीचको गटरहरू सिर्जना गर्न स्तम्भहरू तेर्सो हुन्छन्, तथापि, तपाईं marginपङ्क्तिहरूबाट र paddingस्तम्भहरूबाट अनको साथ .no-guttersहटाउन सक्नुहुन्छ .row।
ग्रिडलाई उत्तरदायी बनाउन, त्यहाँ पाँच ग्रिड ब्रेकपोइन्टहरू छन्, प्रत्येक प्रतिक्रियाशील ब्रेकपोइन्टको लागि एक : सबै ब्रेकपोइन्टहरू (अतिरिक्त सानो), सानो, मध्यम, ठूलो, र अतिरिक्त ठूलो।
ग्रिड ब्रेकपोइन्टहरू न्यूनतम चौडाइ मिडिया क्वेरीहरूमा आधारित हुन्छन्, यसको मतलब तिनीहरू त्यो एउटा ब्रेकपोइन्ट र त्यसमाथिका सबैमा लागू हुन्छन् (उदाहरणका लागि, .col-sm-4सानो, मध्यम, ठूला र अतिरिक्त ठूला यन्त्रहरूमा लागू हुन्छ, तर पहिलो xsब्रेकपोइन्ट होइन)।
तपाईले पूर्वनिर्धारित ग्रिड क्लासहरू (जस्तै .col-4) वा Sass मिक्सिनहरू थप सिमान्टिक मार्कअपको लागि प्रयोग गर्न सक्नुहुन्छ।

फ्लेक्सबक्स वरपरका सीमितताहरू र बगहरू बारे सचेत रहनुहोस् , जस्तै फ्लेक्स कन्टेनरहरूको रूपमा केही HTML तत्वहरू प्रयोग गर्न असक्षमता ।

ग्रिड विकल्पहरू

जबकि बुटस्ट्र्यापले धेरै आकारहरू परिभाषित गर्नको लागि ems वा s प्रयोग गर्दछ, s लाई ग्रिड ब्रेकपोइन्टहरू र कन्टेनर चौडाइहरूको लागि प्रयोग गरिन्छ। यो किनभने भ्युपोर्ट चौडाइ पिक्सेलमा छ र फन्ट साइजमा परिवर्तन हुँदैन ।rempx

बुटस्ट्र्याप ग्रिड प्रणालीका पक्षहरूले एउटा उपयोगी तालिकाको साथ धेरै यन्त्रहरूमा कसरी काम गर्छ हेर्नुहोस्।

	अतिरिक्त सानो <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. तपाईलाई चाहिने प्रत्येक ब्रेकपोइन्टको लागि कुनै पनि संख्यामा एकाइ-कम कक्षाहरू थप्नुहोस् र प्रत्येक स्तम्भ उही चौडाइको हुनेछ।

२ मध्ये १

२ मध्ये २

३ मध्ये १

३ मध्ये २

३ मध्ये ३

<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।

कर्नल

col-8

col-4

<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) मा तेर्सो हुन्छ।

col-sm-8

col-sm-4

col-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>

मिक्स र मिलाउनुहोस्

तपाइँका स्तम्भहरू केवल केहि ग्रिड तहहरूमा स्ट्याक गर्न चाहनुहुन्न? आवश्यकता अनुसार प्रत्येक तहको लागि विभिन्न वर्गहरूको संयोजन प्रयोग गर्नुहोस्। यो सबै कसरी काम गर्दछ भन्ने राम्रो विचारको लागि तलको उदाहरण हेर्नुहोस्।

col-md-8

.col-6 .col-md-4

col-6

<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>

गटरहरू

ब्रेकपोइन्ट-विशिष्ट प्याडिङ र नकारात्मक मार्जिन उपयोगिता वर्गहरूद्वारा गटरहरू प्रतिक्रियाशील रूपमा समायोजन गर्न सकिन्छ। दिइएको पङ्क्तिमा गटरहरू परिवर्तन गर्न .row, s मा एक नकारात्मक मार्जिन उपयोगिता र मिल्दो प्याडिङ उपयोगिताहरू जोडा बनाउनुहोस् .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);
  }
}

पङ्क्तिबद्धता

ठाडो र तेर्सो रूपमा स्तम्भहरू पङ्क्तिबद्ध गर्न flexbox पङ्क्तिबद्ध उपयोगिताहरू प्रयोग गर्नुहोस्। Internet Explorer 10-11 ले फ्लेक्स वस्तुहरूको ठाडो पङ्क्तिबद्धतालाई समर्थन गर्दैन जब फ्लेक्स कन्टेनरमा min-heightतल देखाइएको छ। थप विवरणहरूको लागि Flexbugs #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। यसले सबै तत्काल बच्चा स्तम्भहरूबाट नकारात्मक margins .rowर तेर्सो हटाउँछ।padding

यहाँ यी शैलीहरू सिर्जना गर्न स्रोत कोड छ। ध्यान दिनुहोस् कि स्तम्भ ओभरराइडहरू केवल पहिलो बच्चा स्तम्भहरूमा स्कोप गरिएका छन् र विशेषता चयनकर्ता मार्फत लक्षित छन् । जबकि यसले थप विशिष्ट चयनकर्ता उत्पन्न गर्दछ, स्तम्भ प्याडिङ अझै स्पेसिङ उपयोगिताहरूसँग थप अनुकूलित गर्न सकिन्छ ।

किनारा देखि किनारा डिजाइन चाहिन्छ? अभिभावक .containerवा छोड्नुहोस् .container-fluid।

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

अभ्यासमा, यहाँ यो कस्तो देखिन्छ। नोट गर्नुहोस् कि तपाइँ यसलाई अन्य सबै पूर्वनिर्धारित ग्रिड वर्गहरूसँग प्रयोग गर्न जारी राख्न सक्नुहुन्छ (स्तम्भ चौडाइहरू, उत्तरदायी तहहरू, पुन: क्रमहरू, र थप सहित)।

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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 भन्दा बढी स्तम्भहरू एउटै पङ्क्ति भित्र राखिएको छ भने, अतिरिक्त स्तम्भहरूको प्रत्येक समूह, एक एकाइको रूपमा, नयाँ रेखामा लपेट्नेछ।

col-9

.col-4
9 + 4 = 13 > 12 देखि, यो 4-स्तम्भ-चौडा div नयाँ रेखामा एक सन्निहित एकाइको रूपमा र्‍याप हुन्छ।

.col-6
पछिका स्तम्भहरू नयाँ लाइनमा जारी छन्।

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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%जहाँ तपाईं आफ्नो स्तम्भहरू नयाँ लाइनमा बेराउन चाहनुहुन्छ त्यहाँ एउटा तत्व थप्नुहोस्। सामान्यतया यो धेरै .rows को साथ पूरा हुन्छ, तर हरेक कार्यान्वयन विधिले यसको लागि खाता बनाउन सक्दैन।

.col-6 .col-sm-3

<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>

तपाइँ हाम्रो प्रतिक्रियाशील प्रदर्शन उपयोगिताहरु संग विशेष ब्रेकपोइन्टहरुमा यो ब्रेक लागू गर्न सक्नुहुन्छ ।

.col-6 .col-sm-4

<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-2112

DOM मा पहिले, कुनै अर्डर लागू भयो

DOM मा दोस्रो, ठूलो अर्डरको साथ

DOM मा तेस्रो, १ को अर्डरको साथ

<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: -1order: 13order: $columns + 1.order-*

DOM मा पहिलो, अन्तिम अर्डर

DOM मा दोस्रो, क्रमरहित

DOM मा तेस्रो, पहिले अर्डर गरियो

<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

col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<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>

उत्तरदायी ब्रेकपोइन्टहरूमा स्तम्भ क्लियरिङको अतिरिक्त, तपाईंले अफसेटहरू रिसेट गर्न आवश्यक पर्दछ। यसलाई ग्रिड उदाहरणमा कार्यमा हेर्नुहोस् ।

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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भाइबहिनी स्तम्भहरूलाई एकअर्काबाट टाढा राख्न।

col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

col-auto .mr-auto

col-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र स्तम्भहरूको सेट थप्नुहोस् । नेस्ट गरिएका पङ्क्तिहरूले स्तम्भहरूको सेट समावेश गर्नुपर्छ जसले १२ वा सोभन्दा कम थप्छन् (तपाईले सबै उपलब्ध १२ स्तम्भहरू प्रयोग गर्नु आवश्यक छैन)।.col-sm-*.col-sm-*

स्तर १: .col-sm-9

स्तर 2: .col-8 .col-sm-6

स्तर 2: .col-4 .col-sm-6

<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 चर र मिक्सिनहरू प्रयोग गर्ने विकल्प छ। हाम्रो पूर्वनिर्धारित ग्रिड वर्गहरूले द्रुत प्रतिक्रियाशील लेआउटहरूको लागि प्रयोग गर्न-का लागि तयार कक्षाहरूको सम्पूर्ण सूट प्रदान गर्न यी समान चरहरू र मिक्सिनहरू प्रयोग गर्छन्।

चरहरू

चर र नक्साहरूले स्तम्भहरूको संख्या, नालीको चौडाइ, र मिडिया क्वेरी बिन्दुमा फ्लोटिंग स्तम्भहरू सुरु गर्ने निर्धारण गर्दछ। हामी माथि उल्लेखित पूर्वनिर्धारित ग्रिड वर्गहरू उत्पन्न गर्न प्रयोग गर्छौं, साथै तल सूचीबद्ध अनुकूलन मिक्सनहरूको लागि।

$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
);

मिक्सन

व्यक्तिगत ग्रिड स्तम्भहरूको लागि सिमान्टिक CSS उत्पन्न गर्न ग्रिड चरहरूसँग संयोजनमा मिक्सिनहरू प्रयोग गरिन्छ।

// 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 {
  width: 800px;
  @include make-container();
}

.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वा %) मा ग्रिड मानहरू सेट गर्न निश्चित गर्नुहोस् ।