گرډ سیسټم
د دولس کالم سیسټم، شپږ ډیفالټ ځواب ویونکي ټایرونو، Sass متغیرونو او مکسینونو، او لسګونه مخکیني ټولګیو څخه مننه د ټولو شکلونو او اندازو ترتیبونو جوړولو لپاره زموږ ځواکمن ګرځنده - لومړی فلیکس باکس گرډ وکاروئ.
بېلګه
د بوټسټریپ گرډ سیسټم د مینځپانګې ترتیب او تنظیم کولو لپاره یو لړ کانټینرونه ، قطارونه او کالمونه کاروي. دا د فلیکس باکس سره جوړ شوی او په بشپړ ډول ځواب ویونکی دی. لاندې یو مثال او ژور توضیح دی چې څنګه د شبکې سیسټم سره یوځای کیږي.
<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
, andxxl
). دا پدې مانا ده چې تاسو کولی شئ د هرې وقفې پواسطه کانټینر او د کالم اندازه کول او چلند کنټرول کړئ. -
کانټینرونه مرکز او په افقی ډول ستاسو مینځپانګه پیډ کړئ.
.container
د ځواب ویونکي پکسل عرض لپاره، د.container-fluid
ټولوwidth: 100%
لیدونو او وسیلو لپاره، یا یو ځواب ویونکی کانټینر (د بیلګې په توګه،.container-md
) د مایع او پکسل پلنوالی ترکیب لپاره. -
قطارونه د کالمونو لپاره ریپرونه دي. هر کالم د
padding
دوی تر مینځ د ځای کنټرول لپاره افقی (د ګټر په نوم یادیږي) لري. داpadding
بیا په قطارونو کې د منفي حاشیو سره مقابله کیږي ترڅو ډاډ ترلاسه شي چې ستاسو په کالمونو کې مینځپانګه په لید کې کیڼ اړخ ته تنظیم شوې. قطارونه د بدلون کونکي ټولګیو ملاتړ هم کوي ترڅو ستاسو د مینځپانګې فاصله بدلولو لپاره په مساوي ډول د کالم اندازه کولو او ګټر کلاسونو پلي کولو لپاره. -
کالمونه په زړه پورې ډول انعطاف وړ دي. دلته په هر قطار کې 12 ټیمپلیټ کالمونه شتون لري، تاسو ته اجازه درکوي د عناصرو مختلف ترکیبونه رامینځته کړئ چې د کالمونو شمیر پراخه کړي. د کالم ټولګي د ټیمپلیټ کالمونو شمیره په ګوته کوي چې اوږدوالی لري (د بیلګې په توګه،
col-4
څلور واړه).width
s په فیصدو کې تنظیم شوي نو تاسو تل ورته نسبي اندازه لرئ. -
ګټرونه هم ځواب ویونکي او د تنظیم وړ دي. د ګټر ټولګي په ټولو بریک پوائنټونو کې شتون لري ، د ټولو ورته اندازو سره زموږ د حاشیې او پیډینګ فاصلو سره. افقی ګترونه د ټولګیو سره
.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
. د هرې وقفې نقطې لپاره چې تاسو ورته اړتیا لرئ د واحد څخه کم ټولګیو شمیر اضافه کړئ او هر کالم به ورته عرض وي.
<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>
د یو کالم پلنوالی ترتیب کول
د فلیکس بکس گرډ کالمونو لپاره اتوماتیک ترتیب پدې معنی هم دی چې تاسو کولی شئ د یو کالم عرض وټاکئ او د وروڼو کالمونه په اوتومات ډول د هغې شاوخوا بیا اندازه کړئ. تاسو کولی شئ د مخکینۍ تعریف شوي گرډ ټولګي وکاروئ (لکه څنګه چې لاندې ښودل شوي)، د گرډ مکسین، یا انلاین عرضونه. په یاد ولرئ چې نور کالمونه به د مرکزي کالم د عرض په پام کې نیولو سره بیا اندازه شي.
<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
د کالمونو اندازه کولو لپاره ټولګي د دوی د مینځپانګې طبیعي عرض پراساس وکاروئ .
<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
.
<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
).
<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>
مخلوط او میچ کړئ
ایا نه غواړئ چې ستاسو کالمونه په ساده ډول په ځینې گرډ ټایرونو کې ودرول شي؟ د اړتیا سره سم د هرې درجې لپاره د مختلف ټولګیو ترکیب وکاروئ. د ښه نظر لپاره لاندې مثال وګورئ چې دا ټول څنګه کار کوي.
<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-*
<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
یا %
) کې تنظیم کړئ.