Source

البطاقات

توفر بطاقات Bootstrap حاوية محتوى مرنة وقابلة للتوسيع مع متغيرات وخيارات متعددة.

حول

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

مثال

تم تصميم البطاقات بأقل قدر ممكن من الترميز والأنماط ، ولكنها لا تزال قادرة على توفير قدر كبير من التحكم والتخصيص. تم تصميمها باستخدام flexbox ، فهي توفر محاذاة سهلة وتختلط جيدًا مع مكونات Bootstrap الأخرى. ليس لديهم marginافتراضيًا ، لذا استخدم أدوات التباعد حسب الحاجة.

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

Placeholder Image cap
عنوان البطاقة

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

اذهب لمكان ما
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

أنواع المحتوى

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

الجسم

اللبنة الأساسية للبطاقة هي .card-body. استخدمه كلما احتجت إلى قسم مبطن داخل البطاقة.

هذا بعض النص داخل نص البطاقة.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

يتم استخدام عناوين البطاقة عن طريق الإضافة .card-titleإلى <h*>العلامة. بنفس الطريقة ، يتم إضافة الروابط ووضعها بجانب بعضها البعض عن طريق إضافتها .card-linkإلى <a>علامة.

يتم استخدام الترجمات بإضافة علامة .card-subtitleإلى <h*>علامة. إذا تم وضع العناصر .card-titleوالعناصر .card-subtitleفي .card-bodyعنصر ، فسيتم محاذاة عنوان البطاقة والعنوان الفرعي بشكل جيد.

عنوان البطاقة
العنوان الفرعي للبطاقة

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رابط البطاقة رابط آخر
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

الصور

.card-img-topيضع صورة في الجزء العلوي من البطاقة. باستخدام .card-text، يمكن إضافة نص إلى البطاقة. يمكن أيضًا تصميم النص .card-textالموجود بعلامات HTML القياسية.

Placeholder Image cap

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

قائمة المجموعات

أنشئ قوائم محتويات في بطاقة بمجموعة قائمة متدفقة.

  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • الدهليز في إيروس
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
متميز
  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • الدهليز في إيروس
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

حوض المطبخ

امزج وطابق أنواع محتوى متعددة لإنشاء البطاقة التي تحتاجها ، أو قم برمي كل شيء فيها. الموضح أدناه هو أنماط الصور ، والكتل ، وأنماط النص ، ومجموعة القوائم — كلها ملفوفة في بطاقة ذات عرض ثابت.

Placeholder Image cap
عنوان البطاقة

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • الدهليز في إيروس
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

أضف رأسًا اختياريًا و / أو تذييلًا داخل البطاقة.

متميز
معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

يمكن تصميم رؤوس البطاقات عن طريق الإضافة .card-headerإلى <h*>العناصر.

متميز
معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
يقتبس

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.

شخص مشهور في عنوان المصدر
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
متميز
معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

تحجيم

لا تفترض البطاقات تحديدًا widthللبدء ، لذا ستكون بعرض 100٪ ما لم يُنص على خلاف ذلك. يمكنك تغيير هذا حسب الحاجة باستخدام CSS المخصص ، أو فئات الشبكة ، أو مزيج Sass الشبكي ، أو الأدوات المساعدة.

استخدام الترميز الشبكي

باستخدام الشبكة ، قم بلف البطاقات في أعمدة وصفوف حسب الحاجة.

معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

استخدام المرافق

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

عنوان البطاقة

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

زر
عنوان البطاقة

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

زر
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

استخدام CSS المخصص

استخدم CSS المخصص في أوراق الأنماط الخاصة بك أو كأنماط مضمنة لتعيين العرض.

معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

محاذاة النص

يمكنك تغيير محاذاة النص بسرعة لأي بطاقة - بكاملها أو في أجزاء محددة - باستخدام فئات محاذاة النص الخاصة بنا .

معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

أضف بعض التنقل إلى رأس البطاقة (أو الكتلة) باستخدام مكونات التنقل في Bootstrap .

معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
معاملة خاصة للملكية

مع النص الداعم أدناه كمقدمة طبيعية لمحتوى إضافي.

اذهب لمكان ما
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

الصور

تتضمن البطاقات بعض الخيارات للعمل مع الصور. اختر من بين إلحاق "قبعات صور" في أي من طرفي البطاقة ، أو تراكب الصور مع محتوى البطاقة ، أو ببساطة دمج الصورة في بطاقة.

قبعات الصورة

على غرار الرؤوس والتذييلات ، يمكن أن تشتمل البطاقات على "أحرف كبيرة للصور" أعلى وأسفل - صور أعلى أو أسفل البطاقة.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

آخر تحديث منذ 3 دقائق

عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

آخر تحديث منذ 3 دقائق

Placeholder Image cap
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-top" alt="...">
</div>

تراكبات الصور

حوّل صورة إلى خلفية بطاقة وقم بتراكب نص بطاقتك. اعتمادًا على الصورة ، قد تحتاج أو لا تحتاج إلى أنماط أو أدوات مساعدة إضافية.

Placeholder Card image
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

آخر تحديث منذ 3 دقائق

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

لاحظ أن المحتوى يجب ألا يكون أكبر من ارتفاع الصورة. إذا كان المحتوى أكبر من الصورة ، فسيتم عرض المحتوى خارج الصورة.

أفقي

باستخدام مجموعة من فئات الشبكة والمرافق ، يمكن جعل البطاقات أفقية بطريقة سهلة الاستخدام وسريعة الاستجابة. في المثال أدناه ، نزيل المزاريب الشبكية .no-guttersونستخدم .col-md-*الفئات لجعل البطاقة أفقية عند mdنقطة التوقف. قد تكون هناك حاجة إلى مزيد من التعديلات اعتمادًا على محتوى بطاقتك.

Placeholder Image
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

آخر تحديث منذ 3 دقائق

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

أنماط البطاقة

تتضمن البطاقات خيارات متنوعة لتخصيص خلفياتها وحدودها ولونها.

الخلفية واللون

استخدم أدوات مساعدة النص والخلفية لتغيير مظهر البطاقة.

رأس
عنوان البطاقة الأساسية

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان البطاقة الثانوية

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة النجاح

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة الخطر

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة التحذير

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة المعلومات

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة خفيف

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة معتم

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
إيصال المعنى للتقنيات المساعدة

يوفر استخدام اللون لإضافة معنى فقط إشارة مرئية ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل قارئات الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (مثل النص المرئي) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .sr-onlyالفصل.

الحدود

استخدم أدوات الحدود لتغيير border-colorالبطاقة فقط. لاحظ أنه يمكنك وضع .text-{color}فئات على الوالد .cardأو مجموعة فرعية من محتويات البطاقة كما هو موضح أدناه.

رأس
عنوان البطاقة الأساسية

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان البطاقة الثانوية

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة النجاح

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة الخطر

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة التحذير

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة المعلومات

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة خفيف

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس
عنوان بطاقة معتم

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

المرافق Mixins

يمكنك أيضًا تغيير الحدود على رأس البطاقة وتذييلها حسب الحاجة ، وحتى إزالتها background-colorبـ .bg-transparent.

رأس
عنوان بطاقة النجاح

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

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

بالإضافة إلى تصميم المحتوى داخل البطاقات ، يتضمن Bootstrap بعض الخيارات لوضع سلسلة من البطاقات. في الوقت الحالي ، لا تستجيب خيارات التخطيط هذه بعد .

مجموعات البطاقات

استخدم مجموعات البطاقات لعرض البطاقات كعنصر واحد متصل بأعمدة عرض وارتفاع متساوية. تستخدم مجموعات البطاقات display: flex;لتحقيق حجم موحدهم.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

آخر تحديث منذ 3 دقائق

Placeholder Image cap
عنوان البطاقة

تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

آخر تحديث منذ 3 دقائق

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من البطاقة الأولى التي تظهر حركة الارتفاع المتساوية.

آخر تحديث منذ 3 دقائق

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

عند استخدام مجموعات البطاقات مع التذييلات ، سيصطف محتواها تلقائيًا.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

Placeholder Image cap
عنوان البطاقة

تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من البطاقة الأولى التي تظهر حركة الارتفاع المتساوية.

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

طوابق البطاقة

هل تحتاج إلى مجموعة من بطاقات العرض والارتفاع المتساوية غير المرفقة ببعضها البعض؟ استخدم أوراق اللعب.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

آخر تحديث منذ 3 دقائق

Placeholder Image cap
عنوان البطاقة

تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

آخر تحديث منذ 3 دقائق

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من البطاقة الأولى التي تظهر حركة الارتفاع المتساوية.

آخر تحديث منذ 3 دقائق

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

تمامًا كما هو الحال مع مجموعات البطاقات ، سيتم ترتيب تذييلات البطاقات في الطوابق تلقائيًا.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

Placeholder Image cap
عنوان البطاقة

تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من البطاقة الأولى التي تظهر حركة الارتفاع المتساوية.

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

بطاقات الشبكة

استخدم نظام شبكة Bootstrap وفئاته .row-colsللتحكم في عدد أعمدة الشبكة (الملتفة حول البطاقات) التي تظهر في كل صف. على سبيل المثال ، إليك .row-cols-1تخطيط البطاقات على عمود واحد ، .row-cols-md-2وتقسيم أربع بطاقات لعرض متساوٍ عبر صفوف متعددة ، من نقطة الفصل المتوسطة إلى الأعلى.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

قم بتغييره إلى .row-cols-3وسترى التفاف البطاقة الرابع.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

عندما تحتاج إلى ارتفاع متساوٍ ، أضف .h-100إلى البطاقات. إذا كنت تريد ارتفاعات متساوية افتراضيًا ، فيمكنك تعيينها $card-height: 100%في Sass.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة قصيرة.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

Placeholder Image cap
عنوان البطاقة

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

أعمدة البطاقة

يمكن تنظيم البطاقات في أعمدة تشبه الماسونية.card-columns باستخدام CSS فقط عن طريق تغليفها . تم تصميم البطاقات columnبخصائص CSS بدلاً من flexbox لتسهيل المحاذاة. يتم ترتيب البطاقات من أعلى إلى أسفل ومن اليسار إلى اليمين.

انتباه! قد تختلف الأميال الخاصة بك مع أعمدة البطاقة. لمنع البطاقات من كسر الأعمدة ، يجب علينا تعيينها على display: inline-blockأنها column-break-inside: avoidليست حلاً مضادًا للرصاص حتى الآن.

Placeholder Image cap
عنوان البطاقة الذي يلتف بسطر جديد

هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.

شخص مشهور في عنوان المصدر
Placeholder Image cap
عنوان البطاقة

تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

آخر تحديث منذ 3 دقائق

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح.

شخص مشهور في عنوان المصدر
عنوان البطاقة

تحتوي هذه البطاقة على عنوان منتظم وفقرة قصيرة من النص تحتها.

آخر تحديث منذ 3 دقائق

Placeholder Card image

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.

شخص مشهور في عنوان المصدر
عنوان البطاقة

هذه بطاقة أخرى بعنوان ونص داعم أدناه. تحتوي هذه البطاقة على بعض المحتوى الإضافي لجعلها أطول قليلاً بشكل عام.

آخر تحديث منذ 3 دقائق

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

يمكن أيضًا تمديد أعمدة البطاقة وتخصيصها ببعض التعليمات البرمجية الإضافية. الموضح أدناه هو امتداد .card-columnsللفئة باستخدام نفس CSS التي نستخدمها - أعمدة CSS - لإنشاء مجموعة من المستويات المتجاوبة لتغيير عدد الأعمدة.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}