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>

برابر-چوڏهين ڪالمن کي ڪيترن ئي لائينن ۾ ٽوڙي سگھجي ٿو، پر اتي ھڪڙو سفاري فليڪس بڪس بگ ھو جنھن ھن کي بغير ڪنھن واضح flex-basisيا border. پراڻن برائوزر ورزن لاءِ حل آهن، پر انهن کي ضروري نه هجڻ گهرجي جيڪڏهن توهان تازه ڪاري آهيو.

ڪالم

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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>

برابر ويڪر گھڻن قطار

برابر چوٽيءَ وارا ڪالم ٺاھيو جيڪي گھڻن قطارن کي گھيرو ڪري ھڪ داخل ڪري .w-100جتي توھان چاھيو ٿا ته ڪالمن کي نئين لڪير تي ٽوڙيو وڃي. .w-100ڪجهه جوابي ڊسپلي يوٽيلٽيز سان گڏ گڏ ڪندي وقفن کي جوابي بڻايو .

ڪرنل

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

جوابدار ڪلاس

بوٽ اسٽريپ جي گرڊ ۾ پيچيده جوابي ترتيبن جي تعمير لاءِ اڳئين بيان ڪيل ڪلاسن جا پنج درجا شامل آھن. توهان جي ڪالمن جي سائيز کي ترتيب ڏيو اضافي ننڍڙن، ننڍڙن، وچولي، وڏي، يا اضافي وڏن ڊوائيسز تي، جڏهن ته توهان مناسب ڏسندا آهيو.

سڀ بريڪ پوائنٽ

گرڊز لاءِ جيڪي ساڳيا آهن ڊوائيسز جي ننڍي کان وڏي تائين، استعمال ڪريو .col۽ .col-*ڪلاس. هڪ عددي ڪلاس جي وضاحت ڪريو جڏهن توهان کي خاص طور تي ڪالمن جي ضرورت هجي؛ ٻي صورت ۾، لٺ ڪرڻ لاء آزاد محسوس ڪريو .col.

ڪرنل

ڪال-8

col-4

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

افقي طرف رکيل

طبقن جي ھڪڙي ھڪڙي سيٽ کي استعمال ڪندي .col-sm-*، توھان ھڪڙو بنيادي گرڊ سسٽم ٺاھي سگھو ٿا جيڪو ننڍي برڪ پوائنٽ ( ) سان افقي ٿيڻ کان اڳ شروع ٿئي ٿو sm.

col-sm-8

col-sm-4

col-sm

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

ملائي ۽ ملائي

ڇا توهان نٿا چاهيو ته توهان جا ڪالمن صرف ڪجهه گرڊ ٽائرن ۾ اسٽيڪ ڪن؟ ضرورت مطابق هر درجي لاءِ مختلف طبقن جو ميلاپ استعمال ڪريو. هيٺ ڏنل مثال ڏسو بهتر خيال لاءِ ته اهو سڀ ڪيئن ڪم ڪري ٿو.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

ترتيب ڏيڻ

عمودي ۽ افقي طور تي ڪالمن کي ترتيب ڏيڻ لاءِ flexbox alignment افاديت استعمال ڪريو.

عمودي ترتيب

ٽن ڪالمن مان هڪ

<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-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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="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>

ڪالمن جي ڀڃڪڙي

فليڪس باڪس ۾ ڪالمن کي نئين لڪير تي ٽوڙڻ لاءِ هڪ ننڍڙي هيڪ جي ضرورت آهي: هڪ عنصر شامل ڪريو width: 100%جتي توهان چاهيو ٿا ته توهان پنهنجي ڪالمن کي نئين لڪير ۾ لپيٽڻ چاهيو. عام طور تي اهو ڪيترن ئي .rowايس سان پورو ڪيو ويندو آهي، پر هر عمل درآمد جو طريقو هن لاء حساب نه ٿو ڪري سگهي.

.col-6 .col-sm-3

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

توھان پڻ ھن وقف کي لاڳو ڪري سگھو ٿا مخصوص وقفي پوائنٽن تي اسان جي جوابي ڊسپلي يوٽيلٽيز سان .

.col-6 .col-sm-4

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

ٻيهر ترتيب ڏيڻ

آرڊر ڪلاس

توهان جي مواد جي بصري ترتيب.order- کي ڪنٽرول ڪرڻ لاء ڪلاس استعمال ڪريو . اهي ڪلاس جوابي آهن، تنهنڪري توهان سيٽ ڪري سگهو ٿا بريڪ پوائنٽ طرفان (مثال طور، ). سڀني پنجن گرڊ سطحن جي ذريعي مدد شامل آهي.order.order-1.order-md-2112

پهريون، پر بي ترتيب

ٻيو، پر آخري

ٽيون، پر پهريون

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

اتي پڻ جوابدار .order-first۽ .order-lastطبقا آھن جيڪي ترتيب سان لاڳو ڪرڻ ۽ ( ) سان orderعنصر کي تبديل ڪن ٿا. انهن طبقن کي به ضرورت مطابق انگن اکرن سان ملائي سگهجي ٿو .order: -1order: 13order: $columns + 1.order-*

پهريون، پر آخري

ٻيو، پر بي ترتيب

ٽيون، پر پهريون

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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="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>

جوابي بريڪ پوائنٽس تي ڪالمن کي صاف ڪرڻ جي اضافي ۾، توهان کي آفسيٽس ري سيٽ ڪرڻ جي ضرورت پوندي. گرڊ مثال ۾ هن عمل ۾ ڏسو .

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

مارجن افاديت

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

col-md-4

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

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

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

.col-آٽو

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

نستو

پنھنجي مواد کي ڊفالٽ گرڊ سان نسٽ ڪرڻ لاءِ، موجوده ڪالمن ۾ ھڪ نئون .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="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>

ساس ملائڻ

جڏهن بوٽ اسٽريپ جي ماخذ 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وقفي پوائنٽ جي مخصوص چوٽي کي اجازت ڏئي ٿو جيڪي برابر طور تي ورهايل آهن padding-left۽ padding-rightڪالمن جي گٽرن لاءِ.

$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يا %).