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>

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

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

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

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>

مساوي پلنوالی څو قطار

د مساوي پلنوالي کالمونه جوړ کړئ چې ډیری قطارونه پراخوي د هغه ځای په داخلولو سره .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.

کرنل
کرنل
کرنل
کرنل
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-12 .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-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;
  }
}

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

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

لومړی، مګر بې ترتیبه
دوهم، مګر وروستی
دریم، مګر لومړی
<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-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-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یا %) کې تنظیم کړئ.