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

مساوی چوڑائی والے کالموں کو متعدد لائنوں میں توڑا جا سکتا ہے، لیکن ایک Safari flexbox بگ تھا جس نے اسے بغیر کسی واضح 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>

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

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

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>

مساوی چوڑائی کثیر قطار

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

کرنل

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>

سیدھ

کالموں کو عمودی اور افقی طور پر سیدھ میں کرنے کے لیے فلیکس باکس الائنمنٹ یوٹیلیٹیز استعمال کریں۔

عمودی سیدھ

تین کالموں میں سے ایک

<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 کالم وسیع div ایک متصل یونٹ کے طور پر ایک نئی لائن پر لپیٹ جاتا ہے۔

.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%جہاں بھی آپ اپنے کالموں کو نئی لائن میں لپیٹنا چاہتے ہیں وہاں ایک عنصر شامل کریں۔ عام طور پر یہ ایک سے زیادہ .rows کے ساتھ مکمل کیا جاتا ہے، لیکن عمل درآمد کا ہر طریقہ اس کا حساب نہیں دے سکتا۔

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

col-md-3 .ml-md-auto

col-auto .mr-auto

col-auto

<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اور کالموں کا سیٹ شامل کریں ۔ نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہئے جس میں 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
);

مکسنس

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

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

کالم اور گٹر

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