شبکه بریکت 5: از کاچلائی به افقی
- پچھل پرن BS5 گرڈ سسٹم
- پائیدھ پرن BS5 گرڈ ایکس اسمال
مثال شبکه: کاچلائی افقی
بیایید یک سیستم شبکه ساده ایجاد کنیم که در ابتدا در دستگاههای کوچک کاچلائی میشود و سپس در دستگاههای بزرگتر افقی میشود.
مثال زیر یک دو ستون کاچلائی ساده را نشان میدهد که در تمامی صفحات نمایش، 50/50% تقسیم میکند، به استثنای صفحات نمایش کوچک که به صورت خودکار کاچلائی میشود (100%):
مثال: کاچلائی افقی
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>کول 1 ...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>کول 2 ...</p>
</div>
</div>
</div>
تذکرہ:.col-sm-* کلاس میں شمار کا مطلب یہ ہوتا ہے کہ div کو کتنی کول کا چکر کرنا چاہئیں (کُل 12 کول)۔ اسی طرح،.col-sm-1 1 کول کے چکر،.col-sm-4 4 کول کے چکر،.col-sm-6 6 کول کے چکر، وغیرہ.
تذکرہ:کم از کم مجموعی مجموعہ 12 سے بچیں یا کم سے کم (کسی بھی 12 کول کو استعمال نہ کریں):
تذکرہ:تقسیم کے ذریعے .container-fluid کلاس کو .container، آپ کسی بھی full-width ترتیب تبدیل کرنے میں fixed-width جوابی کا ترتیب:
مثال: جوابی کانٹینر
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>کول 1 ...</p>
</div>
<div class="col-sm-6">
<p>کول 2 ...</p>
</div>
</div>
</div>
خودکار ترتیب کول
بوسٹپ 5 میں، تمام دیوائس کے لئے مساوی چوڑائی کا ایک سادا طریقہ ہے: صرف .col-size-* میں سے شمار کو حذف کریں، اور صرف col عناصر پر استعمال کریں .col-size کلاس۔بوسٹپ اپ کا پہچان سکتا ہے کہ کتنی تعداد کول ہیں، اور ہر کول کو مساوی چوڑائی ملتی ہوئی ہوتی ہے۔ سائز کلاس (sm، md وغیرہ) کا فیصلہ کریتی ہے کہ کول کیوں توجیحی طور پر چلنا چاہئیں:
<!-- دو ستون: تمام اسکرینوں کی 50% چوڑائی، جز کوچک سائز دیوائس (100% چوڑائی) --> <div class="row"> <div class="col-sm">1 of 2</div> <div class="col-sm">2 of 2</div> </div> <!-- چار ستون: تمام اسکرینوں کی 25% چوڑائی، جز کوچک سائز دیوائس (100% چوڑائی) --> <div class="row"> <div class="col-sm">1 of 4</div> <div class="col-sm">2 of 4</div> <div class="col-sm">3 of 4</div> <div class="col-sm">4 of 4</div> </div>
- پچھل پرن BS5 گرڈ سسٹم
- پائیدھ پرن BS5 گرڈ ایکس اسمال
