گرڈ سسٹم

بارہ کالم سسٹم، چھ ڈیفالٹ ریسپانسیو ٹائرز، ساس ویری ایبلز اور مکسینز، اور درجنوں پہلے سے طے شدہ کلاسز کی بدولت تمام شکلوں اور سائز کے لے آؤٹ بنانے کے لیے ہماری طاقتور موبائل فرسٹ فلیکس باکس گرڈ کا استعمال کریں۔

اس صفحہ پر

مثال

بوٹسٹریپ کا گرڈ سسٹم مواد کو ترتیب دینے اور ترتیب دینے کے لیے کنٹینرز، قطاروں اور کالموں کی ایک سیریز کا استعمال کرتا ہے۔ یہ 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اور xxl)۔ اس کا مطلب ہے کہ آپ ہر بریک پوائنٹ کے ذریعے کنٹینر اور کالم کے سائز اور رویے کو کنٹرول کر سکتے ہیں۔
کنٹینرز بیچ میں اور افقی طور پر آپ کے مواد کو پیڈ کریں۔ .containerایک ریسپانسیو پکسل چوڑائی کے .container-fluidلیے ، width: 100%تمام ویو پورٹس اور ڈیوائسز کے لیے، یا ایک ریسپانسیو کنٹینر (مثلاً، .container-md) سیال اور پکسل کی چوڑائی کے امتزاج کے لیے استعمال کریں ۔
قطاریں کالموں کے لیے ریپرز ہیں۔ ان کے درمیان کی جگہ کو کنٹرول کرنے کے لیے ہر کالم میں افقی padding(جسے گٹر کہا جاتا ہے) ہوتا ہے۔ اس paddingکے بعد قطاروں میں منفی مارجن کے ساتھ اس کا مقابلہ کیا جاتا ہے تاکہ یہ یقینی بنایا جا سکے کہ آپ کے کالموں میں موجود مواد کو بصری طور پر بائیں جانب سے نیچے کی طرف سیدھ میں رکھا گیا ہے۔ قطاریں آپ کے مواد کے فاصلہ کو تبدیل کرنے کے لیے کالم سائزنگ اور گٹر کلاسز کو یکساں طور پر لاگو کرنے کے لیے موڈیفائر کلاسز کو بھی سپورٹ کرتی ہیں۔
کالم ناقابل یقین حد تک لچکدار ہیں۔ فی قطار میں 12 ٹیمپلیٹ کالم دستیاب ہیں، جو آپ کو عناصر کے مختلف مجموعے بنانے کی اجازت دیتے ہیں جو کسی بھی تعداد میں کالم پر محیط ہوں۔ کالم کلاس اسپین کے لیے ٹیمپلیٹ کالموں کی تعداد کی نشاندہی کرتی ہے (مثال کے طور پر، col-4چار پھیلی ہوئی ہے)۔ widths کو فیصد میں سیٹ کیا جاتا ہے لہذا آپ کے پاس ہمیشہ ایک ہی رشتہ دار سائز ہوتا ہے۔
گٹر بھی جوابدہ اور حسب ضرورت ہیں۔ گٹر کلاسز تمام بریک پوائنٹس پر دستیاب ہیں، ہمارے مارجن اور پیڈنگ اسپیسنگ کے برابر سائز کے ساتھ ۔ کلاسوں کے ساتھ افقی گٹر .gx-*، عمودی گٹر کے ساتھ .gy-*، یا تمام گٹر کو .g-*کلاسوں کے ساتھ تبدیل کریں۔ .g-0گٹر کو ہٹانے کے لیے بھی دستیاب ہے۔
ساس متغیرات، نقشے، اور مکسنس گرڈ کو طاقت دیتے ہیں۔ اگر آپ بوٹسٹریپ میں پہلے سے طے شدہ گرڈ کلاسز کو استعمال نہیں کرنا چاہتے ہیں، تو آپ ہمارے گرڈ کے ماخذ Sass کو مزید سیمنٹک مارک اپ کے ساتھ خود بنانے کے لیے استعمال کر سکتے ہیں۔ ہم ان Sass متغیرات کو استعمال کرنے کے لیے کچھ CSS حسب ضرورت خصوصیات بھی شامل کرتے ہیں تاکہ آپ کے لیے اور بھی زیادہ لچک ہو۔

flexbox کے ارد گرد کی حدود اور کیڑے سے آگاہ رہیں ، جیسے کچھ HTML عناصر کو فلیکس کنٹینرز کے طور پر استعمال کرنے میں ناکامی ۔

گرڈ کے اختیارات

بوٹسٹریپ کا گرڈ سسٹم تمام چھ ڈیفالٹ بریک پوائنٹس، اور کسی بھی بریک پوائنٹس کو جو آپ اپنی مرضی کے مطابق بناتے ہیں۔ چھ پہلے سے طے شدہ گرڈ درجے درج ذیل ہیں:

اضافی چھوٹا (xs)
چھوٹا (sm)
درمیانہ (md)
بڑا (ایل جی)
اضافی بڑا (xl)
اضافی اضافی بڑا (xxl)

جیسا کہ اوپر بتایا گیا ہے، ان میں سے ہر ایک بریک پوائنٹ کا اپنا کنٹینر، منفرد کلاس کا سابقہ، اور ترمیم کرنے والے ہیں۔ یہاں یہ ہے کہ ان بریک پوائنٹس میں گرڈ کیسے بدلتا ہے:

	xs <576px	sm ≥576px	md ≥768px	lg ≥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 بائیں اور دائیں)
حسب ضرورت گٹر	جی ہاں
نیسٹیبل	جی ہاں
کالم ترتیب دینا	جی ہاں

خودکار ترتیب والے کالم

بغیر کسی واضح نمبر والی کلاس کے آسان کالم سائز کے لیے بریک پوائنٹ کے لیے مخصوص کالم کلاسز کا استعمال .col-sm-6کریں۔

مساوی چوڑائی

مثال کے طور پر، یہاں دو گرڈ لے آؤٹ ہیں جو ہر ڈیوائس اور ویو پورٹ پر لاگو ہوتے ہیں، سے لے xsکر تک xxl۔ آپ کو ہر بریک پوائنٹ کے لیے یونٹ سے کم کلاسز کی تعداد شامل کریں اور ہر کالم ایک ہی چوڑائی کا ہوگا۔

1 میں سے 2

2 میں سے 2

3 میں سے 1

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>

ایک کالم کی چوڑائی کا تعین کرنا

فلیکس باکس گرڈ کالموں کے لیے خودکار ترتیب کا مطلب یہ بھی ہے کہ آپ ایک کالم کی چوڑائی سیٹ کر سکتے ہیں اور اس کے ارد گرد بہن بھائی کالم کا خود بخود سائز تبدیل کر سکتے ہیں۔ آپ پہلے سے طے شدہ گرڈ کلاسز (جیسا کہ نیچے دکھایا گیا ہے)، گرڈ مکسنس، یا ان لائن چوڑائی استعمال کر سکتے ہیں۔ نوٹ کریں کہ دوسرے کالموں کا سائز تبدیل ہو جائے گا اس سے قطع نظر کہ درمیانی کالم کی چوڑائی کچھ بھی ہو۔

3 میں سے 1

3 میں سے 2 (وسیع تر)

3 میں سے 3

3 میں سے 1

3 میں سے 2 (وسیع تر)

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کالموں کو ان کے مواد کی قدرتی چوڑائی کی بنیاد پر سائز کرنے کے لیے کلاسز کا استعمال کریں ۔

3 میں سے 1

متغیر چوڑائی کا مواد

3 میں سے 3

3 میں سے 1

متغیر چوڑائی کا مواد

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.

کرنل

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>

آپ اس کے ساتھ موجود 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);
  }
}

گھونسلہ

اپنے مواد کو ڈیفالٹ گرڈ کے ساتھ نیسٹ کرنے کے لیے، موجودہ کالم کے اندر ایک نیا .rowاور کالموں کا سیٹ شامل کریں ۔ نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہئے جس میں 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
);

مکسنس

مکسینز کو گرڈ متغیر کے ساتھ مل کر استعمال کیا جاتا ہے تاکہ انفرادی گرڈ کالموں کے لیے سیمنٹک سی ایس ایس تیار کیا جا سکے۔

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

استعمال کی مثال

آپ متغیرات کو اپنی مرضی کے مطابق اقدار میں تبدیل کر سکتے ہیں، یا صرف ان کی ڈیفالٹ اقدار کے ساتھ مکسنس استعمال کر سکتے ہیں۔ یہاں ایک دو کالم لے آؤٹ بنانے کے لیے پہلے سے طے شدہ ترتیبات کو استعمال کرنے کی ایک مثال ہے جس کے درمیان وقفہ ہے۔

.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 متغیرات اور نقشوں کا استعمال کرتے ہوئے، پہلے سے طے شدہ گرڈ کلاسز کو مکمل طور پر اپنی مرضی کے مطابق بنانا ممکن ہے۔ درجات کی تعداد، میڈیا کے استفسار کے طول و عرض، اور کنٹینر کی چوڑائیوں کو تبدیل کریں—پھر دوبارہ مرتب کریں۔

کالم اور گٹر

گرڈ کالموں کی تعداد کو ساس متغیر کے ذریعے تبدیل کیا جا سکتا ہے۔ $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یا %) میں سیٹ کریں۔