Bootstrap

Bootstrap Utilities
الادوات المساعدة في BootStrap

ستتعلم في هذا الدرس عمل styling لكثير من elements العناصر وجعلها more responsive اكثر تجاوبا بدون كتابة كود CSS وذلك باستخدام اطار عمل bootstrap.

التاريخ

07 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1093

المواضيع

6
الشروحات chevron_left Bootstrap Utilities chevron_left 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>
ملاحظة
يقوم كلاس mx-auto بمحاذاة العناصر فقط وليس النص, لمحاذاة النص الى المنتصف يتم استخدام كلاس text-center.

</> BootStrap Vertical Align
المحاذاة الراسية في bootstrap

  • يستخدم كلاس *-align في عمل محاذاة راسية للعناصر (align-top, align-bottom, align-middle, align-baseline).
  • تعمل هذه الكلاسات فقط مع (inline, inline-block, inline-table, table-cell elements).

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.