البطاقات

<div class="card"> <div class="card-header"> رأس البطاقة </div> <div class="card-body"> <h5 class="card-title">عنوان البطاقة</h5> <p class="card-text">محتوى البطاقة يأتي هنا. تدعم البطاقات مجموعة واسعة من المحتوى، بما في ذلك النصوص والصور والقوائم والروابط والمزيد.</p> <a href="#" class="btn btn-primary">اعرف المزيد</a> </div> <div class="card-footer text-muted"> تذييل البطاقة </div> </div>

<!-- صورة في الأعلى --> <div class="card" style="width: 18rem;"> <img src="image.jpg" class="card-img-top" alt="صورة البطاقة"> <div class="card-body"> <h5 class="card-title">بطاقة بصورة</h5> <p class="card-text">هذه البطاقة بها صورة في الأعلى.</p> <a href="#" class="btn btn-primary">عرض التفاصيل</a> </div> </div> <!-- صورة في الأسفل --> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">بطاقة بصورة في الأسفل</h5> <p class="card-text">هذه البطاقة بها صورة في الأسفل.</p> </div> <img src="image.jpg" class="card-img-bottom" alt="صورة البطاقة"> </div>

<div class="card text-white"> <img src="background.jpg" class="card-img" alt="خلفية"> <div class="card-img-overlay"> <h5 class="card-title">بطاقة بتراكب</h5> <p class="card-text">نص متراكب على خلفية الصورة.</p> <p class="card-text"><small>آخر تحديث قبل 3 دقائق</small></p> </div> </div>

<div class="card-group"> <div class="card"> <img src="image1.jpg" class="card-img-top" alt="صورة 1"> <div class="card-body"> <h5 class="card-title">البطاقة 1</h5> <p class="card-text">هذه بطاقة أوسع مع نص داعم.</p> </div> </div> <div class="card"> <img src="image2.jpg" class="card-img-top" alt="صورة 2"> <div class="card-body"> <h5 class="card-title">البطاقة 2</h5> <p class="card-text">هذه البطاقة لديها نص داعم أدناه.</p> </div> </div> <div class="card"> <img src="image3.jpg" class="card-img-top" alt="صورة 3"> <div class="card-body"> <h5 class="card-title">البطاقة 3</h5> <p class="card-text">هذه بطاقة أوسع مع المزيد من النص.</p> </div> </div> </div>

<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="col"> <div class="card h-100"> <img src="image1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">البطاقة 1</h5> <p class="card-text">محتوى البطاقة 1.</p> </div> </div> </div> <div class="col"> <div class="card h-100"> <img src="image2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">البطاقة 2</h5> <p class="card-text">محتوى البطاقة 2.</p> </div> </div> </div> <div class="col"> <div class="card h-100"> <img src="image3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">البطاقة 3</h5> <p class="card-text">محتوى البطاقة 3.</p> </div> </div> </div> </div>

<!-- بطاقات ملونة --> <div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">بطاقة أساسية</div> <div class="card-body"> <h5 class="card-title">خلفية أساسية</h5> <p class="card-text">بطاقة بلون خلفية أساسي.</p> </div> </div> <div class="card text-white bg-success mb-3" style="max-width: 18rem;"> <div class="card-header">بطاقة نجاح</div> <div class="card-body"> <h5 class="card-title">خلفية نجاح</h5> <p class="card-text">بطاقة بلون خلفية نجاح.</p> </div> </div> <!-- بطاقات الحدود --> <div class="card border-primary mb-3" style="max-width: 18rem;"> <div class="card-header">حدود أساسية</div> <div class="card-body text-primary"> <h5 class="card-title">بطاقة حدود أساسية</h5> <p class="card-text">بطاقة بلون حدود فقط.</p> </div> </div>

<div class="card mb-3" style="max-width: 540px;"> <div class="row g-0"> <div class="col-md-4"> <img src="image.jpg" class="img-fluid rounded-start" alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">بطاقة أفقية</h5> <p class="card-text">هذا تخطيط بطاقة أفقية.</p> <p class="card-text"><small class="text-muted">آخر تحديث قبل 3 دقائق</small></p> </div> </div> </div> </div>