گرڊ سسٽم

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

هن صفحي تي

مثال

بوٽ اسٽريپ جو گرڊ سسٽم مواد کي ترتيب ڏيڻ ۽ ترتيب ڏيڻ لاءِ ڪنٽينرز، قطارن ۽ ڪالمن جو هڪ سلسلو استعمال ڪري ٿو. اهو flexbox سان ٺهيل آهي ۽ مڪمل طور تي جوابدار آهي. هيٺ ڏنل هڪ مثال آهي ۽ هڪ تفصيلي وضاحت آهي ته گرڊ سسٽم ڪيئن گڏ اچي ٿو.

flexbox سان نئون يا اڻ واقف؟ هي پڙهو CSS ٽرڪس فليڪس باڪس گائيڊ پس منظر، اصطلاحات، هدايتون، ۽ ڪوڊ جي ٽڪڙن لاءِ.

ڪالم

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

مٿي ڏنل مثال اسان جي اڳواٽ بيان ڪيل گرڊ ڪلاسن کي استعمال ڪندي سڀني ڊوائيسن ۽ ڏيک پورٽن تي ٽي برابر-چوڪر ڪالم ٺاهي ٿو. اهي ڪالمن پيج ۾ والدين سان مرڪز ۾ هوندا آهن .container.

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

ان کي ٽوڙڻ، هتي ڪيئن گرڊ سسٽم گڏ اچي ٿو:

اسان جو گرڊ ڇھ جوابي بريڪ پوائنٽن کي سپورٽ ڪري ٿو . بريڪ پوائنٽس ميڊيا جي سوالن تي مبني آهن min-width، مطلب ته اهي بريڪ پوائنٽ تي اثرانداز ٿين ٿا ۽ جيڪي ان کان مٿي آهن (مثال طور، .col-sm-4تي لاڳو ٿئي ٿو sm, md, lg, xl, and xxl). هن جو مطلب آهي ته توهان ڪنٽرول ۽ ڪالمن جي سائيز ۽ رويي کي هر برڪ پوائنٽ ذريعي ڪنٽرول ڪري سگهو ٿا.
ڪنٽينرز مرڪز ۽ افقي طور تي توهان جي مواد کي پيڊ. .containerهڪ جوابي پکسل جي ويڪر لاءِ استعمال ڪريو، .container-fluidسڀني ڏيک width: 100%بندرگاهن ۽ ڊوائيسز لاءِ، يا هڪ جوابي ڪنٽينر (مثال طور، .container-md) فلوئڊ ۽ پکسل جي ويڪر جي ميلاپ لاءِ.
قطارون ڪالمن لاءِ لپيٽيون آھن. هر ڪالمن ۾ افقي آهي padding(جنهن کي گٽر سڏيو ويندو آهي) انهن جي وچ ۾ خلا کي ڪنٽرول ڪرڻ لاء. اهو paddingپوءِ قطارن تي منفي مارجن سان مقابلو ڪيو وڃي ٿو انهي کي يقيني بڻائڻ لاءِ ته توهان جي ڪالمن ۾ مواد بصري طور تي کاٻي پاسي سان ترتيب ڏنل آهي. قطارون توهان جي مواد جي فاصلي کي تبديل ڪرڻ لاءِ ڪالمن جي سائزنگ ۽ گٽر ڪلاس کي هڪجهڙائي سان لاڳو ڪرڻ لاءِ موڊيفائر ڪلاسز کي پڻ سپورٽ ڪن ٿيون.
ڪالمن ناقابل اعتبار حد تائين لچڪدار آهن. هر قطار ۾ 12 ٽيمپليٽ ڪالمن موجود آهن، توهان کي عناصرن جي مختلف مجموعن کي ٺاهڻ جي اجازت ڏئي ٿي جيڪا ڪالمن جي ڪنهن به تعداد کي وڌايو وڃي. ڪالمن جا ڪلاس ڏيکارين ٿا ٽيمپليٽ ڪالمن جو تعداد اسپن تائين (مثال طور، col-4چار اسپانس). widths فيصد ۾ مقرر ڪيا ويا آھن تنھنڪري توھان وٽ ھميشه ساڳي نسبتي سائيز آھي.
گٽر پڻ جوابدار ۽ حسب ضرورت آهن. گٽر ڪلاس سڀني بريڪ پوائنٽس تي موجود آهن ، سڀني ساڳين سائزن سان اسان جي مارجن ۽ پيڊنگ اسپيسنگ سان . ڪلاسن سان افقي گٽر کي تبديل ڪريو .gx-*، عمودي گٽر سان گڏ .gy-*، يا .g-*ڪلاسن سان گڏ سڀ گٽر. .g-0گٽر کي هٽائڻ لاء پڻ موجود آهي.
سس متغير، نقشا، ۽ ميڪسين گرڊ کي طاقت ڏين ٿا. جيڪڏهن توهان بوٽ اسٽريپ ۾ اڳواٽ بيان ڪيل گرڊ ڪلاس استعمال ڪرڻ نٿا چاهيو، ته توهان استعمال ڪري سگهو ٿا اسان جي گرڊ جو ماخذ Sass پنهنجو پاڻ ٺاهڻ لاءِ وڌيڪ سيمينٽڪ مارڪ اپ سان. اسان ڪجھ سي ايس ايس ڪسٽم پراپرٽيز پڻ شامل ڪريون ٿا انھن Sass متغيرن کي استعمال ڪرڻ لاءِ توھان جي لاءِ اڃا وڌيڪ لچڪدار.

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

گرڊ جا اختيار

بوٽ اسٽريپ جو گرڊ سسٽم سڀني ڇهن ڊفالٽ بريڪ پوائنٽس، ۽ ڪنهن به بريڪ پوائنٽس کي ترتيب ڏئي سگھي ٿو جيڪو توهان ترتيب ڏيو ٿا. ڇهه ڊفالٽ گرڊ ٽائر هن ريت آهن:

وڌيڪ ننڍو (xs)
ننڍو (sm)
وچولي (ايم ڊي)
وڏو (lg)
وڏو (xl)
اضافي اضافي وڏو (xxl)

جيئن مٿي بيان ڪيو ويو آهي، انهن مان هر هڪ بريڪ پوائنٽس پنهنجو ڪنٽينر، منفرد ڪلاس پريفڪس، ۽ تبديل ڪندڙ آهن. هتي اهو آهي ته گرڊ انهن بريڪ پوائنٽن ۾ ڪيئن بدلجي ٿو:

	xs <576px	sm ≥576px	md ≥768px	ايل جي ≥992px	xl ≥1200px	xxl ≥1400px
ڪنٽينر`max-width`	ڪو به (خودڪار)	540px	720px	960px	1140px	1320px
ڪلاس جو اڳوڻو	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ڪالمن جو	12
گٽر جي چوٽي	1.5rem (.75rem کاٻي ۽ ساڄي پاسي)
حسب ضرورت گٽر	ها
Nestable	ها
ڪالمن جي ترتيب	ها

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

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

برابر ويڪر

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

1 مان 2

2 مان 2

1 مان 3

2 مان 3

3 مان 3

html

<div class="container text-center">
  <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>

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

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

1 مان 3

2 مان 3 (وڏو)

3 مان 3

1 مان 3

2 مان 3 (وڏو)

3 مان 3

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <!-- 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-cols-*ڪالمن جو تعداد جلدي سيٽ ڪرڻ لاءِ جوابي ڪلاس استعمال ڪريو جيڪي توھان جي مواد ۽ ترتيب کي بھترين طور پيش ڪن ٿا. جڏهن ته عام .col-*ڪلاس انفرادي ڪالمن تي لاڳو ٿين ٿا (مثال طور، .col-md-4)، قطار ڪالمن جا ڪلاس والدين .rowتي شارٽ ڪٽ طور مقرر ڪيا ويا آهن. توھان سان گڏ .row-cols-autoڪالمن کي پنھنجي قدرتي چوٽي ڏئي سگھو ٿا.

ھي قطار ڪالمن جا ڪلاس استعمال ڪريو تڪڙو بنيادي گرڊ لي آئوٽ ٺاھڻ يا پنھنجي ڪارڊ جي ترتيب کي ڪنٽرول ڪرڻ لاءِ.

ڪالم

html

<div class="container text-center">
  <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>

ڪالم

html

<div class="container text-center">
  <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>

ڪالم

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ڪالم

html

<div class="container text-center">
  <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>

ڪالم

html

<div class="container text-center">
  <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>

ڪالم

html

<div class="container text-center">
  <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);
  }
}

نستو

پنھنجي مواد کي ڊفالٽ گرڊ سان نسٽ ڪرڻ لاءِ، موجوده ڪالمن ۾ ھڪ نئون .row۽ ڪالمن جو سيٽ شامل ڪريو . Nested قطارن ۾ ڪالمن جو ھڪڙو سيٽ شامل ڪرڻ گھرجي جيڪي 12 يا گھٽ تائين شامل ڪن (اھو ضروري نه آھي ته توھان سڀ 12 موجود ڪالمن استعمال ڪريو)..col-sm-*.col-sm-*

سطح 1: .col-sm-3

سطح 2: .col-8 .col-sm-6

سطح 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ملائيندڙ

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

مثال استعمال

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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);
  }
}

مکيه مواد

ثانوي مواد

html

<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-row-columnsڪالمن جو وڌ ۾ وڌ تعداد مقرر ڪرڻ لاءِ استعمال ڪيو ويندو آهي .row-cols-*، هن حد کان مٿي ڪنهن به نمبر کي نظرانداز ڪيو ويندو آهي.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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يا %).