بوت استرپ 5 مثال گرید
- صفحه قبل گرید BS5 XXL
- صفحه بعدی قالب پایه BS5
ایک چینش میں، ہم نے بوتسپر 5 گرڈ لائحہ کے مثالوں کو جمع کیا ہے。
سه ستون برابر
برای استفاده از تعداد مشخصی عناصر .col طبقه، Bootstrap تعداد عناصر موجود را شناسایی میکند (و ستونهای یکسانسایز ایجاد میکند). در مثال زیر، از سه عنصر col استفاده شده است، هر کدام با عرض 33.33٪.
مثال
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
سه ستون برابر با استفاده از اعداد
شما همچنین میتوانید از اعداد برای کنترل عرض ستون استفاده کنید. فقط مطمئن شوید که مجموع برابر یا کمتر از 12 است (نیاز به استفاده از تمام 12 ستون موجود نیست):
مثال
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
سه ستون نابرابر
برای ایجاد ستونهای متفاوت، باید از اعداد استفاده کنید. مثال زیر 25%/50%/25% تقسیم ایجاد میکند:
مثال
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
تنظیم عرض یک ستون
اما، فقط تنظیم عرض یک ستون کافی است و بگذارید ستونهای برادر در اطراف به صورت خودکار تنظیم شوند. مثال زیر 25%/50%/25% تقسیم ایجاد میکند:
مثال
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
بیشتر ستونهای برابر
مثال
<!-- دو ستون برابر --> <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 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- شش ستون برابر --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
شما همچنین میتوانید از .row-cols-* کنترلهای نوع ستون باید در کنار یکدیگر باشند (مهم نیست که چند ستون باشند):
مثال
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
بیشتر ستونهای متفاوت
مثال
<!-- دو ستونهای متفاوت --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Four unequal columns --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
بلندی سے بلندی
اگر کسی سطر کی بلندی دوسرے سے بلندی کے مقابلے میں بلندی سے بلندی کیوں کہ اگر آپ،
مثال
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
نچلے سطر
یہ مثال، دو سطر نمائش کا قیام کیسے ممکن ہوتا ہے، جس میں ایک سطر میں دوسرے دو سطر ہیں:
مثال
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
مجذوبیت کلاس
بوت اسٹپ 5 گرید سسٹم میں پانچ کلاس ہیں:
.col-(بہت چھوٹا اپریشن - اسکرین چوڑائی 576 پیکسل سے کم).col-sm-(چھوٹا اپریشن - اسکرین چوڑائی 576 پیکسل یا اس سے زیادہ).col-md-(بہت چھوٹا اپریشن - اسکرین چوڑائی 768 پیکسل یا اس سے زیادہ).col-lg-(بڑا اپریشن - اسکرین چوڑائی 992 پیکسل یا اس سے زیادہ).col-xl-(xlarge اپریشن - اسکرین چوڑائی 1200px یا اس سے زیادہ).col-xxl-(xxlarge اپریشن - اسکرین چوڑائی 1400px یا اس سے زیادہ)
آپ میں دیکھیں کسی بھی کلاس کو کمابین کر سکتے ہیں تاکہ مزید متحرک اور لگائش کاری کی نمائش بنائی جاسکے。
نکات:کسی بھی کلاس کو مساوی کیوں کہ اگر آپ، sm اور md ایک ہی چوڑائی کا قیام کرسکتے ہیں، تو صرف، sm。
پلاسٹ سے افقی
یہ مثال، سطر نمائش کا قیام کیسے ممکن ہوتا ہے، کا مظاہرہ کرتا ہے، جو ابتدائی طور پر بہت چھوٹی اپریشنوں میں پلاسٹ، اور بڑے اپریشنوں (sm، md، lg اور xl) میں افقی نمائش بن جاتا ہے:
مثال
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</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>
مکس و ماتچ
مثال
<!-- در دستگاههای فوقالعاده کوچک 50/50 تقسیم میشود، در دستگاههای بزرگ 75/25 تقسیم میشود --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- در دستگاههای فوقالعاده کوچک، کوچک، متوسط 58/42 تقسیم میشود، در دستگاههای بزرگ و فوقالعاده بزرگ 66.3/33.3 تقسیم میشود --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- در دستگاههای کوچک 25/75 تقسیم میشود، در دستگاههای متوسط 50/50 تقسیم میشود، در دستگاههای بزرگ و فوقالعاده بزرگ 33/66 تقسیم میشود. در دستگاههای فوقالعاده کوچک به صورت خودکار به هم چسبیده (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
بدون gutter
برای تغییر فضای بین ستونها (فضای اضافی)، لطفاً از هر .g-1|2|3|4|5 کلاس (.g-4 این مقدار پیشفرض است).
برای حذف کامل نوارهای چسبیده (gutter)، لطفاً از .g-0:
مثال
<div class="row g-0">
- صفحه قبل گرید BS5 XXL
- صفحه بعدی قالب پایه BS5
