Source

گرډ سیسټم

د دولس کالم سیسټم ، پنځه ډیفالټ ځواب ویونکي ټایرونو ، 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

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

	اضافي کوچنی <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

1 د 3 څخه

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د ځینې ځواب ویونکي ښودلو اسانتیاو سره په مخلوط کولو سره ځواب ویونکي کړئ .

دلته د سفاري فلیکس بکس بګ شتون درلود چې دا یې د واضح 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>

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

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

1 د 3 څخه

2 له 3 څخه (پراخ)

د 3 څخه 3

1 د 3 څخه

2 له 3 څخه (پراخ)

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

1 د 3 څخه

د متغیر چوک منځپانګې

د 3 څخه 3

1 د 3 څخه

د متغیر چوک منځپانګې

د 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

<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

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

تاسو کولی شئ د ساس مکسین هم وکاروئ 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

<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

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

.col-md-4

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

متغیرات

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

$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یا %) کې تنظیم کړئ.