Source

گرڊ سسٽم

ٻارهن ڪالمن سسٽم، پنج ڊفالٽ جوابي ٽائر، ساس متغير ۽ ميڪسينز، ۽ درجنين اڳواٽ بيان ڪيل طبقن جي مهرباني، سڀني شڪلين ۽ سائزن جا لي آئوٽ ٺاهڻ لاءِ اسان جو طاقتور موبائل-پهرين فليڪس باڪس گرڊ استعمال ڪريو.

اهو ڪيئن ڪم ڪري ٿو

بوٽ اسٽريپ جو گرڊ سسٽم مواد کي ترتيب ڏيڻ ۽ ترتيب ڏيڻ لاءِ ڪنٽينرز، قطارن ۽ ڪالمن جو هڪ سلسلو استعمال ڪري ٿو. اهو 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-fluidسڀني ڏيک width: 100%پورٽ ۽ ڊوائيس جي سائزن لاءِ.
قطارون ڪالمن لاءِ لپيٽيون آھن. هر ڪالمن ۾ افقي آهي padding(جنهن کي گٽر سڏيو ويندو آهي) انهن جي وچ ۾ خلا کي ڪنٽرول ڪرڻ لاء. ان paddingکان پوء قطار تي منفي مارجن سان مقابلو ڪيو ويندو آهي. اهڙي طرح، توهان جي ڪالمن ۾ سمورو مواد بصري طور تي کاٻي پاسي سان ترتيب ڏنل آهي.
گرڊ جي ترتيب ۾، مواد کي ڪالمن جي اندر رکڻو پوندو ۽ صرف ڪالمن ئي ٿي سگھي ٿو جيڪي قطار جا فوري ٻار هجن.
flexbox جي مهرباني، گرڊ ڪالمن بغير ڪنهن مخصوص widthجي خودڪار طور تي برابر ويڪر ڪالمن جي طور تي ترتيب ڏيندو. مثال طور، .col-smهر هڪ خودڪار طريقي سان 25٪ ويڪرو ٿي ويندو جو چار مثال ننڍي برڪ پوائنٽ ۽ مٿي کان. وڌيڪ مثالن لاءِ خودڪار ترتيب واري ڪالمن سيڪشن کي ڏسو .
ڪالمن جا ڪلاس ڏيکارين ٿا ڪالمن جو تعداد جيڪو توھان استعمال ڪرڻ چاھيو ٿا ممڪن 12 في قطار مان. تنهن ڪري، جيڪڏهن توهان چاهيو ٿا ته ٽي برابر-چوٿون ڪالمن پار، توهان استعمال ڪري سگهو ٿا .col-4.
ڪالمن widths فيصد ۾ مقرر ڪيا ويا آهن، تنهن ڪري اهي هميشه سيال هوندا آهن ۽ انهن جي والدين عنصر سان لاڳاپيل آهن.
paddingانفرادي ڪالمن جي وچ ۾ گٽر ٺاهڻ لاءِ ڪالمن کي افقي هوندو آهي، تنهن هوندي به، توهان کي ختم ڪري سگهو ٿا marginقطارن مان ۽ paddingڪالمن .no-guttersمان .row.
گرڊ کي جوابي بڻائڻ لاءِ، پنج گرڊ بريڪ پوائنٽس آھن، ھڪڙو ھر جوابي بريڪ پوائنٽ لاءِ : سڀ بريڪ پوائنٽس (اضافي ننڍا)، ننڍا، وچولي، وڏا، ۽ اضافي وڏا.
گرڊ بريڪ پوائنٽون گھٽ ۾ گھٽ چوٽي ميڊيا جي سوالن تي ٻڌل آھن، مطلب ته اھي ان ھڪڙي بريڪ پوائنٽ تي لاڳو ٿين ٿا ۽ انھن سڀني کان مٿي (مثال طور، .col-sm-4ننڍي، وچولي، وڏي، ۽ اضافي وڏين ڊوائيسز تي لاڳو ٿئي ٿو، پر پھرين xsبريڪ پوائنٽ تي نه).
توھان استعمال ڪري سگھوٿا اڳ بيان ڪيل گرڊ ڪلاسز (جهڙوڪ .col-4) يا Sass mixins وڌيڪ سيمينٽڪ مارڪ اپ لاءِ.

flexbox جي چوڌاري حدن ۽ ڪيڙن کان آگاهه رهو ، جهڙوڪ ڪجهه HTML عناصر کي فليڪس ڪنٽينرز طور استعمال ڪرڻ جي ناڪامي .

گرڊ جا اختيار

جڏهن ته بوٽ اسٽريپ ems يا rems استعمال ڪري ٿو گھڻن سائزن کي بيان ڪرڻ لاءِ، pxs استعمال ڪيا ويندا آھن گرڊ بريڪ پوائنٽس ۽ ڪنٽينر جي چوٽي لاءِ. اهو ئي سبب آهي ته وييو پورٽ جي چوٽي پکسلز ۾ آهي ۽ فونٽ جي سائيز سان تبديل نه ٿيندي آهي .

ڏسو ته ڪيئن بوٽ اسٽريپ گرڊ سسٽم جا حصا ڪيترن ئي ڊوائيسن تي ڪم ڪن ٿا هڪ هٿ واري ٽيبل سان.

	وڌيڪ ننڍو <576px	ننڍو ≥576px	وچولي ≥768px	وڏو ≥992px	اضافي وڏو ≥1200px
وڌ کان وڌ ڪنٽينر جي ويڪر	ڪو به (خودڪار)	540px	720px	960px	1140px
ڪلاس جو اڳوڻو	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ڪالمن جو	12
گٽر جي چوٽي	30px (15px ڪالم جي هر پاسي تي)
Nestable	ها
ڪالمن جي ترتيب	ها

خودڪار ترتيب واري ڪالمن

استعمال ڪريو بريڪ پوائنٽ-مخصوص ڪالمن جا ڪلاس آسان ڪالمن جي سائيز لاءِ بغير ڪنهن واضح نمبر واري ڪلاس کان سواءِ .col-sm-6.

برابر ويڪر

مثال طور، هتي ٻه گرڊ لي آئوٽ آهن جيڪي هر ڊيوائس ۽ ڏيئو پورٽ تي لاڳو ٿين ٿا، کان xsوٺي xl. توهان کي گهربل هر بريڪ پوائنٽ لاءِ يونٽ کان گهٽ ڪلاسن جو تعداد شامل ڪريو ۽ هر ڪالمن جي ويڪر ساڳي هوندي.

1 مان 2

2 مان 2

1 مان 3

2 مان 3

3 مان 3

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

ھڪڙي ڪالمن جي چوٽي کي ترتيب ڏيو

فليڪس باڪس گرڊ ڪالمن لاءِ خود بخود ترتيب ڏيڻ جو مطلب اهو آهي ته توهان هڪ ڪالمن جي چوٽي سيٽ ڪري سگهو ٿا ۽ ڀائر ڪالمن کي خودڪار طريقي سان ان جي چوڌاري ٻيهر سائز ڏيو. توھان استعمال ڪري سگھو ٿا اڳواٽ بيان ڪيل گرڊ ڪلاس (جيئن ھيٺ ڏيکاريل آھي)، گرڊ ميڪسين، يا ان لائن ويڊٿس. نوٽ ڪريو ته ٻيا ڪالمن وري سائيز ٿيندا، ان کان سواءِ مرڪزي ڪالمن جي چوٽي جي.

1 مان 3

2 مان 3 (وڏو)

3 مان 3

1 مان 3

2 مان 3 (وڏو)

3 مان 3

<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انهن جي مواد جي قدرتي چوٽي جي بنياد تي ڪالمن کي سائيز ڪرڻ لاء ڪلاس استعمال ڪريو .

1 مان 3

متغير ويڪرو مواد

3 مان 3

1 مان 3

متغير ويڪرو مواد

3 مان 3

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

ڪرنل

ڪال-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>

گٽر

گٽرز جوابي طور تي ترتيب ڏئي سگھجن ٿيون بريڪ پوائنٽ-مخصوص پيڊنگ ۽ منفي مارجن يوٽيلٽي ڪلاسز. ڏنل قطار ۾ گٽرن کي تبديل ڪرڻ لاء، 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>

توھان پڻ استعمال ڪري سگھوٿا ساس ميڪسين سان گڏ 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 alignment افاديت استعمال ڪريو. انٽرنيٽ ايڪسپلورر 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-ڪالمن-وائڊ ڊيو هڪ نئين لڪير تي ويڙهجي وڃي ٿو هڪ ملندڙ يونٽ جي طور تي.

.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%جتي توهان چاهيو ٿا ته توهان پنهنجي ڪالمن کي نئين لڪير ۾ لپيٽڻ چاهيو. عام طور تي اهو ڪيترن ئي .rowايس سان پورو ڪيو ويندو آهي، پر هر عمل درآمد جو طريقو هن لاء حساب نه ٿو ڪري سگهي.

.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 ۾ ٽيون، 1 جي آرڊر سان

<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 ۾ flexbox ڏانهن منتقل ٿيڻ سان، توهان مارجن يوٽيلٽيز استعمال ڪري سگهو ٿا جهڙوڪ .mr-autoڀائرن جي ڪالمن کي هڪ ٻئي کان پري ڪرڻ لاءِ.

col-md-4

.col-md-4 .ml-آٽو

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

.col-آٽو .mr-آٽو

.col-آٽو

<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۽ ڪالمن جو سيٽ شامل ڪريو . Nested قطارن ۾ ڪالمن جو ھڪڙو سيٽ شامل ڪرڻ گھرجي جيڪي 12 يا گھٽ تائين شامل ڪن (اھو ضروري نه آھي ته توھان سڀ 12 موجود ڪالمن استعمال ڪريو)..col-sm-*.col-sm-*

سطح 1: .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 فائلن کي استعمال ڪندي، توهان وٽ اختيار آهي 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
);

ملائيندڙ

Mixins استعمال ٿيل آھن گرڊ متغير سان گڏ انفرادي گرڊ ڪالمن لاءِ سيمينٽڪ سي ايس ايس پيدا ڪرڻ لاءِ.

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

مثال استعمال

توھان تبديل ڪري سگھوٿا متغيرن کي پنھنجي مرضي مطابق قدرن ۾، يا صرف mixins کي انھن جي ڊفالٽ ويلن سان استعمال ڪريو. ھتي ھڪڙو مثال آھي ڊفالٽ سيٽنگون استعمال ڪرڻ لاءِ ٻن ڪالمن واري ترتيب جي وچ ۾ فرق سان.

.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 variables ذريعي تبديل ڪري سگھجي ٿو. $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يا %).