سیستەمی تۆڕ

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

لەم پەیجەدا

نموونە

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

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

ستوون

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

چۆن کاردەکات

بە شکاندنی، لێرەدا چۆن سیستەمی تۆڕەکە کۆدەبێتەوە:

تۆڕەکەمان پشتگیری لە شەش خاڵی شکاندنی وەڵامدەرەوە دەکات . خاڵەکانی شکاندن لەسەر بنەمای min-widthپرسیارەکانی میدیایە، واتە کاریگەرییان لەسەر ئەو خاڵە شکاندنە و هەموو ئەوانەی سەرەوەی هەیە (بۆ نموونە، بۆ , , , , و .col-sm-4دەگونجێت ). ئەمەش واتە دەتوانیت قەبارە و هەڵسوکەوتی دەفر و ستوونەکان بە هەر خاڵێکی شکاندن کۆنتڕۆڵ بکەیت.smmdlgxlxxl
کۆنتێنەرەکان لە ناوەڕاست و ئاسۆیی ناوەڕۆکەکەت پاد دەکەن. .containerبۆ پانایی پێکسڵی وەڵامدەرەوە بەکاربهێنە ، .container-fluidبۆ width: 100%لە سەرانسەری هەموو دەرچەی بینین و ئامێرەکاندا، یان دەفرێکی وەڵامدەرەوە (بۆ نموونە، .container-md) بۆ تێکەڵەیەک لە پانی شلە و پێکسڵ.
ڕیزەکان پێچانە بۆ ستوونەکان. هەر ستوونێک ئاسۆیی هەیە padding(کە پێی دەوترێت کانیاو) بۆ کۆنترۆڵکردنی بۆشایی نێوانیان. پاشان ئەمە paddingلەسەر ڕیزەکان بە پەراوێزی نەرێنی بەرپەرچ دەدرێتەوە بۆ دڵنیابوون لەوەی ناوەڕۆکی ناو ستوونەکانت بە شێوەیەکی بینراو لە لای چەپەوە ڕێکدەخرێت. هەروەها ڕیزەکان پشتگیری لە پۆلەکانی دەستکاریکەر دەکەن بۆ ئەوەی بە شێوەیەکی یەکسان قەبارەدانانی ستوون و پۆلەکانی کانیاو بەکاربهێنن بۆ گۆڕینی دووری ناوەڕۆکەکەت.
ستوونەکان بە شێوەیەکی ناباوەر نەرم و نیانن. لە هەر ڕیزێکدا ١٢ ستوونی قاڵب بەردەستە، ڕێگەت پێدەدات پێکهاتەی جیاوازی توخمەکان دروست بکەیت کە هەر ژمارەیەک ستوون دەگرێتەوە. پۆلەکانی ستوون ژمارەی ستوونەکانی قاڵب بۆ span دیاری دەکەن (بۆ نموونە، span col-4چوار). widths بە ڕێژەی سەدی دانراوە بۆیە هەمیشە هەمان قەبارەی ڕێژەییت هەبێت.
هەروەها کانیاوەکان وەڵامدەرەوەن و دەتوانرێت بەپێی خواستی خۆت دابنرێت. پۆلەکانی کانیاو لە سەرانسەری هەموو خاڵەکانی شکاندن بەردەستە، بە هەموویان هەمان قەبارەی پەراوێز و دووری پادکردنمان . کانیاوی ئاسۆیی بە .gx-*پۆلەکان بگۆڕە، کانییە ڕاستەکان بە .gy-*, یان هەموو کانیاوەکان بە .g-*پۆلەکان بگۆڕە. .g-0هەروەها بۆ لابردنی کانیاوەکان بەردەستە.
گۆڕاوە ساسەکان، نەخشەکان و میکسینەکان کارەبا دەدەن بە تۆڕەکە. ئەگەر ناتەوێت پۆلەکانی تۆڕی پێشوەختە دیاری کراو لە Bootstrap بەکاربهێنیت، دەتوانیت سەرچاوەی تۆڕەکەمان Sass بەکاربهێنیت بۆ دروستکردنی پۆلەکانی خۆت بە نیشاندانی مانادارتر. هەروەها ئێمە هەندێک تایبەتمەندی تایبەتمەندی CSS لەخۆدەگرین بۆ بەکارهێنانی ئەم گۆڕاوانەی Sass بۆ نەرمییەکی زیاتر بۆ تۆ.

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

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

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

بچووکی زیادە (xs)
بچووک (sm)
مامناوەند (md)
گەورە (lg)
گەورەیی زیادە (xl)
گەورەی زیادە (xxl)

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

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
دەفر`max-width`	هیچ (ئۆتۆ)	540px	720px	960px	1140px	1320px
پێشگرى پۆل	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# لە ستوونەکان	12. 12
پانایی کانیاو	1.5rem (.75rem لە چەپ و ڕاست)
کانیاوەکانی تایبەت بەخۆت	بەڵێ
هێلانە	بەڵێ
داواکردنی ستوون	بەڵێ

ستوونەکانی داڕشتنی ئۆتۆماتیکی

پۆلەکانی ستوونی تایبەت بە خاڵی شکاندن بەکاربهێنە بۆ قەبارەدانانی ئاسانی ستوون بەبێ پۆلێکی ژمارەدار ڕوون وەک .col-sm-6.

یەکسان-پانی

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

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>

دانانی پانایی یەک ستوون

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

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-*بۆ ئەوەی بە خێرایی ژمارەی ستوونەکان دابنێیت کە بە باشترین شێوە ناوەڕۆک و شێوازەکەت ڕەندەر دەکەن. لە کاتێکدا .col-*کە پۆلە ئاساییەکان بۆ تاکە ستوونەکان بەکاردەهێنرێن (بۆ نموونە، .col-md-4)، پۆلەکانی ستوونی ڕیزەکان لەسەر باوک .rowوەک کورتکراوەیەک دانراون. لەگەڵ .row-cols-autoخۆت دەتوانیت پانایی سروشتی خۆیان بدەیت بە ستوونەکان.

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

ستوون

<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-auto">
    <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);
  }
}

هێلانەکردن

بۆ هێلانەکردنی ناوەڕۆکەکەت بە تۆڕی پێشوەختە، ستوونێکی نوێ .rowو کۆمەڵێک زیاد بکە لەناو ستوونێکی .col-sm-*هەبوودا . .col-sm-*ڕیزەکانی هێلانەکراو دەبێت کۆمەڵێک ستوون لەخۆ بگرن کە کۆدەبنەوە تا ١٢ یان کەمتر (پێویست ناکات هەر ١٢ ستوونی بەردەست بەکاربهێنیت).

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

میکسینەکان

میکسینەکان بە هاوبەشی لەگەڵ گۆڕاوە تۆڕەکان بەکاردەهێنرێن بۆ دروستکردنی 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

نموونەی بەکارهێنان

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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: 1.5rem !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, یان %).