Schedule

دليل تعليم Bootstrap 5

• Tutorial BS5
• Introduction BS5
• Container BS5
• Grid Basics BS5
• Typography BS5
• Color BS5
• Table BS5
• Image BS5
• Jumbotron BS5
• Alert Box BS5
• Button BS5
• Group Button BS5
• Badge BS5
• ProgressBar BS5
• Loader BS5
• Pagination BS5
• Group List BS5
• Card BS5
• Dropdown BS5
• Collapse BS5
• Navigation BS5
• navbar BS5
• Carousel BS5
• Modal BS5
• Tooltip BS5
• Pop-up BS5
• Toast BS5
• Scrollspy BS5
• Offcanvas BS5
• أدوات مفيدة BS5
• Flex BS5

دليل Bootstrap 5 النماذج

• نماذج الطلب BS5
• قائمة الخيارات BS5
• مربعات الاختيار والخيارات BS5
• مجال BS5
• مجموعة المدخلات BS5
• علامة التبويب المطفأة BS5
• تحقق من صحة النموذج BS5

دليل Bootstrap 5 الشبكة

• نظام شبكة BS5
• BS5 Stack/Horizontal
• شبكة BS5 Extra Small
• شبكة BS5 Small
• شبكة BS5 Medium
• شبكة BS5 Large
• شبكة BS5 Extra Large
• شبكة BS5 XXL
• مثال شبكة BS5

Bootstrap 5 أخرى

• نموذج أساسي BS5
• اختبار BS5

الدورات الخيارية

اقتراحات الدورة

• مكتبة CodeW3C.com

Flexbox

الفرق الرئيسي بين Bootstrap 3 وBootstrap 4 & 5 هو أن Bootstrap 5 يستخدم الآن Flexbox بدلاً من العوازل لمعالجة التخطيط.

نموذج التخطيط المflexible، مما يسهل تصميم بنية التخطيط المflexible الديناميكية دون استخدام العوازل أو التوجيه.

إذا كنت غير مألوف مع Flex، يمكنك التحقق من دليل Flexbox CSS تعلم.

ملاحظة:Flexbox غير مدعوم في إصدارات IE9 وكلها.

ملاحظة:إذا كنت بحاجة إلى دعم IE8-9، استخدم Bootstrap 3. إنه أحدث إصدار من Bootstrap، والفريق ما زال يدعمه لإصلاح الأخطاء الأساسية وتغيير الوثائق. ولكن لن يتم إضافة أي ميزات جديدة.

مثال

لإنشاء وعاء Flexbox وإعداد الأبناء المباشرين كعناصر Flex، استخدم d-flex الـ class:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 bg-primary">مشروع مروجة 3</div>
</div>

جرب بنفسك

مثال

لإنشاء وعاء Flexbox داخلي، استخدم d-inline-flex الـ class:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 bg-primary">مشروع مروجة 3</div>
</div>

جرب بنفسك

اتجاه أفقي

يرجى استخدام .flex-row عرض الـ flex items أفقيًا (موزعًا بجانب بعضهما البعض). هذا هو الإعداد الافتراضي.

نصيحة:استخدام .flex-row-reverse يمكن أن تكون منسجمة على اليمين في الاتجاه الأفقي:

مثال

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 bg-primary">مشروع مروجة 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 bg-primary">مشروع مروجة 3</div>
</div>

جرب بنفسك

اتجاه عمودي

يرجى استخدام .flex-column عرض الـ flex items عموديًا (مكدسًا ببعضهما البعض)، أو باستخدام .flex-column-reverse عكس الاتجاه العمودي:

مثال

<div class="d-flex flex-column">
  <div class="p-2 bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 bg-primary">مشروع مروجة 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 bg-primary">مشروع مروجة 3</div>
</div>

جرب بنفسك

تعديل المحتوى

استخدام .justify-content-* الـ class يمكنها تغيير طريقة التزامن للـ flex items. الـ classes الصالحة هي:

• start(افتراضي)
• end
• center
• between
• around

مثال

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

جرب بنفسك

عرض متساوٍ

استخدام الإشارة على مشروع flex .flex-fill يمكن إجبارها على أن تكون بعرض متساوٍ:

مثال

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">الـ item المرن 1</div>
  <div class="p-2 bg-warning flex-fill">الـ item المرن 2</div>
  <div class="p-2 bg-primary flex-fill">الـ item المرن 3</div>
</div>

جرب بنفسك

التمدد

استخدام الإشارة على مشروع flex .flex-grow-1 يمكن استخدام المساحة الزائدة. في المثال التالي، تشغل الـ flex items الأوليان المساحة الضرورية، بينما يشغل الـ item الأخير المساحة المتاحة الباقية:

مثال

<div class="d-flex">
  <div class="p-2 bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 bg-primary flex-grow-1">مشروع مروجة 3</div>
</div>

جرب بنفسك

نصيحة:استخدام الإشارة على مشروع flex .flex-shrink-1 يمكنه التقلص عند الحاجة.

الترتيب

استخدام .order يمكن لتلك الفئات تغيير الترتيب البصري للمشروع المحدد. الفئات الصالحة من 0 إلى 5، حيث أن الرقم الأدنى له الأولوية العالية (order-1 يظهر قبل order-2، وهكذا):

مثال

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">مشروع مروجة 1</div>
  <div class="p-2 bg-warning order-2">مشروع مروجة 2</div>
  <div class="p-2 bg-primary order-1">مشروع مروجة 3</div>
</div>

جرب بنفسك

الهوامش الخارجية التلقائية

استخدام .ms-auto(يحرك المشروع إلى اليمين) أو باستخدام .me-auto(يحرك المشروع إلى اليسار) يمكن إضافة الهوامش التلقائية للمشاريع المروجة بسهولة:

مثال

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 bg-primary">مشروع مروجة 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">مشروع مروجة 1</div>
  <div class="p-2 bg-warning">مشروع مروجة 2</div>
  <div class="p-2 me-auto bg-primary">مشروع مروجة 3</div>
</div>

جرب بنفسك

إعادة التدوير

من خلال .flex-nowrap(الافتراضي)、.flex-wrap أو .flex-wrap-reverse، يمكن التحكم في كيفية تعبئة مشاريع flex داخل وحدة flex.

مثال

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

جرب بنفسك

تعديل المحتوى

يرجى استخدام .align-content-* التحكم في التوجيه العمودي للمشاريع المروجة. الفئات الصالحة هي：

• .start-align-content(افتراضي)
• .end-align-content
• .center-align-content
• .align-content-between
• .align-content-around
• .align-content-stretch

ملاحظة:لا تؤثر هذه الصنوف على المشاريع المروحة على السطر الواحد.

يرجى النقر على الزر أدناه لرؤية الفرق بين الخمس أنواع من خلال تغيير الطريقة العمودية للتشذيب للمشاريع المروحة في الصندوق المثال:

مثال

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

جرب بنفسك

تعديل العناصر

يرجى استخدام .align-items-* التحكم في الصنفالسطر الواحدالطريقة العمودية للتشذيب للمشاريع المروحة. الصنوف الصالحة هي:

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch(افتراضي)

يرجى النقر على الزر أدناه لرؤية الفرق بين الخمس أنواع:

مثال

<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>

جرب بنفسك

التشذيب الذاتي

يرجى استخدام .align-self-* التحكم في الصنفتحديد العنصر المروحيالطريقة العمودية للتشذيب.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch(افتراضي)

انقر على الزر أدناه لرؤية الفرق بين الخمس الفئات المختلفة:

مثال

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">عنصر Flex 1</div>
  <div class="p-2 border align-self-start">عنصر Flex 2</div>
  <div class="p-2 border">عنصر Flex 3</div>
</div>

جرب بنفسك

فئات Flex التفاعلية

تأتي جميع الفئات المرنة بمزيد من الفئات التفاعلية مما يجعل من السهل تعيين فئة flex معينة عند حجم معين للشاشة.

* يمكن استبدالها ب sm،md،lg،xl أو xxl، ممثلًا للشاشات الصغيرة، المتوسطة، الكبيرة، الكبيرة جدًا والكبيرة جداً.

ابحث عن فئة مرنة معينة ..

مجلة الأدوات

اختبار JavaScript

روابط الممولين