يوفر Bootstrap 5، أحد أكثر أطر عمل الواجهة الأمامية شيوعًا، مجموعة من المكونات والأدوات المساعدة المفيدة التي تساعد المطورين على إنشاء مواقع ويب سريعة الاستجابة وجذابة بصريًا.

بطاقات

تعد البطاقات مكونًا متعدد الاستخدامات في Bootstrap 5 يسمح لك بعرض المحتوى بطريقة نظيفة ومنظمة. إنها مثالية لعرض المعلومات بطريقة جمالية وعملية.

الهيكل الأساسي

تتكون البطاقة الأساسية من حاوية ذات فئة .card، تحتوي على عناصر مثل رأس البطاقة ونصها وتذييلها.

  

    Featured
  
  

    
Card Title
    
Some quick example text.
    Go somewhere
  
  

    2 days ago
  

تخصيص البطاقات

يمكنك تخصيص البطاقات على نطاق واسع:

• الصور: أضف الصور باستخدام .card-img-top أو .card-img-bottom.
• التخطيطات: استخدم مجموعات البطاقات أو المجموعات أو الأعمدة لتخطيطات مختلفة.
• الألوان: استخدم الفئات السياقية مثل .bg-primary و.text-white.

  
Header
  

    
Primary card title
    
Text content goes here.
  

حالات الاستخدام

• ملفات تعريف المستخدمين: عرض معلومات المستخدم باستخدام الصورة الرمزية.
• قوائم المنتجات: عرض المنتجات مع الصور والأوصاف.
• مشاركات المدونة: تلخيص المقالات بالعناوين والمقتطفات.

منتقي التاريخ

على الرغم من أن Bootstrap 5 لا يتضمن منتقي التاريخ الأصلي، إلا أن دمجه يعد أمرًا سهلاً باستخدام مكتبات الطرف الثالث مثل Tempus Dominus أو Bootstrap Datepicker.

تطبيق

أولاً، قم بتضمين ملفات CSS وJS المطلوبة:

ثم قم بتهيئة منتقي التاريخ:

خيارات التخصيص

• التنسيقات: تخصيص تنسيق التاريخ.
• تواريخ البدء والانتهاء: تحديد النطاق الزمني القابل للتحديد.
• الموضوعات: تطبيق أنماط مختلفة.

الشريط الجانبي

تعد الأشرطة الجانبية ضرورية للتنقل، خاصة في تطبيقات الويب المعقدة.

إنشاء شريط جانبي سريع الاستجابة

يمكنك إنشاء شريط جانبي سريع الاستجابة باستخدام نظام الشبكة ومكون الانهيار في Bootstrap.

أشرطة جانبية تفاعلية

تعزيز تجربة المستخدم عن طريق إضافة التفاعل:

• تأثيرات التحويم: استخدم CSS لتمييز عناصر القائمة.
• القوائم القابلة للطي: تنفيذ قوائم فرعية تتوسع عند النقر.
• الأيقونات: دمج الرموز باستخدام Font Awesome أو Bootstrap Icons.

خانة الاختيار

تسمح مربعات الاختيار للمستخدمين بتحديد خيارات متعددة من مجموعة.

مربعات اختيار التصميم

يوفر Bootstrap 5 أنماط مربعات اختيار مخصصة:

  
    Default checkbox
  

مجموعات خانات الاختيار

مربعات اختيار المجموعة لتنظيم أفضل:

  Select Options:
  

    
  

تذييل

تعتبر التذييلات ضرورية لتوفير المزيد من التنقل والمعلومات.

تصميم التذييلات

إنشاء تذييل بسيط:

التذييلات اللاصقة

اجعل التذييل ملتصقًا بالأسفل:

html, body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

خاتمة

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

مزيد من القراءة:

• وثائق Bootstrap الرسمية
• تخصيص Bootstrap