تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
in English

البطاقات

توفر بطاقات 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>

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

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

  • عنصر
  • عنصر ثان
  • بند ثالث
لغة البرمجة 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
متميز
  • عنصر
  • عنصر ثان
  • بند ثالث
لغة البرمجة 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • عنصر
  • عنصر ثان
  • بند ثالث
تذييل البطاقة
لغة البرمجة 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

حوض المطبخ

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

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>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</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>
يقتبس

اقتباس مشهور موجود في عنصر blockquote.

شخص مشهور في عنوان المصدر
لغة البرمجة 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
متميز
معاملة خاصة للملكية

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

اذهب لمكان ما
2 منذ أيام
لغة البرمجة 
<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-end" 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" aria-current="true" 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">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">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-bottom" alt="...">
</div>

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

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

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

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

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

لغة البرمجة 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
لاحظ أن المحتوى يجب ألا يكون أكبر من ارتفاع الصورة. إذا كان المحتوى أكبر من الصورة ، فسيتم عرض المحتوى خارج الصورة.

أفقي

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

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

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

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

لغة البرمجة 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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>

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

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

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

تمت الإضافة في الإصدار 5.2.0

قم بتعيين مقدمةbackground-color متناقضة colorمع مساعدينا.text-bg-{color} . في السابق كان مطلوبًا إقران اختيارك والأدوات المساعدة للتصميم يدويًا .text-{color}، .bg-{color}والتي لا يزال بإمكانك استخدامها إذا كنت تفضل ذلك.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لغة البرمجة 
<div class="card text-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-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-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-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-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-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 text-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-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>
إيصال المعنى للتقنيات المساعدة

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

الحدود

استخدم أدوات الحدود لتغيير 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">
    <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">
    <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;لتصبح متصلة بأبعاد موحدة بدءًا من smنقطة التوقف.

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
عنوان البطاقة

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

آخر تحديث منذ 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>
    </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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

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

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

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

آخر تحديث منذ 3 دقائق
Placeholder Image cap
عنوان البطاقة

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

آخر تحديث منذ 3 دقائق
Placeholder Image cap
عنوان البطاقة

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

آخر تحديث منذ 3 دقائق
لغة البرمجة 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

الماسونية

v4استخدمنا تقنية CSS فقط لتقليد سلوك الأعمدة الشبيهة بالبناء ، ولكن هذه التقنية جاءت مع الكثير من الآثار الجانبية غير السارة . إذا كنت ترغب في الحصول على هذا النوع من التخطيط v5، يمكنك فقط استخدام المكون الإضافي Masonry. لم يتم تضمين الماسونية في Bootstrap ، لكننا قدمنا ​​مثالًا تجريبيًا لمساعدتك على البدء.

CSS

المتغيرات

تمت الإضافة في الإصدار 5.2.0

كجزء من نهج متغيرات CSS المتطور في Bootstrap ، تستخدم البطاقات الآن متغيرات CSS المحلية .cardلتحسين التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass ، لذلك لا يزال تخصيص Sass مدعومًا أيضًا.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

متغيرات ساس

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;