اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
Check
in English

گرډ سیسټم

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

بېلګه

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

د فلیکس باکس سره نوي یا ناپیژندل شوي؟ د شاليد، اصطلاحاتو، لارښوونو، او کوډ ټوټو لپاره دا د CSS چالونو فلیکس بکس لارښود ولولئ .
کالم
کالم
کالم
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
html
<div class="container text-center">
  <!-- 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تاسو کولی شئ کالمونو ته د دوی طبیعي عرض ورکړئ .

د دې قطار کالمونو ټولګیو څخه کار واخلئ ترڅو ژر تر ژره لومړني گرډ ترتیبونه رامینځته کړئ یا ستاسو د کارت ترتیب کنټرول کړئ.

کالم
کالم
کالم
کالم
html
<div class="container text-center">
  <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>
کالم
کالم
کالم
کالم
html
<div class="container text-center">
  <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>
کالم
کالم
کالم
کالم
html
<div class="container text-center">
  <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>
کالم
کالم
کالم
کالم
html
<div class="container text-center">
  <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>
کالم
کالم
کالم
کالم
html
<div class="container text-center">
  <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>
کالم
کالم
کالم
کالم
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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-row-columns:  6;
$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);
  }
}
اصلي منځپانګه
ثانوي منځپانګه
html
<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-row-columnsد کالمونو د اعظمي شمیر د ټاکلو لپاره کارول کیږي .row-cols-*، د دې حد څخه پورته هره شمیره له پامه غورځول کیږي.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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یا %) کې تنظیم کړئ.