Bootstrap 4 بطاقات
البطاقات
البطاقة في Bootstrap 4 عبارة عن صندوق مُحاط ببعض الحشو حول محتوياته. يتضمن خيارات للرؤوس والتذييلات والمحتوى والألوان وما إلى ذلك.
فلان الفلاني
بعض الأمثلة على النص بعض الأمثلة على النص. جون دو مهندس معماري ومهندس
انظر الملف الشخصيالبطاقة الأساسية
يتم إنشاء بطاقة أساسية مع .cardالفصل ، ويحتوي المحتوى الموجود داخل البطاقة على .card-bodyفئة:
مثال
<div class="card">
<div class="card-body">Basic
card</div>
</div>
إذا كنت معتادًا على Bootstrap 3 ، فإن البطاقات تحل محل اللوحات القديمة والآبار والصور المصغرة.
رأس وتذييل الصفحة
يضيف الفصل .card-headerعنوانًا إلى البطاقة .card-footerويضيف الفصل تذييلاً للبطاقة:
مثال
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
بطاقات سياقية
لإضافة لون الخلفية للبطاقة ، استخدم الفئات السياقية ( .bg-primary،
.bg-success، .bg-info، .bg-warning، .bg-danger، .bg-secondary، .bg-darkو .bg-light.
مثال
العناوين والنصوص والروابط
تُستخدم .card-titleلإضافة عناوين البطاقة إلى أي عنصر عنوان. يتم .card-textاستخدام الفئة لإزالة الهوامش السفلية لعنصر <p> إذا كان هو الطفل الأخير (أو الوحيد) بالداخل .card-body. يضيف الفصل .card-linkلونًا أزرق إلى أي رابط وتأثير تمرير الماوس.
مثال
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
صور البطاقة
فلان الفلاني
بعض الأمثلة على النص بعض الأمثلة على النص. جون دو مهندس معماري ومهندس
انظر الملف الشخصي
أضف .card-img-topأو .card-img-bottomلوضع
<img>الصورة في أعلى أو أسفل البطاقة. لاحظ أننا أضفنا الصورة خارج النطاق .card-bodyلتمتد بالعرض بالكامل:
مثال
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
امتدت الارتباط
أضف .stretched-linkالفصل إلى رابط داخل البطاقة ، وسيجعل البطاقة بأكملها قابلة للنقر عليها وقابلة للتمرير فوقها (ستكون البطاقة بمثابة رابط):
فلان الفلاني
بعض الأمثلة على النص بعض الأمثلة على النص. جون دو مهندس معماري ومهندس
انظر الملف الشخصيمثال
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
تراكبات صورة البطاقة
حوّل صورة إلى خلفية بطاقة واستخدمها .card-img-overlay
لإضافة نص أعلى الصورة:
مثال
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
أعمدة البطاقة
بعض النصوص داخل البطاقة الأولى
بعض النصوص داخل البطاقة الثانية
بعض النصوص داخل البطاقة الثالثة
بعض النصوص داخل البطاقة الرابعة
بعض النصوص داخل البطاقة الخامسة
بعض النصوص داخل البطاقة السادسة
ينشئ .card-columnsالفصل شبكة من البطاقات تشبه البناء (مثل pinterest). سيتم ضبط التخطيط تلقائيًا عند إدخال المزيد من البطاقات.
ملاحظة: يتم عرض البطاقات عموديًا على شاشات صغيرة (أقل من 576 بكسل):
مثال
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
بطاقة سطح السفينة
بعض النصوص داخل البطاقة الأولى
بعض المزيد من النص لزيادة الارتفاع
بعض المزيد من النص لزيادة الارتفاع
بعض المزيد من النص لزيادة الارتفاع
بعض النصوص داخل البطاقة الثانية
بعض النصوص داخل البطاقة الثالثة
بعض النصوص داخل البطاقة الرابعة
ينشئ .card-deckالفصل شبكة من البطاقات متساوية الطول والعرض . سيتم ضبط التخطيط تلقائيًا عند إدخال المزيد من البطاقات.
ملاحظة: يتم عرض البطاقات عموديًا على شاشات صغيرة (أقل من 576 بكسل):
مثال
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
مجموعة البطاقات
بعض النصوص داخل البطاقة الأولى
بعض المزيد من النص لزيادة الارتفاع
بعض المزيد من النص لزيادة الارتفاع
بعض المزيد من النص لزيادة الارتفاع
بعض النصوص داخل البطاقة الثانية
بعض النصوص داخل البطاقة الثالثة
بعض النصوص داخل البطاقة الرابعة
الفصل .card-groupمشابه لـ .card-deck. الاختلاف الوحيد هو أن .card-groupالفصل يزيل الهوامش اليمنى واليسرى بين كل بطاقة.
ملاحظة: يتم عرض البطاقات عموديًا على شاشات صغيرة (أقل من 576 بكسل) ، بهامش علوي وسفلي:
مثال
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>