گرډ سیسټم

د دولس کالم سیسټم ، پنځه ډیفالټ ځواب ویونکي ټایرونو ، Sass متغیرونو او مکسینونو ، او لسګونه دمخه تعریف شوي ټولګیو څخه مننه د ټولو شکلونو او اندازو ترتیبونو رامینځته کولو لپاره زموږ ځواکمن ګرځنده - لومړی فلیکس باکس گرډ وکاروئ.

څنګه کار کوي

د بوټسټریپ گرډ سیسټم د مینځپانګې ترتیب او تنظیم کولو لپاره یو لړ کانټینرونه ، قطارونه او کالمونه کاروي. دا د فلیکس باکس سره جوړ شوی او په بشپړ ډول ځواب ویونکی دی. لاندې یو مثال او ژور نظر دی چې څنګه گرډ سره یوځای کیږي.

د فلیکس باکس سره نوي یا ناپیژندل شوي؟ د شاليد، اصطلاحاتو، لارښوونو، او کوډ ټوټو لپاره دا د 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-guttersد .row.
• د گرډ د ځواب ویونکي کولو لپاره، پنځه د گرډ بریک پواینټ شتون لري، یو د هر ځواب ورکوونکي بریک پواینټ لپاره : ټول بریک پواینټ (اضافي کوچني)، کوچني، منځني، لوی، او اضافي لوی.
• د ګریډ بریک پواینټ د لږ تر لږه د میډیا پوښتنو پراساس دي، پدې معنی چې دوی په هغه یوه بریک پواینټ کې پلي کیږي او ټول هغه چې پورته دي (د بیلګې په توګه، .col-sm-4په کوچنیو، متوسطه، لوی، او اضافي لویو وسایلو باندې تطبیق کیږي، مګر لومړی xsبریک پواینټ نه).
• تاسو کولی شئ د لا زیاتو سیمانټیک مارک اپ لپاره دمخه ټاکل شوي گرډ ټولګي (لکه .col-4) یا ساس مکسین وکاروئ .

د فلیکس باکس په شاوخوا کې د محدودیتونو او بګونو څخه خبر اوسئ ، لکه د فلیکس کانټینرونو په توګه د ځینې HTML عناصرو کارولو وړتیا نلري .

د ګریډ اختیارونه

پداسې حال کې چې بوټسټریپ د ډیری اندازو تعریف کولو لپاره ems یا s کاروي ، s د گرډ بریک پوائنټونو او کانټینر عرضونو لپاره کارول کیږي. دا ځکه چې د ویو پورټ عرض په پکسل کې دی او د فونټ اندازې سره نه بدلیږي .rempx

وګورئ چې څنګه د بوټسټریپ گرډ سیسټم اړخونه د یو لاسي میز سره په ډیری وسیلو کې کار کوي.

د اتوماتیک ترتیب کالمونه

د اسانه کالم اندازه کولو لپاره د بریک پوائنټ ځانګړي کالم ټولګي وکاروئ پرته له واضح شمیرې ټولګي لکه .col-sm-6.

مساوي - عرض

د مثال په توګه، دلته دوه د ګریډ ترتیبونه دي چې په هر وسیله او ویوپورټ کې پلي کیږي، xsله xl. د هرې وقفې نقطې لپاره چې تاسو ورته اړتیا لرئ د واحد څخه کم ټولګیو شمیر اضافه کړئ او هر کالم به ورته عرض وي.

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

د یو کالم پلنوالی ترتیب کول

د فلیکس بکس گرډ کالمونو لپاره اتوماتیک ترتیب پدې معنی هم دی چې تاسو کولی شئ د یو کالم عرض وټاکئ او د وروڼو کالمونه په اوتومات ډول د هغې شاوخوا بیا اندازه کړئ. تاسو کولی شئ د مخکینۍ تعریف شوي گرډ ټولګي وکاروئ (لکه څنګه چې لاندې ښودل شوي)، د گرډ مکسین، یا انلاین عرضونه. په یاد ولرئ چې نور کالمونه به د مرکزي کالم د عرض په پام کې نیولو سره بیا اندازه شي.

<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د کالمونو اندازه کولو لپاره ټولګي د دوی د مینځپانګې طبیعي عرض پراساس وکاروئ .

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

ځواب ورکوونکي ټولګي

د بوټسټریپ گرډ کې د پیچلي ځواب ورکوونکي ترتیبونو جوړولو لپاره د مخکینۍ تعریف شوي ټولګیو پنځه درجې شاملې دي. د خپلو کالمونو اندازه په اضافي کوچني ، کوچني ، متوسط ​​​​، لوی یا اضافي لوی وسیلو کې تنظیم کړئ که څه هم تاسو مناسب ګورئ.

ټول وقفې

د ګریډونو لپاره چې د کوچنیو وسیلو څخه تر لویو پورې ورته وي، د .colاو .col-*ټولګیو څخه کار واخلئ. کله چې تاسو د ځانګړي اندازې کالم ته اړتیا لرئ یو شمیر شوي ټولګي مشخص کړئ؛ که نه نو، د پاتې کیدو لپاره وړیا احساس وکړئ .col.

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

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

مخلوط او میچ کړئ

ایا نه غواړئ چې ستاسو کالمونه په ساده ډول په ځینې گرډ ټایرونو کې ودرول شي؟ د اړتیا سره سم د هرې درجې لپاره د مختلف ټولګیو ترکیب وکاروئ. د ښه نظر لپاره لاندې مثال وګورئ چې دا ټول څنګه کار کوي.

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

غوټۍ

ګټرونه د بریک پوائنټ ځانګړي پیډینګ او منفي حاشیې یوټیلټي ټولګیو لخوا په ځوابي ډول تنظیم کیدی شي. په ورکړل شوي قطار کې د ګټرونو بدلولو لپاره، د منفي .rowحاشیې یوټیلیټ په s کې او د پیډینګ اسانتیاو سره مطابقت .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>

السلیک

د عمودی او افقی کالمونو د تنظیم کولو لپاره د فلیکس باکس الینمینټ اسانتیاوې وکاروئ.

عمودی سمون

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

په عمل کې، دلته دا څنګه ښکاري. په یاد ولرئ چې تاسو کولی شئ دا د نورو ټولو پخوانیو تعریف شوي گرډ ټولګیو سره کارولو ته دوام ورکړئ (پشمول د کالم پلنوالی، ځواب ویونکي درجې، بیا ترتیبونه، او نور).

<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 څخه ډیر کالمونه په یوه قطار کې ځای په ځای شي، د اضافي کالمونو هر ګروپ به، د یو واحد په توګه، په نوې کرښه کې وتړل شي.

<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 سره سرته رسیږي، مګر د پلي کولو هره طریقه نشي کولی د دې حساب وکړي.

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

تاسو کولی شئ دا وقفه زموږ د غبرګون ښودلو اسانتیاو سره په ځانګړو وقفو ځایونو کې هم پلي کړئ .

<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

<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

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

په ځواب ویونکي وقفو کې د کالم پاکولو سربیره، تاسو ممکن د آفسیټونو بیا تنظیم کولو ته اړتیا ولرئ. دا د گرډ مثال کې په عمل کې وګورئ .

<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 کې فلیکس باکس ته د تګ سره، تاسو کولی شئ د حاشیې اسانتیاوې وکاروئ لکه .mr-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-*

<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 متغیرونو او مکسینونو کارولو اختیار لرئ. زموږ مخکیني تعریف شوي ګریډ ټولګي د ګړندي ځواب ویونکي ترتیبونو لپاره د کارولو لپاره چمتو ټولګیو بشپړ سویټ چمتو کولو لپاره ورته متغیرونه او مکسینونه کاروي.

متغیرات

متغیرات او نقشې د کالمونو شمیر، د ګټر پلنوالی، او د رسنیو د پوښتنې نقطه ټاکي چې په کوم ځای کې د تیر کالم پیل کول. موږ دا د پورته مستند شوي دمخه تعریف شوي ګریډ ټولګیو رامینځته کولو لپاره کاروو ، په بیله بیا د لاندې لیست شوي دودیز مکسینونو لپاره.

$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 متغیرونو او نقشو په کارولو سره ، دا ممکنه ده چې د مخکیني تعریف شوي گرډ ټولګي په بشپړ ډول تنظیم کړئ. د درجو شمیر، د رسنیو د پوښتنو ابعاد، او د کانټینر پلنوالی بدل کړئ - بیا بیا کمپایل کړئ.

کالمونه او ګترونه

د گرډ کالمونو شمیر د 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یا %) کې تنظیم کړئ.