דלג לתוכן הראשי דלג לניווט במסמכים
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-subtitlea <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>
מומלצים
טיפול מיוחד בכותרת

עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף.

ללכת לאנשהו
<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 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>
שימו לב שהתוכן לא צריך להיות גדול מגובה התמונה. אם התוכן גדול מהתמונה התוכן יוצג מחוץ לתמונה.

אופקי

באמצעות שילוב של כיתות רשת ושירותים, ניתן להפוך כרטיסים אופקיים בצורה ידידותית לנייד ומגיבה. בדוגמה שלמטה, אנו מסירים את מרזבי הרשת עם מחלקות .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>

סגנונות כרטיסים

כרטיסים כוללים אפשרויות שונות להתאמה אישית של הרקע, הגבולות והצבע שלהם.

רקע וצבע

השתמש בכלי עזר בצבעי טקסט ורקע כדי לשנות את המראה של כרטיס.

כּוֹתֶרֶת
כותרת הכרטיס הראשי

טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.

כּוֹתֶרֶת
כותרת כרטיס משני

טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.

כּוֹתֶרֶת
כותרת כרטיס ההצלחה

טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.

כּוֹתֶרֶת
כותרת כרטיס הסכנה

טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.

כּוֹתֶרֶת
כותרת כרטיס אזהרה

טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.

כּוֹתֶרֶת
כותרת כרטיס המידע

טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.

כּוֹתֶרֶת
כותרת קלף קל

טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.

כּוֹתֶרֶת
כותרת כרטיס כהה

טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.

<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-dark 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-dark 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-dark 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>
העברת משמעות לטכנולוגיות מסייעות

שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .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
כותרת הכרטיס

זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.

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>

כרטיסי רשת

השתמש במערכת הרשת 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
כותרת הכרטיס

זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.

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 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 , אבל יצרנו דוגמה להדגמה כדי לעזור לך להתחיל.

סאס

משתנים

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$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;