گرڊ سسٽم
ٻارهن ڪالمن سسٽم، پنج ڊفالٽ جوابي ٽائر، Sass متغير ۽ ميڪسينز، ۽ درجنين اڳواٽ بيان ڪيل طبقن جي مهرباني، سڀني شڪلين ۽ سائزن جا لي آئوٽ ٺاهڻ لاءِ اسان جو طاقتور موبائل-پهرين فليڪس باڪس گرڊ استعمال ڪريو.
اهو ڪيئن ڪم ڪري ٿو
بوٽ اسٽريپ جو گرڊ سسٽم مواد کي ترتيب ڏيڻ ۽ ترتيب ڏيڻ لاءِ ڪنٽينرز، قطارن ۽ ڪالمن جو هڪ سلسلو استعمال ڪري ٿو. اهو flexbox سان ٺهيل آهي ۽ مڪمل طور تي جوابدار آهي. هيٺ ڏنل هڪ مثال آهي ۽ هڪ گهري نظر آهي ته گرڊ ڪيئن گڏ اچي ٿو.
flexbox سان نئون يا اڻ واقف؟ هي پڙهو CSS ٽرڪس فليڪس باڪس گائيڊ پس منظر، اصطلاحات، هدايتون، ۽ ڪوڊ جي ٽڪڙن لاءِ.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
مٿي ڏنل مثال اسان جي اڳواٽ بيان ڪيل گرڊ طبقن کي استعمال ڪندي ننڍي، وچولي، وڏي، ۽ اضافي وڏي ڊوائيسز تي ٽي برابر-چوڪر ڪالمن ٺاهي ٿو. اهي ڪالمن پيج ۾ والدين سان مرڪز ۾ هوندا آهن .container
.
ان کي ٽوڙڻ، هتي اهو ڪيئن ڪم ڪري ٿو:
- ڪنٽينرز توهان جي سائيٽ جي مواد کي مرڪز ۽ افقي طور تي پيڊ ڪرڻ جو هڪ ذريعو مهيا ڪن ٿا.
.container
جوابي پکسل جي ويڪر لاءِ استعمال ڪريو يا.container-fluid
سڀني ڏيکwidth: 100%
پورٽ ۽ ڊوائيس جي سائزن لاءِ. - قطارون ڪالمن لاءِ لپيٽيون آھن. هر ڪالمن ۾ افقي آهي
padding
(جنهن کي گٽر سڏيو ويندو آهي) انهن جي وچ ۾ خلا کي ڪنٽرول ڪرڻ لاء. انpadding
کان پوء قطار تي منفي مارجن سان مقابلو ڪيو ويندو آهي. اهڙي طرح، توهان جي ڪالمن ۾ سمورو مواد بصري طور تي کاٻي پاسي سان ترتيب ڏنل آهي. - گرڊ جي ترتيب ۾، مواد کي ڪالمن جي اندر رکڻو پوندو ۽ صرف ڪالمن ئي ٿي سگھي ٿو جيڪي قطار جا فوري ٻار هجن.
- flexbox جي مهرباني، گرڊ ڪالمن بغير ڪنهن مخصوص
width
جي خودڪار طور تي برابر ويڪر ڪالمن جي طور تي ترتيب ڏيندو. مثال طور،.col-sm
هر هڪ خودڪار طريقي سان 25٪ ويڪرو ٿي ويندو جو چار مثال ننڍي وقفي پوائنٽ ۽ مٿي کان. وڌيڪ مثالن لاءِ خودڪار ترتيب واري ڪالمن سيڪشن کي ڏسو . - ڪالمن جا ڪلاس ڏيکارين ٿا ڪالمن جو تعداد جيڪو توھان استعمال ڪرڻ چاھيو ٿا ممڪن 12 في قطار مان. تنهن ڪري، جيڪڏهن توهان چاهيو ٿا ته ٽي برابر-چوٿون ڪالمن پار، توهان استعمال ڪري سگهو ٿا
.col-4
. - ڪالمن
width
s فيصد ۾ مقرر ڪيا ويا آهن، تنهن ڪري اهي هميشه سيال هوندا آهن ۽ انهن جي والدين عنصر سان لاڳاپيل آهن. padding
انفرادي ڪالمن جي وچ ۾ گٽر ٺاهڻ لاءِ ڪالمن افقي هوندا آهن، جڏهن ته، توهانmargin
قطارنpadding
مان ۽ ڪالمن مان ختم ڪري سگهو.no-gutters
ٿا.row
.- گرڊ کي جوابي بڻائڻ لاءِ، پنج گرڊ بريڪ پوائنٽس آھن، ھڪڙو ھر جوابي بريڪ پوائنٽ لاءِ : سڀ بريڪ پوائنٽس (اضافي ننڍا)، ننڍا، وچولي، وڏا، ۽ اضافي وڏا.
- گرڊ بريڪ پوائنٽون گھٽ ۾ گھٽ چوٽي ميڊيا جي سوالن تي ٻڌل آھن، مطلب ته اھي ان ھڪڙي بريڪ پوائنٽ تي لاڳو ٿين ٿا ۽ انھن سڀني کان مٿي (مثال طور،
.col-sm-4
ننڍي، وچولي، وڏي، ۽ اضافي وڏين ڊوائيسز تي لاڳو ٿئي ٿو، پر پھرينxs
بريڪ پوائنٽ تي نه). - توھان استعمال ڪري سگھو ٿا اڳواٽ بيان ڪيل گرڊ ڪلاس (جهڙوڪ
.col-4
) يا Sass mixins وڌيڪ semantic markup لاءِ.
flexbox جي چوڌاري حدن ۽ ڪيڙن کان آگاهه رهو ، جهڙوڪ ڪجهه HTML عناصر کي فليڪس ڪنٽينرز طور استعمال ڪرڻ جي ناڪامي .
گرڊ جا اختيار
جڏهن ته بوٽ اسٽريپ em
s يا rem
s استعمال ڪري ٿو گھڻن سائزن کي بيان ڪرڻ لاءِ، px
s استعمال ڪيا ويندا آھن گرڊ بريڪ پوائنٽس ۽ ڪنٽينر جي چوٽي لاءِ. اهو ئي سبب آهي ته وييو پورٽ جي چوٽي پکسلز ۾ آهي ۽ فونٽ جي سائيز سان تبديل نه ٿيندي آهي .
ڏسو ته ڪيئن بوٽ اسٽريپ گرڊ سسٽم جا حصا ڪيترن ئي ڊوائيسن تي ڪم ڪن ٿا هڪ هٿ واري ٽيبل سان.
وڌيڪ ننڍو <576px |
ننڍو ≥576px |
وچولي ≥768px |
وڏو ≥992px |
اضافي وڏو ≥1200px |
|
---|---|---|---|---|---|
وڌ کان وڌ ڪنٽينر جي ويڪر | ڪو به (خودڪار) | 540px | 720px | 960px | 1140px |
ڪلاس جو اڳوڻو | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# ڪالمن جو | 12 | ||||
گٽر جي چوٽي | 30px (15px ڪالم جي هر پاسي تي) | ||||
Nestable | ها | ||||
ڪالمن جي ترتيب | ها |
خودڪار ترتيب واري ڪالمن
استعمال ڪريو بريڪ پوائنٽ-مخصوص ڪالمن جا ڪلاس آسان ڪالمن جي سائيز لاءِ بغير ڪنهن واضح نمبر واري ڪلاس کان سواءِ .col-sm-6
.
برابر ويڪر
مثال طور، هتي ٻه گرڊ لي آئوٽ آهن جيڪي هر ڊيوائس ۽ ڏيئو پورٽ تي لاڳو ٿين ٿا، کان xs
وٺي xl
. توهان کي گهربل هر بريڪ پوائنٽ لاءِ يونٽ کان گهٽ ڪلاسن جو تعداد شامل ڪريو ۽ هر ڪالمن جي ويڪر ساڳي هوندي.
<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>
برابر ويڪر گھڻ-ليڪ
برابر چوٽيءَ وارا ڪالم ٺاهيو جيڪي گھڻن لائينن کي گھيرو ڪري ھڪ داخل ڪري .w-100
جتي توھان چاھيو ٿا ته ڪالمن کي نئين لڪير ڏانھن ٽوڙيو وڃي. .w-100
ڪجهه جوابي ڊسپلي يوٽيلٽيز سان ملائي وقفي کي جوابي بڻايو .
اتي ھڪڙو سفاري فليڪس باڪس بگ ھو جنھن ھن کي ڪم ڪرڻ کان روڪيو بغير واضح flex-basis
يا border
. پراڻن برائوزر ورزن لاءِ حل آهن، پر انهن کي ضروري نه هجڻ گهرجي جيڪڏهن توهان جا ٽارگيٽ برائوزر بگي ورزن ۾ نه اچن.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</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>
گٽر
گٽرز جوابي طور تي ترتيب ڏئي سگھجن ٿيون بريڪ پوائنٽ-مخصوص پيڊنگ ۽ منفي مارجن يوٽيلٽي ڪلاسز. ڏنل قطار ۾ گٽرن کي تبديل ڪرڻ لاء، s تي هڪ منفي مارجن يوٽيلٽي .row
۽ ملندڙ پيڊنگ يوٽيلٽي کي جوڙيو .col
. .container
يا .container-fluid
والدين کي شايد ترتيب ڏيڻ جي ضرورت پوندي ته ناپسنديده اوور فلو کان بچڻ لاء، ٻيهر ميچنگ پيڊنگ يوٽيلٽي استعمال ڪندي .
هتي وڏي ( lg
) بريڪ پوائنٽ ۽ مٿي تي بوٽ اسٽريپ گرڊ کي ترتيب ڏيڻ جو هڪ مثال آهي. اسان .col
پيڊنگ کي وڌايو آهي .px-lg-5
، ان سان مقابلو ڪيو آهي ان سان .mx-lg-n5
والدين تي .row
۽ پوءِ .container
لفافي کي ترتيب ڏنو آهي .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
قطار ڪالمن
.row-cols-*
ڪالمن جو تعداد جلدي سيٽ ڪرڻ لاءِ جوابي ڪلاس استعمال ڪريو جيڪي توھان جي مواد ۽ ترتيب کي بھترين پيش ڪن ٿا. جڏهن ته عام .col-*
ڪلاس انفرادي ڪالمن تي لاڳو ٿين ٿا (مثال طور، .col-md-4
)، قطار ڪالمن جا ڪلاس والدين .row
تي شارٽ ڪٽ طور مقرر ڪيا ويا آهن.
ھي قطار ڪالمن جا ڪلاس استعمال ڪريو تڪڙو بنيادي گرڊ لي آئوٽ ٺاھڻ يا پنھنجي ڪارڊ جي ترتيب کي ڪنٽرول ڪرڻ لاءِ.
<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-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);
}
}
ترتيب ڏيڻ
عمودي ۽ افقي طور تي ڪالمن کي ترتيب ڏيڻ لاءِ flexbox alignment افاديت استعمال ڪريو. انٽرنيٽ ايڪسپلورر 10-11 فليڪس شين جي عمودي ترتيب کي سپورٽ نٿو ڪري جڏهن فليڪس ڪنٽينر min-height
هيٺ ڏيکاريل آهي. ڏسو Flexbugs #3 وڌيڪ تفصيل لاءِ.
عمودي ترتيب
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
افقي ترتيب
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
نه گٽر
اسان جي اڳواٽ بيان ڪيل گرڊ طبقن ۾ ڪالمن جي وچ ۾ گٽر کي ختم ڪري سگھجي ٿو .no-gutters
. اهو سڀني فوري ٻارن جي ڪالمن مان منفي margin
s .row
۽ افقي کي هٽائي ٿو.padding
ھتي آھي ماخذ ڪوڊ انھن طرزن کي ٺاھڻ لاءِ. نوٽ ڪريو ته ڪالمن اوور رائيڊز جو دائرو صرف پهرين ٻارن جي ڪالمن تائين آهي ۽ ان کي نشانو بڻايو ويو آهي وصف چونڊيندڙ ذريعي . جڏهن ته هي هڪ وڌيڪ مخصوص چونڊيندڙ ٺاهي ٿو، ڪالمن جي پيڊنگ اڃا به وڌيڪ ترتيب ڏئي سگهجي ٿي اسپيسنگ يوٽيلٽيز سان .
هڪ ڪنڊ کان ڪنڊ ڊيزائن جي ضرورت آهي؟ والدين کي ڇڏي ڏيو .container
يا .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
عملي طور تي، هتي اهو ڪيئن ڏسڻ ۾ اچي ٿو. نوٽ توهان هن کي استعمال ڪرڻ جاري رکي سگهو ٿا ٻين سڀني اڳواٽ بيان ڪيل گرڊ طبقن سان (بشمول ڪالمن جي چوٽي، جوابي سطح، ٻيهر ترتيب، ۽ وڌيڪ).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
ڪالمن لفافي
جيڪڏهن 12 کان وڌيڪ ڪالمن هڪ قطار ۾ رکيل آهن، اضافي ڪالمن جو هر گروپ، هڪ يونٽ جي طور تي، نئين لائين تي لپي ويندا.
کان وٺي 9 + 4 = 13 > 12، هي 4-ڪالمن-وائڊ ڊيو هڪ نئين لڪير تي ويڙهجي ويندو آهي هڪ ملندڙ يونٽ جي طور تي.
بعد ۾ ڪالم نئين لائين سان گڏ جاري رھندا آھن.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
ڪالمن جي ڀڃڪڙي
فليڪس باڪس ۾ ڪالمن کي نئين لڪير ۾ ٽوڙڻ لاءِ هڪ ننڍڙي هيڪ جي ضرورت آهي: هڪ عنصر شامل ڪريو width: 100%
جتي توهان چاهيو ٿا ته توهان پنهنجي ڪالمن کي نئين لڪير ۾ لپيٽڻ چاهيو. عام طور تي اهو ڪيترن ئي .row
ايس سان پورو ڪيو ويندو آهي، پر هر عمل درآمد جو طريقو هن لاء حساب نه ٿو ڪري سگهي.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
توھان پڻ ھن وقف کي لاڳو ڪري سگھو ٿا مخصوص وقفي پوائنٽن تي اسان جي جوابي ڊسپلي يوٽيلٽيز سان .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
ٻيهر ترتيب ڏيڻ
آرڊر ڪلاس
توهان جي مواد جي بصري ترتيب.order-
کي ڪنٽرول ڪرڻ لاء ڪلاس استعمال ڪريو . اهي ڪلاس جوابي آهن، تنهنڪري توهان سيٽ ڪري سگهو ٿا بريڪ پوائنٽ طرفان (مثال طور، ). سڀني پنجن گرڊ سطحن جي ذريعي مدد شامل آهي.order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
اتي پڻ جوابدار .order-first
۽ .order-last
طبقا آھن جيڪي ترتيب سان لاڳو ڪرڻ ۽ ( ) سان order
عنصر کي تبديل ڪن ٿا. انهن طبقن کي به ضرورت مطابق انگن اکرن سان ملائي سگهجي ٿو .order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
ڪالمن کي ترتيب ڏيڻ
توھان ٻن طريقن سان گرڊ ڪالمن کي آفسيٽ ڪري سگھو ٿا: اسان جا جوابي .offset-
گرڊ ڪلاس ۽ اسان جي مارجن يوٽيلٽيز . گرڊ طبقن کي ڪالمن سان ملائڻ لاءِ سائز ڪيو ويو آهي جڏهن ته مارجن تيز ترتيبن لاءِ وڌيڪ ڪارائتو آهن جتي آفسٽ جي چوٽي متغير آهي.
آفسيٽ ڪلاس
.offset-md-*
ڪلاس استعمال ڪندي ڪالمن کي ساڄي طرف منتقل ڪريو . اهي طبقا ڪالمن جي کاٻي پاسي واري مارجن کي ڪالمن جي حساب سان وڌائين ٿا *
. مثال طور، چار ڪالمن مٿان .offset-md-4
ھلندو آھي..col-md-4
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
جوابي بريڪ پوائنٽس تي ڪالمن کي صاف ڪرڻ جي اضافي ۾، توهان کي آفسيٽس ري سيٽ ڪرڻ جي ضرورت پوندي. گرڊ مثال ۾ هن عمل ۾ ڏسو .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
مارجن افاديت
v4 ۾ flexbox ڏانهن وڃڻ سان، توهان مارجن يوٽيلٽيز استعمال ڪري سگهو ٿا جهڙوڪ .mr-auto
ڀائرن جي ڪالمن کي هڪ ٻئي کان پري ڪرڻ لاءِ.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
نستو
پنھنجي مواد کي ڊفالٽ گرڊ سان نسٽ ڪرڻ لاءِ، موجوده ڪالمن ۾ ھڪ نئون .row
۽ ڪالمن جو سيٽ شامل ڪريو . Nested قطارن ۾ ڪالمن جو هڪ سيٽ شامل ڪرڻ گهرجي جيڪي 12 يا ان کان گهٽ شامل ڪن ٿا (اهو ضروري ناهي ته توهان سڀ 12 موجود ڪالمن استعمال ڪريو)..col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .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: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
ملائيندڙ
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();
@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: 30px !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
يا %
).