Source

سیستەمی تۆڕ

تۆڕی فلیکسبۆکسی بەهێزی مۆبایل-یەکەم بەکاربهێنە بۆ دروستکردنی نەخشە بە هەموو شێوە و قەبارەیەک بەهۆی سیستەمێکی دوانزە ستوونی، پێنج قاتە وەڵامدەرەوەی پێشوەختە، گۆڕاو و میکسینەکانی Sass، و دەیان پۆلی پێشوەختە دیاریکراو.

چۆن کاردەکات

سیستەمی تۆڕی بووتستراپ زنجیرەیەک کۆنتێنەر و ڕیز و ستوون بەکاردەهێنێت بۆ داڕشتن و ڕێکخستنی ناوەڕۆک. بە فلیکس بۆکس دروستکراوە و بە تەواوی وەڵامدەرەوەیە. لە خوارەوە نموونەیەک و سەیرێکی قووڵ دەخەینەڕوو کە چۆن تۆڕەکە کۆدەبێتەوە.

تازەیت لە فلێکس بۆکس یان نامۆ؟ ئەم ڕێنماییە فلیکسبۆکسەی CSS Tricks بخوێنەرەوە بۆ زانینی پاشبنەما، زاراوە، ڕێنماییەکان و پارچە کۆدەکان.

یەکێک لە سێ ستوون

<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لەسەر ڕیزەکان بە پەراوێزی نەرێنی بەرپەرچی دەدرێتەوە. بەم شێوەیە، هەموو ناوەڕۆکەکانی ناو ستوونەکانت بە شێوەیەکی بینراو لە لای چەپەوە ڕێکدەخرێن.
لە نەخشەی تۆڕدا، ناوەڕۆک دەبێت لەناو ستوونەکاندا دابنرێت و تەنها ستوونەکان دەتوانن منداڵی دەستبەجێی ڕیزەکان بن.
بەهۆی flexbox، ستوونەکانی تۆڕ بەبێ دیاریکراو widthبە شێوەیەکی ئۆتۆماتیکی وەک ستوونی پانایی یەکسان داڕێژراون. بۆ نموونە چوار نموونەی .col-smهەریەکەیان بە شێوەیەکی ئۆتۆماتیکی 25% پان دەبێت لە خاڵی شکاندنی بچووکەوە و بەرەو سەرەوە. بۆ نموونەی زیاتر سەیری بەشی ستوونەکانی نەخشەی ئۆتۆماتیکی بکە.
پۆلەکانی ستوونەکان ژمارەی ستوونەکان دیاری دەکەن کە دەتەوێت بەکاریان بهێنیت لە کۆی 12 ستوونی ئەگەری بۆ هەر ڕیزێک. کەواتە، ئەگەر سێ ستوونی پانایی یەکسانت دەوێت لە درێژاییدا، دەتوانیت بەکاربهێنیت .col-4.
ستوونەکان widthبە ڕێژەی سەدی دانراون، بۆیە هەمیشە شلەن و قەبارەیان هەیە بە بەراورد بە توخمە باوکیان.
ستوونەکان ئاسۆیییان هەیە paddingبۆ دروستکردنی کانیاوەکان لە نێوان ستوونە تاکەکەسییەکان، بەڵام دەتوانیت marginلە ڕیزەکان و paddingلە ستوونەکان بە .no-guttersلەسەر .row.
بۆ ئەوەی تۆڕەکە وەڵامدەرەوە بێت، پێنج خاڵی شکاندنی تۆڕ هەیە، یەکێک بۆ هەر خاڵێکی شکاندنی وەڵامدەرەوە : هەموو خاڵەکانی شکاندن (بچووکی زیادە)، بچووک، مامناوەند، گەورە، و گەورەیەکی زیادە.
خاڵەکانی شکاندنی تۆڕ لەسەر بنەمای پرسیارەکانی میدیای کەمترین پاناییە، واتە بۆ ئەو خاڵە شکاندنە یەک و هەموو ئەوانەی سەرەوەی دەگونجێت (بۆ نموونە، .col-sm-4بۆ ئامێرە بچووکەکان، مامناوەندەکان، گەورەکان و گەورەکانی زیادە دەگونجێت، بەڵام xsخاڵی شکاندنی یەکەم نا).
دەتوانیت پۆلەکانی تۆڕی پێشوەختە پێناسەکراو (وەک .col-4) یان میکسینەکانی Sass بەکاربهێنیت بۆ نیشاندانی زیاتری مانادار.

ئاگاداری سنووردارکردن و هەڵەکانی دەوروبەری flexbox بە، وەک بێتوانایی لە بەکارهێنانی هەندێک توخمەکانی HTML وەکو کۆنتێنەری فلیکس .

هەڵبژاردەکانی تۆڕ

لە کاتێکدا کە Bootstrap ems یان s بەکاردەهێنێت remبۆ پێناسەکردنی زۆربەی قەبارەکان، pxs بۆ خاڵەکانی شکاندنی تۆڕ و پانایی کۆنتێنەرەکان بەکاردێت. ئەمەش لەبەر ئەوەیە کە پانایی ڤیوپۆرت بە پێکسڵە و لەگەڵ قەبارەی فۆنتەکەدا ناگۆڕێت .

بزانە چۆن لایەنەکانی سیستەمی تۆڕی Bootstrap لە سەرانسەری چەندین ئامێردا کاردەکەن بە خشتەی دەستی.

	بچووکی زیادە <576px	بچووک ≥576px	مامناوەند ≥768px	گەورە ≥992px	گەورەیەکی زیادە ≥1200px
زۆرترین پانایی دەفرەکە	هیچ (ئۆتۆ)	540px	720px	960px	1140px
پێشگرى پۆل	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# لە ستوونەکان	12. 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>

فرە هێڵ بە پانایی یەکسان

ستوونی پانایی یەکسان دروست بکە کە چەندین دێڕ دەگرێتەوە بە دانانی a .w-100لەو شوێنەی کە دەتەوێت ستوونەکان بشکێن بۆ هێڵێکی نوێ. پشووەکان بکە بە وەڵامدەرەوە بە تێکەڵکردن .w-100لەگەڵ هەندێک سوودمەندی پیشاندانی وەڵامدەرەوە .

هەڵەیەکی فلێکسبۆکسی سەفاری هەبوو کە ڕێگری دەکرد لە کارکردنی ئەمە بەبێ ئەوەی ڕوون flex-basisیان border. چارەسەر هەیە بۆ وەشانی وێبگەڕی کۆنتر، بەڵام نابێت پێویست بن ئەگەر وێبگەڕە ئامانجدارەکانت نەکەونە ناو وەشانی هەڵە.

col

<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

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

کۆل-سم-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>

تێکەڵ بکەو بەیەکیان بگەیەنە

ناتەوێت ستوونەکانت بە سادەیی لە هەندێک قاتەکانی تۆڕدا کۆببنەوە؟ بەپێی پێویست تێکەڵەیەک لە پۆلە جیاوازەکان بۆ هەر قاتێک بەکاربهێنە. بۆ بیرۆکەیەکی باشتر کە هەموو ئەمانە چۆن کاردەکەن سەیری نموونەی خوارەوە بکە.

.کۆل-مد-8

.کۆل-٦ .کۆل-مد-٤

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

کانیاوەکان

دەتوانرێت کانیاوەکان بە شێوەیەکی وەڵامدەرەوە ڕێکبخرێن بە پادکردنی تایبەت بە خاڵی شکاندن و پۆلەکانی سوودمەندی پەراوێزی نەرێنی. بۆ گۆڕینی کانیاوەکان لە ڕیزێکی دیاریکراودا، سوودمەندییەکی پەراوێزی نەرێنی لەسەر .rowو سوودمەندی پادکردنی هاوتا لەسەر .cols جووت بکە. لەوانەیە پێویستی بە ڕێکخستن بێت بۆ ئەوەی ڕژانی نەخوازراو نەبێت، دووبارە سوودمەندی پادکردنی هاوتا بەکاربهێنرێت .container..container-fluid

لێرەدا نموونەیەک لە خۆکارکردنی تۆڕی Bootstrap لە 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);
  }
}

ڕێکخستن

سوودمەندییەکانی ڕێکخستنی flexbox بەکاربهێنە بۆ ڕێکخستنی ستوونەکان بە شێوەی ڕاست و ئاسۆیی. ئینتەرنێت ئێکسپلۆرەر ١٠-١١ پشتگیری لە ڕێکخستنی ڕاست و چەپی بابەتە فلیکسەکان ناکات کاتێک کە دەفری فلیکسەکە 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. marginئەمەش s ی نەرێنی لە هەموو ستوونەکانی منداڵانی دەستبەجێ .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-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>

پێچانی ستوون

ئەگەر زیاتر لە ١٢ ستوون لەناو یەک ڕیزدا دابنرێت، هەر گروپێکی ستوونی زیادە وەک یەک یەکە دەپێچرێتەوە لەسەر هێڵێکی نوێ.

.col-9

.col-4
بەو پێیەی 9 + 4 = 13 > 12، ئەم دیڤە 4 ستوونییە فراوانە وەک یەک یەکەی بەردەوام لەسەر هێڵێکی نوێ دەپێچرێتەوە.

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

ستوونەکان دەشکێن

شکاندنی ستوونەکان بۆ دێڕێکی نوێ لە flexbox پێویستی بە هاکێکی بچووک هەیە: زیادکردنی توخمێک لەگەڵ 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-2). پشتگیری لە 1ڕێگەی 12لە سەرانسەری هەر پێنج قاتەکەی تۆڕەکەدا لەخۆدەگرێت.

یەکەم لە 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

.کۆل-مد-4

.col-md-4 .ئۆفسێت-md-4

.col-md-3 .ئۆفسێت-md-3

.col-md-6 .ئۆفسێت-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>

جگە لە پاککردنەوەی ستوون لە خاڵەکانی شکاندنی وەڵامدەرەوە، لەوانەیە پێویستت بە ڕێستکردنی ئۆفسێتەکان بێت. ئەمە بە کردار لە نموونەی تۆڕەکەدا ببینە .

.کۆل-سم-5 .کۆل-مد-٦

.col-sm-5 .ئۆفسێت-sm-2 .col-md-6 .ئۆفسێت-md-0

.کۆل-sm-6 .کۆل-md-5 .کۆل-lg-6

.col-sm-6 .col-md-5 .ئۆفسێت-md-2 .col-lg-6 .ئۆفسێت-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>

خزمەتگوزارییەکانی پەراوێز

لەگەڵ گواستنەوە بۆ flexbox لە v4، دەتوانیت سوودمەندییەکانی پەراوێز بەکاربهێنیت وەک .mr-autoناچارکردنی ستوونەکانی خوشک و برا لە یەکتر دوور بخەیتەوە.

.کۆل-مد-4

.col-md-4 .ml-ئۆتۆماتیکی

.col-md-3 .ml-md-ئۆتۆ

.کۆل-ئۆتۆ .م.ر-ئۆتۆ

.کۆڵ-ئۆتۆ

<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و کۆمەڵێک زیاد بکە لەناو ستوونێکی .col-sm-*هەبوودا . .col-sm-*ڕیزەکانی هێلانەکراو دەبێت کۆمەڵێک ستوون لەخۆ بگرن کە کۆدەبنەوە تا ١٢ یان کەمتر (پێویست ناکات هەر ١٢ ستوونی بەردەست بەکاربهێنیت).

ئاستی یەکەم: .col-sm-9

ئاستی دووەم: .col-8 .col-sm-6

ئاستی دووەم: .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 ی Bootstrap، بژاردەی بەکارهێنانی گۆڕاوەکانی Sass و mixinsت هەیە بۆ دروستکردنی نەخشەی لاپەڕەی تایبەت و مانادار و وەڵامدەرەوە. پۆلەکانی تۆڕی پێشوەختە پێناسەکراومان هەمان ئەم گۆڕاو و میکسینانە بەکاردەهێنن بۆ دابینکردنی کۆمەڵەیەکی تەواو لە پۆلە ئامادەکراوەکان بۆ بەکارهێنان بۆ نەخشە وەڵامدەرەوە خێراکان.

گۆڕاوەکان

گۆڕاوەکان و نەخشەکان ژمارەی ستوونەکان، پانایی کانیاو و خاڵی پرسیاری میدیا دیاری دەکەن کە تێیدا دەست بە ستوونی هەڵدەفڕێت دەکرێت. ئێمە ئەمانە بەکاردەهێنین بۆ دروستکردنی پۆلەکانی تۆڕی پێشوەختە پێناسەکراو کە لە سەرەوە بەڵگەیان لەسەر کراوە، هەروەها بۆ ئەو میکسینە تایبەتانەی کە لە خوارەوە ئاماژەیان پێکراوە.

$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
);

میکسینەکان

میکسینەکان بە هاوبەشی لەگەڵ گۆڕاوە تۆڕەکان بەکاردەهێنرێن بۆ دروستکردنی CSSی مانادار بۆ ستوونی تۆڕی تاکەکەسی.

// 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, یان %).