گرڊ سسٽم
ٻارهن ڪالمن سسٽم، ڇهه ڊفالٽ جوابي درجا، Sass متغير ۽ ميڪسينز، ۽ درجنين اڳواٽ بيان ڪيل طبقن جي مهرباني، سڀني شڪلن ۽ سائزن جا لي آئوٽ ٺاهڻ لاءِ اسان جو طاقتور موبائل-پهرين فليڪس باڪس گرڊ استعمال ڪريو.
مثال
بوٽ اسٽريپ جو گرڊ سسٽم مواد کي ترتيب ڏيڻ ۽ ترتيب ڏيڻ لاءِ ڪنٽينرز، قطارن ۽ ڪالمن جو هڪ سلسلو استعمال ڪري ٿو. اهو flexbox سان ٺهيل آهي ۽ مڪمل طور تي جوابدار آهي. هيٺ ڏنل هڪ مثال آهي ۽ هڪ تفصيلي وضاحت آهي ته گرڊ سسٽم ڪيئن گڏ اچي ٿو.
<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 متغيرن کي استعمال ڪرڻ لاءِ توھان جي لاءِ اڃا وڌيڪ لچڪدار.
flexbox جي چوڌاري حدن ۽ ڪيڙن کان آگاهه رهو ، جهڙوڪ ڪجهه HTML عناصر کي فليڪس ڪنٽينرز طور استعمال ڪرڻ جي ناڪامي .
گرڊ جا اختيار
بوٽ اسٽريپ جو گرڊ سسٽم سڀني ڇهن ڊفالٽ بريڪ پوائنٽس، ۽ ڪنهن به بريڪ پوائنٽس کي ترتيب ڏئي سگھي ٿو جيڪو توهان ترتيب ڏيو ٿا. ڇهه ڊفالٽ گرڊ ٽائر هن ريت آهن:
- وڌيڪ ننڍو (xs)
- ننڍو (sm)
- وچولي (ايم ڊي)
- وڏو (lg)
- وڏو (xl)
- اضافي اضافي وڏو (xxl)
جيئن مٿي ذڪر ڪيو ويو آهي، انهن مان هر هڪ بريڪ پوائنٽس پنهنجو ڪنٽينر، منفرد ڪلاس پريفڪس، ۽ تبديل ڪندڙ آهن. ھتي آھي ڪيئن گرڊ انھن بريڪ پوائنٽن ۾ تبديل ٿي:
xs <576px |
sm ≥576px |
md ≥768px |
ايل جي ≥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 کاٻي ۽ ساڄي پاسي) | |||||
حسب ضرورت گٽر | ها | |||||
Nestable | ها | |||||
ڪالمن جي ترتيب | ها |
خودڪار ترتيب واري ڪالمن
استعمال ڪريو بريڪ پوائنٽ-مخصوص ڪالمن جا ڪلاس آسان ڪالمن جي سائيز لاءِ بغير ڪنهن واضح نمبر واري ڪلاس کان سواءِ .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>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">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
۽ ڪالمن جو سيٽ شامل ڪريو . Nested قطارن ۾ ڪالمن جو هڪ سيٽ شامل ڪرڻ گهرجي جيڪي 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 فائلن کي استعمال ڪندي، توهان وٽ اختيار آهي 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
);
ملائيندڙ
Mixins استعمال ٿيل آھن گرڊ متغير سان گڏ انفرادي گرڊ ڪالمن لاءِ سيمينٽڪ سي ايس ايس پيدا ڪرڻ لاءِ.
// 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);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
مثال استعمال
توھان تبديل ڪري سگھوٿا متغيرن کي پنھنجي مرضي مطابق قدرن ۾، يا صرف mixins کي انھن جي ڊفالٽ ويلن سان استعمال ڪريو. ھتي ھڪڙو مثال آھي ڊفالٽ سيٽنگون استعمال ڪرڻ لاءِ ٻن ڪالمن واري ترتيب جي وچ ۾ فرق سان.
.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 variables ذريعي تبديل ڪري سگھجي ٿو. $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
يا %
).