Source

קלפים

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

על אודות

כרטיס הוא מיכל תוכן גמיש וניתן להרחבה. הוא כולל אפשרויות לכותרות עליונות ותחתונות, מגוון רחב של תוכן, צבעי רקע הקשריים ואפשרויות תצוגה עוצמתיות. אם אתה מכיר את Bootstrap 3, כרטיסים מחליפים את הפאנלים הישנים, הבארות והתמונות הממוזערות שלנו. פונקציונליות דומה לרכיבים אלה זמינה כמחלקות שינוי עבור כרטיסים.

דוגמא

כרטיסים בנויים עם כמה שפחות סימון וסגנונות, אך עדיין מצליחים לספק המון שליטה והתאמה אישית. בנויים עם flexbox, הם מציעים יישור קל ומתערבבים היטב עם רכיבי Bootstrap אחרים. אין להם marginכברירת מחדל, אז השתמש בכלי עזר לרווחים לפי הצורך.

להלן דוגמה לכרטיס בסיסי עם תוכן מעורב ורוחב קבוע. לכרטיסים אין רוחב קבוע להתחיל, כך שהם ימלאו באופן טבעי את מלוא הרוחב של רכיב האב שלו. זה מותאם בקלות עם אפשרויות הגודל השונות שלנו .

100%x180
כותרת הכרטיס

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

ללכת לאנשהו
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 סטנדרטיות.

מכסה תמונה [100%x180]

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

רשימת קבוצות

צור רשימות של תוכן בכרטיס עם קבוצת רשימת שטיפה.

  • Cras justo odio
  • Dapibus ac facilisis in
  • וסטיבולום בארוס
<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>
מומלצים
  • Cras justo odio
  • Dapibus ac facilisis in
  • וסטיבולום בארוס
<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>

כיור מטבח

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

מכסה תמונה [100%x180]
כותרת הכרטיס

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • וסטיבולום בארוס
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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="#">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="#">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>

תמונות

כרטיסים כוללים מספר אפשרויות לעבודה עם תמונות. בחר מתוך הוספת "כובעי תמונה" בשני קצוות הכרטיס, שכבת-על של תמונות עם תוכן הכרטיס, או פשוט הטבעת התמונה בכרטיס.

כובעי תמונה

בדומה לכותרות עליונות ותחתונות, כרטיסים יכולים לכלול "כובעי תמונה" עליונים ותחתונים - תמונות בחלק העליון או התחתון של הכרטיס.

100%x180
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

100%x180
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

שכבות תמונה

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

100%x270
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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>

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

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

רקע וצבע

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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;כדי להשיג את הגודל האחיד שלהן.

100%x180
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

100%x180
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

100%x180
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

100%x180
כותרת הכרטיס

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

100%x180
כותרת הכרטיס

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

100%x180
כותרת הכרטיס

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

חפיסות קלפים

צריך סט של כרטיסי רוחב וגובה שווים שאינם מחוברים זה לזה? השתמש בחפיסות קלפים.

100%x200
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

100%x200
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

100%x200
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

בדיוק כמו בקבוצות קלפים, כותרות תחתונות של קלפים בחפיסות יסתדרו אוטומטית.

100%x180
כותרת הכרטיס

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

100%x180
כותרת הכרטיס

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

100%x180
כותרת הכרטיס

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

עמודות כרטיסים

ניתן לארגן כרטיסים בעמודות דמויות בנייה עם CSS בלבד על ידי עטיפתם ב- .card-columns. כרטיסים בנויים עם columnמאפייני CSS במקום flexbox ליישור קל יותר. הכרטיסים מסודרים מלמעלה למטה ומשמאל לימין.

שימו לב! הקילומטראז' שלך עם עמודות כרטיסים עשוי להשתנות. כדי למנוע מקלפים להישבר בין עמודות, עלינו להגדיר אותם display: inline-blockככאלה column-break-inside: avoidשאינם פתרון חסין כדורים עדיין.

100%x160
כותרת כרטיס שמתעטפת בשורה חדשה

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.

מישהו מפורסם בכותרת המקור
100%x160
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

Lorem ipsum dolor sit amet, consectetur adipiscing elit. עידן מספר שלם.

מישהו מפורסם בכותרת המקור
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.

מישהו מפורסם בכותרת המקור
כותרת הכרטיס

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

עודכן לאחרונה לפני 3 דקות

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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">
        <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 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 class="card-img" src="..." alt="Card image">
  </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 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>

ניתן גם להרחיב ולהתאים עמודות כרטיסים עם קוד נוסף. להלן הרחבה של .card-columnsהמחלקה באמצעות אותו CSS שאנו משתמשים בו - עמודות CSS - כדי ליצור קבוצה של שכבות תגובה לשינוי מספר העמודות.

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