in English

گرڈ سسٹم

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

یہ کیسے کام کرتا ہے

بوٹسٹریپ کا گرڈ سسٹم مواد کو ترتیب دینے اور ترتیب دینے کے لیے کنٹینرز، قطاروں اور کالموں کی ایک سیریز کا استعمال کرتا ہے۔ یہ 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کے بعد قطاروں پر منفی مارجن کے ساتھ مقابلہ کیا جاتا ہے۔ اس طرح، آپ کے کالم میں موجود تمام مواد کو بصری طور پر بائیں جانب سے نیچے کی طرف سیدھ میں کیا جاتا ہے۔
  • گرڈ لے آؤٹ میں، مواد کو کالموں کے اندر رکھا جانا چاہیے اور صرف کالم ہی قطاروں کے فوری بچے ہو سکتے ہیں۔
  • فلیکس باکس کی بدولت، بغیر کسی مخصوص کے گرڈ کالم widthخود بخود برابر چوڑائی والے کالم کے طور پر لے آؤٹ ہو جائیں گے۔ مثال کے طور پر، وِل کی چار مثالیں .col-smخود بخود چھوٹے بریک پوائنٹ اور اس سے اوپر سے 25% چوڑی ہو جائیں گی۔ مزید مثالوں کے لیے خودکار ترتیب والے کالم سیکشن دیکھیں ۔
  • کالم کلاسز ان کالموں کی تعداد کی نشاندہی کرتی ہیں جنہیں آپ فی قطار ممکنہ 12 میں سے استعمال کرنا چاہتے ہیں۔ لہذا، اگر آپ تین برابر چوڑائی والے کالم چاہتے ہیں، تو آپ استعمال کر سکتے ہیں .col-4۔
  • کالم widths فیصد میں سیٹ کیے جاتے ہیں، اس لیے وہ ہمیشہ اپنے بنیادی عنصر کی نسبت سیال اور سائز کے ہوتے ہیں۔
  • paddingانفرادی کالموں کے درمیان گٹر بنانے کے لیے کالم افقی ہوتے ہیں، تاہم، آپ marginقطاروں paddingسے اور کالموں سے .no-gutterson کے ساتھ ہٹا سکتے ہیں .row۔
  • گرڈ کو ریسپانسیو بنانے کے لیے، پانچ گرڈ بریک پوائنٹس ہیں، ہر ریسپانسیو بریک پوائنٹ کے لیے ایک : تمام بریک پوائنٹس (اضافی چھوٹے)، چھوٹے، درمیانے، بڑے اور اضافی بڑے۔
  • گرڈ بریک پوائنٹس کم از کم چوڑائی والے میڈیا سوالات پر مبنی ہوتے ہیں، یعنی وہ اس ایک بریک پوائنٹ اور اس سے اوپر والے تمام پر لاگو ہوتے ہیں (مثال کے طور پر، .col-sm-4چھوٹے، درمیانے، بڑے، اور اضافی بڑے آلات پر لاگو ہوتا ہے، لیکن پہلے xsبریک پوائنٹ پر نہیں)۔
  • آپ پہلے سے طے شدہ گرڈ کلاسز (جیسے .col-4) یا Sass mixins کو مزید سیمنٹک مارک اپ کے لیے استعمال کر سکتے ہیں۔

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

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

جبکہ بوٹسٹریپ زیادہ تر سائز کی وضاحت کے لیے ems یا s کا استعمال کرتا ہے، s کو گرڈ بریک پوائنٹس اور کنٹینر کی چوڑائی کے لیے استعمال کیا جاتا ہے۔ اس کی وجہ یہ ہے کہ ویو پورٹ کی چوڑائی پکسلز میں ہے اور فونٹ کے سائز کے ساتھ تبدیل نہیں ہوتی ہے۔rempx

دیکھیں کہ بوٹسٹریپ گرڈ سسٹم کے پہلو کس طرح ایک آسان ٹیبل کے ساتھ متعدد آلات پر کام کرتے ہیں۔

اضافی چھوٹا
<576px
چھوٹا
≥576px
میڈیم
≥768px
بڑا
≥992px
اضافی بڑا
≥1200px
زیادہ سے زیادہ کنٹینر کی چوڑائی کوئی نہیں (خودکار) 540px 720px 960px 1140px
کلاس کا سابقہ .col- .col-sm- .col-md- .col-lg- .col-xl-
کالموں کا # 12
گٹر کی چوڑائی 30px (کالم کے ہر طرف 15px)
نیسٹیبل جی ہاں
کالم ترتیب دینا جی ہاں

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

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

مساوی چوڑائی

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

1 میں سے 2
2 میں سے 2
3 میں سے 1
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کچھ ریسپانسیو ڈسپلے یوٹیلیٹیز کے ساتھ ملا کر وقفوں کو ریسپانسیو بنائیں ۔

ایک Safari flexbox بگ تھا جس نے اسے بغیر کسی واضح 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>

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

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

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

3 میں سے 1
متغیر چوڑائی کا مواد
3 میں سے 3
3 میں سے 1
متغیر چوڑائی کا مواد
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.

کرنل
کرنل
کرنل
کرنل
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
col-sm
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 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.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>

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

سیدھ

کالموں کو عمودی اور افقی طور پر سیدھ میں کرنے کے لیے فلیکس باکس الائنمنٹ یوٹیلیٹیز استعمال کریں۔ انٹرنیٹ ایکسپلورر 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
.col-6 .col-sm-3
.col-6 .col-sm-3
.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
.col-6 .col-sm-4
.col-6 .col-sm-4
.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-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-auto
col-md-3 .ml-md-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اور کالموں کا سیٹ شامل کریں ۔ نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہئے جس میں 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
);

مکسنس

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

// 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 {
  @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);
  }
}
مرکزی مواد
ثانوی مواد
<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-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یا %) میں سیٹ کریں۔