من الكلاسات المساعدة في 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

جربها بنفسك

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

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

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات chevron_left Bootstrap Utilities chevron_left Bootstrap