گرډ سیسټم

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

په دې پاڼه کې

بېلګه

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

د فلیکس باکس سره نوي یا ناپیژندل شوي؟ د شاليد، اصطلاحاتو، لارښوونو، او کوډ ټوټو لپاره دا د CSS چالونو فلیکس بکس لارښود ولولئ .

کالم

<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په sm, md, lg, xl, and xxl). دا پدې مانا ده چې تاسو کولی شئ د هرې وقفې پواسطه کانټینر او د کالم اندازه کول او چلند کنټرول کړئ.
کانټینرونه مرکز او په افقی ډول ستاسو مینځپانګه پیډ کړئ. .containerد ځواب ویونکي پکسل عرض لپاره، د .container-fluidټولو width: 100%لیدونو او وسیلو لپاره، یا یو ځواب ویونکی کانټینر (د بیلګې په توګه، .container-md) د مایع او پکسل پلنوالی ترکیب لپاره.
قطارونه د کالمونو لپاره ریپرونه دي. هر کالم د paddingدوی تر مینځ د ځای کنټرول لپاره افقی (د ګټر په نوم یادیږي) لري. دا paddingبیا په قطارونو کې د منفي حاشیو سره مقابله کیږي ترڅو ډاډ ترلاسه شي چې ستاسو په کالمونو کې مینځپانګه په لید کې کیڼ اړخ ته تنظیم شوې. قطارونه د بدلون کونکي ټولګیو ملاتړ هم کوي ترڅو ستاسو د مینځپانګې فاصله بدلولو لپاره په مساوي ډول د کالم اندازه کولو او ګټر کلاسونو پلي کولو لپاره.
کالمونه په زړه پورې ډول انعطاف وړ دي. دلته په هر قطار کې 12 ټیمپلیټ کالمونه شتون لري، تاسو ته اجازه درکوي د عناصرو مختلف ترکیبونه رامینځته کړئ چې د کالمونو شمیر پراخه کړي. د کالم ټولګي د ټیمپلیټ کالمونو شمیره په ګوته کوي چې اوږدوالی لري (د بیلګې په توګه، col-4څلور واړه). widths په فیصدو کې تنظیم شوي نو تاسو تل ورته نسبي اندازه لرئ.
ګټرونه هم ځواب ویونکي او د تنظیم وړ دي. د ګټر ټولګي په ټولو بریک پوائنټونو کې شتون لري ، د ټولو ورته اندازو سره زموږ د حاشیې او پیډینګ فاصلو سره. افقی ګترونه د ټولګیو سره .gx-*، عمودی ګټرونه د ټولګیو سره .gy-*، یا ټول ګترونه د .g-*ټولګیو سره بدل کړئ. .g-0د ګترونو لرې کولو لپاره هم شتون لري.
د Sass متغیرات، نقشې، او مکسین ګریډ ته ځواک ورکوي. که تاسو نه غواړئ په بوټسټریپ کې د مخکینۍ تعریف شوي گرډ ټولګي وکاروئ ، تاسو کولی شئ زموږ د گرډ سرچینه ساس وکاروئ ترڅو خپل ځان د ډیر سیمانټیک مارک اپ سره رامینځته کړئ. موږ ستاسو لپاره حتی د لوی انعطاف لپاره د دې Sass متغیرونو مصرف کولو لپاره ځینې CSS دودیز ملکیتونه هم شامل کوو.

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

قطار کالمونه

ځواب ورکوونکي ټولګي وکاروئ .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د کالمونو نوی او سیټ اضافه کړئ . په نیست شوي قطارونو کې باید د کالمونو سیټ شامل وي چې تر 12 یا لږو پورې اضافه کوي (دا اړینه نده چې تاسو ټول 12 موجود کالمونه وکاروئ)..col-sm-*.col-sm-*

کچه 1: .col-sm-3

کچه 2: .col-8 .col-sm-6

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

متغیرات

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

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

مکسین

مکسین د ګریډ متغیرونو سره په ګډه کارول کیږي ترڅو د انفرادي گرډ کالمونو لپاره سیمانټیک سی ایس ایس رامینځته کړي.

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

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

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