Bootstrap 5 الأدوات المفيدة

فئات الاستخدامية / المساعدة

Bootstrap 5 يحتوي على العديد من الفئات الاستخدامية المساعدة، يمكنك استخدامها بسهولة لضبط أنماط العناصر دون استخدام أي كود CSS.

الحدود

استخدام صفتي الحدود لإضافة أو إزالة الحدود للعناصر:

مثال

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

تجربة شخصية

عرض الهوامش

الاستخدام .border-1 إلى .border-5 لتحديد عرض الهوامش:

مثال

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

تجربة شخصية

لون الهوامش

استخدام أي فئة لون الهوامش للإضافة إلى الهوامش لون:

مثال

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

تجربة شخصية

زوايا منحنية للهوامش

الاستخدام rounded لإضافة زوايا منحنية إلى عنصر:

مثال

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

تجربة شخصية

العوم وإزالة العوم

الاستخدام .float-end فئة عوم نحو اليمين، أو استخدام .float-start عوم نحو اليسار، واستخدام .clearfix فئة إزالة العوم:

مثال

<div class="clearfix">
  <span class="float-start">عوم نحو اليسار</span>
  <span class="float-end">عوم نحو اليمين</span>
</div>

تجربة شخصية

العوم الم��ر

استخدام فئات العوم الم��رة بناءً على عرض الشاشة، لتحريك العنصر إلى اليسار أو اليمين (.float-*-left|right)، حيث * هو:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

مثال

<div class="float-sm-end">على الشاشات الصغيرة أو الأوسع نحو اليمين</div><br>
<div class="float-md-end">على الشاشات المتوسطة أو الأوسع نحو اليمين</div><br>
<div class="float-lg-end">على الشاشات الكبيرة أو الأوسع نحو اليمين</div><br>
<div class="float-xl-end">على الشاشات الكبيرة أو الأوسع نحو اليمين</div><br>
<div class="float-xxl-end">على الشاشات الكبيرة أو الأوسع نحو اليمين</div><br>
<div class="float-none">لا تتم العوم</div>

تجربة شخصية

التحجيم الوسطي

الاستخدام .mx-auto عنصر وسطی (إضافة margin-left و margin-right: auto):

مثال

<div class="mx-auto bg-warning" style="width:150px">مركز</div>

تجربة شخصية

عرض

استخدام فئات w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100إعداد عرض العنصر:

مثال

<div class="w-25 bg-warning">عرض 25%</div>
<div class="w-50 bg-warning">عرض 50%</div>
<div class="w-75 bg-warning">عرض 75%</div>
<div class="w-100 bg-warning">عرض 100%</div>
<div class="w-auto bg-warning">عرض تلقائي</div>
<div class="mw-100 bg-warning">أكبر عرض 100%</div>

تجربة شخصية

طول

استخدام فئات h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100إعداد طول العنصر:

مثال

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">طول 25%</div>
  <div class="h-50 bg-warning">طول 50%</div>
  <div class="h-75 bg-warning">طول 75%</div>
  <div class="h-100 bg-warning">طول 100%</div>
  <div class="h-auto bg-warning">طول تلقائي</div>
  <div class="mh-100 bg-warning" style="height:500px">أعلى طول 100%</div>
</div>

تجربة شخصية

المسافات

يحتوي Bootstrap 5 على مجموعة واسعة من الفئات المميزة للهوامش والملوحة الديناميكية. وهي تنطبق على جميع النقاط النهائية:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

استخدام هذه الفئات يكون بنمط:{property}{sides}-{size} للإستخدام xs،و {property}{sides}-{breakpoint}-{size} للإستخدام sm、md、lg、xl و xxl。

property من بين ما يلي:

  • m - ضبط margin
  • p - ضبط padding

sides من بين ما يلي:

  • t - ضبط margin-top أو padding-top
  • b - ضبط margin-bottom أو padding-bottom
  • s - ضبط margin-left أو padding-left
  • e - ضبط margin-right أو padding-right
  • x - ضبط padding-left و padding-right أو margin-left و margin-right
  • y - ضبط padding-top و padding-bottom أو margin-top و margin-bottom
  • blank - ضبط السواد في جميع الجوانب الأربعة للعنصر margin أو padding

size من بين ما يلي:

  • 0 - وضع margin أو padding ضبطها على 0
  • 1 - وضع margin أو padding ضبطها على .25rem
  • 2 - وضع margin أو padding ضبطها على .5rem
  • 3 - وضع margin أو padding ضبطها على 1rem
  • 4 - وضع margin أو padding ضبطها على 1.5rem
  • 5 - وضع margin أو padding ضبطها على 3rem
  • auto - وضع margin ضبطها على auto

مثال

<div class="pt-4 bg-warning">لدي فقط مسافات داخليه اعلى (1.5rem)</div>
<div class="p-5 bg-success">لدي مسافات داخليه لجميع الجوانب (3rem)</div>
<div class="m-5 pb-5 bg-info">لدي مسافات خارجية لجميع الجوانب (3rem) ومسافات داخليه اسفل (3rem)</div>

تجربة شخصية

مثال إضافي على المسافات

.m-# / m-*-# السواد الخارجي لجميع الجوانب تجربة
.mt-# / mt-*-# السواد الخارجي على الاعلى تجربة
.mb-# / mb-*-# السواد الخارجي على الاسفل تجربة
.ms-# / ms-*-# السواد الخارجي على اليسار تجربة
.me-# / me-*-# السواد الخارجي على اليمين تجربة
.mx-# / mx-*-# السواد الداخلي على اليسار واليمين تجربة
.my-# / my-*-# السواد الخارجي على الاعلى والاسفل تجربة
.p-# / p-*-# السواد الداخلي لجميع الجوانب (ملء) تجربة
.pt-# / pt-*-# السواد الداخلي على الاعلى تجربة
.pb-# / pb-*-# السواد الداخلي على الاسفل تجربة
.ps-# / ps-*-# السواد الداخلي على اليسار تجربة
.pe-# / pe-*-# السواد الداخلي على اليمين تجربة
.py-# / py-*-# السواد الداخلي على الاعلى والاسفل تجربة
.px-# / px-*-# السواد الداخلي على اليسار واليمين تجربة

يمكنك زيارة دليل وحدات CSS للقراءة عن rem ووحدات الحجم المختلفة.

ظل

استخدم shadow- إضافة ظل إلى عنصر الكلاس:

مثال

<div class="shadow-none p-4 mb-4 bg-light">ليس هناك ظل</div>
<div class="shadow-sm p-4 mb-4 bg-white">ظلال صغيرة</div>
<div class="shadow p-4 mb-4 bg-white">ظلال افتراضية</div>
<div class="shadow-lg p-4 mb-4 bg-white">ظلال كبيرة</div>

تجربة شخصية

التوجيه العمودي

استخدم align- الصفات تغير طريقة توجيه العناصر (تطبيق فقط على العناصر inline، inline-block،inline-table ووحدات الجدول):

مثال

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

تجربة شخصية

نسبة العرض إلى الارتفاع

أنشئ فيديو أو عرض تفاعلي يتجاوب مع عرض العنصر الأم.

ضع .ratio الصفات تتوافق مع نسبة العرض إلى الارتفاع التي اخترتها .aspect-ratio-* أضفها إلى العنصر الأم، وأضف إليها تعبئة (فيديو أو iframe):

مثال

<!-- نسبة الأبعاد 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- نسبة الأبعاد 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- نسبة الأبعاد 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- نسبة الأبعاد 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

تجربة شخصية

وضوح

الاستخدام .visible أو .invisible الصفات يمكنها التحكم في وضوح العناصر:

ملاحظة:هذه الفئات لا تغير قيمة CSS display. إنها تضيف فقط visibility:visible أو visibility: hidden.

مثال

<div class="visible">أنا مرئي.</div>
<div class="invisible">أنا غير مرئي.</div>

تجربة شخصية

أيقونة الإغلاق

الاستخدام .btn-close يمكن استخدام الفئة لتحديد نمط أيقونة الإغلاق. عادة ما تُستخدم في نافذات الإخطار و النماذج.

مثال

<button type="button" class="btn-close"></button>

تجربة شخصية

قراءات الشاشة

الاستخدام .visually-hidden يمكن استخدام الفئة في جميع الأجهزة لاخفاء العناصر باستثناء قراءات الشاشة:

مثال

<span class="visually-hidden">سأكون مخفيًا على جميع الشاشات باستثناء قراءات الشاشة.</span>

تجربة شخصية

اللون

كما ذكر في فصل 'اللون'، يلي قائمة بجميع فئات النص والخلفية اللونية:

الفئات الموجهة نحو لون النص هي:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（لون الجسم الافتراضي/عادة الأسود)
  • .text-light

مثال

تجربة شخصية

فئات النص الإضافية يمكن استخدامها أيضًا في الروابط:

مثال

تجربة شخصية

يمكنك أيضًا استخدام الفئات .text-black-50 أو .text-white-50 لإضافة 50% من الشفافية إلى النص الأسود أو الأبيض:

مثال

تجربة شخصية

لون الخلفية

الفئات الموجهة نحو اللون الخلفي هي:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

لاحظ أن لون الخلفية لا يضبط لون النص، لذا في بعض الحالات، قد تحتاج إلى دمجها مع .text-* استخدام الفئات معًا.

مثال

تجربة شخصية