في هذا الدرس 13تصفّح المواضيع
- من الكلاسات المساعدة في bootsrap هو كلاس border, الذي يستخدم في اضافة او ازالة border من اي عنصر.
- كلاس border وحده يعطي border: 1px solid black.
- لعمل border في احد الجوانب فقط يمكن استخدام كلاس *-border حيث * هي top او bottom او start او end بدلا من كلاس border.
- لتحديد سمك border يتم اضافة كلاس $-border بجانب كلاس border, حيث $ هي رقم من 1 الى 5.
- لتغيير لون border يتم اضافة احد contextual classes الكلاسات السياقية بجانب كلاس border.
| border-primary | border-secondary | border-success |
| border-info | border-danger | border-warning |
| border-dark | border-light | border-white |
Utility Border
عمل border بتصميمات مختلفة باستخدام bootstrap utilities.
HTML
<span class="border"> border</span>
<span class="border border-0"> border border-0 </span>
<span class="border border-0"> border border-0 </span>
<span class="border border-1"> border border-1 </span>
<span class="border border-primary"> border-primary </span>لاضافة border-radius دوارن في حواف اي عنصر يتم استخدام كلاس rounded ويمكن تخصيصه كالاتي:
- كلاس rounded: لعمل دوارن قليل في حواف العنصر.
- كلاس *-rounded: لتحديد الحافة التي تريد عمل border-radius لها حيث * هي top او bottom او start او end.
- كلاس $-rounded: لتحديد حجم border-radius حيث $ هي رقم من 1 الى 5.
- كلاس rounded-circle: لعمل border-radius بقيمة 50% لتحويل العنصر الى دائرة.
- كلاس circle-pill: لتحويل الجانبين الى انصاف دائرة.
Border Radius
عمل border-radius باستخدام bootstrap utilities.
HTML
<span class="rounded"> </span>
<span class="rounded-top"> </span>
<span class="rounded-end"> </span>يمكن عمل محاذاة افقية للعناصر في bootstrap عن طريقة اضافة كلاس float-start لمحاذاة child element في بداية parent element وكلاس float-right لمحاذاة child element في نهاية parent element, ويضاف كلاس clearfix الى parent element.
Float And Clearfix
عمل محاذاة افقية للعناصر باستخدام bootstrap utilities.
HTML
<div class="clearfix">
<span class="float-left btn btn-primary">Float left</span>
<span class="float-right btn btn-primary">Float right</span>
</div>- يتم عمل محاذاة بشكل عام باستخدام كلاس float-left او float-right.
- لالغاء عمل float نستعمل كلاس float-none.
- لعمل محاذاة متجاوبة مع عرض الشاشة يتم استخدام كلاس float-*-end | start, حيث * تمثل حجم الشاشة ولها 5 قيم كما هو موضح في الجدول التالي:
| قيمة * | sm | md | lg | xl | xxl |
| حجم الشاشة | 576px=< | 768px=< | 992px=< | 1200px=< | 1400px=< |
Responsive Float
عمل محاذاة متجاوبة مع عرض الشاشة.
HTML
<div class="float-sm-right">Float right on small screens or wider</div>
<div class="float-md-right">Float right on medium screens or wider</div>لعمل محاذاة في المنتصف نقوم باضافة كلاس mx-auto, الذي يعطي للعنصر margin-right: auto و margin-left: auto فيتم محاذاته الى الوسط.
Elements Center Align
محاذاة العناصر في المنتصف.
HTML
<div class="mx-auto bg-primary text-center text-white" style="width:150px">Centered</div>- يستخدم كلاس *-align في عمل محاذاة راسية للعناصر (align-top, align-bottom, align-middle, align-baseline).
- تعمل هذه الكلاسات فقط مع (inline, inline-block, inline-table, table-cell elements).
Result
Vertical Alignment
عمل محاذاة راسية المحتوى الذي بداخل العناصر.
HTML
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>- يمكن التحكم في عرض العناصر عن طريق الكلاسات (w-25, .w-50, .w-75, .w-100, .mw-100. ,w-auto).
- تستخدم هذه الكلاسات لاعطاء عرض child element كنسبة مئوية من عرض parent element.
Setting Width
اعطاء عرض مخصص لكل عنصر.
HTML
<div class="w-25 bg-primary text-white my-1 p-1">Width 25%</div>
<div class="w-50 bg-primary text-white my-1 p-1">Width 50%</div>
<div class="w-75 bg-primary text-white my-1 p-1">Width 75%</div>- يمكن التحكم في عرض العناصر عن طريق الكلاسات (h-25, .h-50, .h-75, .h-100, .mh-100. ,m-auto).
- تستخدم هذه الكلاسات لاعطاء عرض child element كنسبة مئوية من عرض parent element.
Setting Height
اعطاء طول مخصص لكل عنصر,
HTML
<div class="h-25 d-inline-block p-2 bg-primary text-white">Height 25%</div>
<div class="h-50 d-inline-block p-2 bg-primary text-white">Height 50%</div>يوفر bootstrap كلاسات معدة مسبقا لعمل padding او margin, وتكتب هذه الكلاسات هكذا property{side}-size حيث:
- property لها قميتين اما m في حالة margin او p في حالة padding.
- side لها عدة قيم ايضا: t -top & b-bottom & s-start & e-end & x- right and left & y-top and bottom وفي حالة عدم كتابته يتم تطبيق padding و margin على جميع الجوانب.
- يمكن تحديد حجم الشاشة التي تريد تطبيق padding و margin عليها باضافة -sm- او -md- او -lg- او -xl- او -xxl- بعد side.
- اما size فله قمية من 0 الى 5 وهي بالترتيب 0 و 4px و 8px و 16px و 24px و 48px ويمكن ايضا ان تكون auto.
Margin and Padding
عمل margin و padding باستخدام كلاسات bootstrap.
- يكفي استخدام كلاس shadow لاضافة shadows ظلال للعنصر.
- للتحكم في حجم shadows يمكن استخدام shadow-sm لعمل small shadow و shadow-lg لعمل large shadow.
- لازالة shadow يمكن استخدام كلاس shadow-none.
BootStrap Shadow
عمل shadows باستخدام bootstrap.
HTML
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>- يضاف كلاس ratio الى العنصر الاب الذي يحتوي بداخله على عنصر <iframe> للتحكم في aspect ratio نسبة العرض الى الطول لهذا العنصر لكتون متجاوبة مع الشاشات بمختلف احجامها.
- بجانب كلاس ratio يتم اضافة كلاس ratio-a x b حيث a و b هما نسبة العرض الى الطول التي نريدها.
Responsive Embeds
عمل <iframe> متجاوب
HTML
<div class="ratio ratio-1x1 mx-auto mt-3 w-50">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>يمكن التحكم في اظهار واخفاء العناصر في bootstrap عن طريق الكلاسات الاتية:
- كلاس visible لجعل العنصر مرئيا.
- كلاس invisible لاخفاء هذا العنصر.
Visibility
اخفاء واظهار العناصر باستخدام كلاس visible و invisible.
- لتثبيت position موضع اي عنصر يمكننا استخدام الكلاس fixed والكلاس sticky.
- نستخدم كلاس *-fixed حيث * تمثل الموضع اما top واما bottom.
- يستخدم كلاس sticky بنفس الطريقة sticky-top او sticky-bottom.
- مع كلاس sticky يمكن تحديد حجم الشاشة مثل sticky-sm-top و sticky-lg-bottom وهكذا.
Position Top
عمل position ثابت لعنصر nav.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.