Bootstrap Utilities
الادوات المساعدة في BootStrap
ستتعلم في هذا الدرس عمل styling لكثير من elements العناصر وجعلها more responsive اكثر تجاوبا بدون كتابة كود CSS وذلك باستخدام اطار عمل bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap Utilities
الادوات المساعدة في bootstrap
</>
BootStrap Border
الاطار في bootstrap
- من الكلاسات المساعدة في 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.
<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>
</>
BootStrap Border Radius
نصف قطر الاطار في bootstrap
لاضافة 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.
<span class="rounded"> </span> <span class="rounded-top"> </span> <span class="rounded-end"> </span>
</>
BootStrap Float and Clearfix
المحاذاة في bootstrap
يمكن عمل محاذاة افقية للعناصر في bootstrap عن طريقة اضافة كلاس float-start لمحاذاة child element في بداية parent element وكلاس float-right لمحاذاة child element في نهاية parent element, ويضاف كلاس clearfix الى parent element.
Float And Clearfix
عمل محاذاة افقية للعناصر باستخدام bootstrap utilities.
<div class="clearfix">
<span class="float-left btn btn-primary">Float left</span>
<span class="float-right btn btn-primary">Float right</span>
</div>
</>
BootStrap Responsive Floats
المحاذاة المتجاوبة في bootstrap
- يتم عمل محاذاة بشكل عام باستخدام كلاس float-left او float-right.
- لالغاء عمل float نستعمل كلاس float-none.
- لعمل محاذاة متجاوبة مع عرض الشاشة يتم استخدام كلاس float-*-end | start, حيث * تمثل حجم الشاشة ولها 5 قيم كما هو موضح في الجدول التالي:
| قيمة * | sm | md | lg | xl | xxl |
| حجم الشاشة | 576px=< | 768px=< | 992px=< | 1200px=< | 1400px=< |
Responsive Float
عمل محاذاة متجاوبة مع عرض الشاشة.
<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>
</>
BootStrap Center Align
المحاذاة للمنتصف في bootstrap
لعمل محاذاة في المنتصف نقوم باضافة كلاس mx-auto, الذي يعطي للعنصر margin-right: auto و margin-left: auto فيتم محاذاته الى الوسط.
Elements Center Align
محاذاة العناصر في المنتصف.
<div class="mx-auto bg-primary text-center text-white" style="width:150px">Centered</div>
ملاحظة
</>
BootStrap Vertical Align
المحاذاة الراسية في bootstrap
- يستخدم كلاس *-align في عمل محاذاة راسية للعناصر (align-top, align-bottom, align-middle, align-baseline).
- تعمل هذه الكلاسات فقط مع (inline, inline-block, inline-table, table-cell elements).
Vertical Alignment
عمل محاذاة راسية المحتوى الذي بداخل العناصر.
<span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span>
</>
BootStrap Width
العرض في bootstrap
- يمكن التحكم في عرض العناصر عن طريق الكلاسات (w-25, .w-50, .w-75, .w-100, .mw-100. ,w-auto).
- تستخدم هذه الكلاسات لاعطاء عرض child element كنسبة مئوية من عرض parent element.
Setting Width
اعطاء عرض مخصص لكل عنصر.
<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>
</>
BootStrap Height
الطول في bootstrap
- يمكن التحكم في عرض العناصر عن طريق الكلاسات (h-25, .h-50, .h-75, .h-100, .mh-100. ,m-auto).
- تستخدم هذه الكلاسات لاعطاء عرض child element كنسبة مئوية من عرض parent element.
Setting Height
اعطاء طول مخصص لكل عنصر,
<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 Spacing
الفراغات في bootstrap
يوفر 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.
<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
</>
BootStrap Shadows
الظلال في bootstrap
- يكفي استخدام كلاس shadow لاضافة shadows ظلال للعنصر.
- للتحكم في حجم shadows يمكن استخدام shadow-sm لعمل small shadow و shadow-lg لعمل large shadow.
- لازالة shadow يمكن استخدام كلاس shadow-none.
BootStrap Shadow
عمل shadows باستخدام bootstrap.
<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>
</>
BootStrap Responsive Embeds
العناصر المضمنة المتجاوبة في bootstrap
- يضاف كلاس ratio الى العنصر الاب الذي يحتوي بداخله على عنصر <iframe> للتحكم في aspect ratio نسبة العرض الى الطول لهذا العنصر لكتون متجاوبة مع الشاشات بمختلف احجامها.
- بجانب كلاس ratio يتم اضافة كلاس ratio-a x b حيث a و b هما نسبة العرض الى الطول التي نريدها.
Responsive Embeds
عمل <iframe> متجاوب
<div class="ratio ratio-1x1 mx-auto mt-3 w-50"> <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div>
</>
BootStrap Visibility
الظهور في bootstrap
يمكن التحكم في اظهار واخفاء العناصر في bootstrap عن طريق الكلاسات الاتية:
- كلاس visible لجعل العنصر مرئيا.
- كلاس invisible لاخفاء هذا العنصر.
Visibility
اخفاء واظهار العناصر باستخدام كلاس visible و invisible.
<div class="visible">I am visible</div> <div class="invisible">I am invisible</div>
</>
BootStrap Position
الموقع في boostrap
- لتثبيت position موضع اي عنصر يمكننا استخدام الكلاس fixed والكلاس sticky.
- نستخدم كلاس *-fixed حيث * تمثل الموضع اما top واما bottom.
- يستخدم كلاس sticky بنفس الطريقة sticky-top او sticky-bottom.
- مع كلاس sticky يمكن تحديد حجم الشاشة مثل sticky-sm-top و sticky-lg-bottom وهكذا.
Position Top
عمل position ثابت لعنصر nav.
<nav class="fixed-top"> ... </nav>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
