קלפים

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

בעמוד זה

על אודות

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

דוגמא

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

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

כותרת הכרטיס

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

ללכת לאנשהו

html

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

זהו טקסט בגוף הכרטיס.

html

<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בפריט, כותרת הכרטיס וכותרת המשנה מיושרות יפה.

כותרת הכרטיס

כתובית לכרטיס

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

קישור לכרטיס קישור נוסף

html

<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 סטנדרטיות.

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

html

<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>

רשימת קבוצות

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

חפץ
פריט שני
פריט שלישי

html

<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>

מומלצים

חפץ
פריט שני
פריט שלישי

html

<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>

חפץ
פריט שני
פריט שלישי

כותרת תחתונה של כרטיס

html

<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>

כיור מטבח

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

כותרת הכרטיס

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

חפץ
פריט שני
פריט שלישי

קישור לכרטיס קישור נוסף

html

<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>

כותרת עליונה ותחתונה

הוסף כותרת עליונה ו/או תחתונה אופציונליים בתוך כרטיס.

מומלצים

טיפול מיוחד בכותרת

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

ללכת לאנשהו

html

<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*>.

מומלצים

טיפול מיוחד בכותרת

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

ללכת לאנשהו

html

<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.

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

html

<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>

מומלצים

טיפול מיוחד בכותרת

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

ללכת לאנשהו

לפני יומיים

html

<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 או כלי עזר.

שימוש בסימון רשת

באמצעות הרשת, עטפו כרטיסים בעמודות ושורות לפי הצורך.

טיפול מיוחד בכותרת

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

ללכת לאנשהו

טיפול מיוחד בכותרת

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

ללכת לאנשהו

html

<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>

שימוש בכלי עזר

השתמש בקומץ של כלי השירות הזמינים לגודל כדי להגדיר במהירות את רוחב הכרטיס.

כותרת הכרטיס

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

לַחְצָן

כותרת הכרטיס

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

לַחְצָן

html

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

טיפול מיוחד בכותרת

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

ללכת לאנשהו

html

<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>

יישור טקסט

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

טיפול מיוחד בכותרת

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

ללכת לאנשהו

טיפול מיוחד בכותרת

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

ללכת לאנשהו

טיפול מיוחד בכותרת

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

ללכת לאנשהו

html

<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 .

טיפול מיוחד בכותרת

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

ללכת לאנשהו

html

<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>

טיפול מיוחד בכותרת

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

ללכת לאנשהו

html

<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>

תמונות

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

כובעי תמונה

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

כותרת הכרטיס

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

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

כותרת הכרטיס

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

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

html

<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>

שכבות תמונה

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

כותרת הכרטיס

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

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

html

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

כותרת הכרטיס

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

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

html

<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}כלי העזר לעיצוב, שבהם עדיין תוכל להשתמש אם תעדיף.

כּוֹתֶרֶת

כותרת הכרטיס הראשי

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

כּוֹתֶרֶת

כותרת כרטיס משני

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

כּוֹתֶרֶת

כותרת כרטיס ההצלחה

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

כּוֹתֶרֶת

כותרת כרטיס הסכנה

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

כּוֹתֶרֶת

כותרת כרטיס אזהרה

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

כּוֹתֶרֶת

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

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

כּוֹתֶרֶת

כותרת קלף קל

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

כּוֹתֶרֶת

כותרת כרטיס כהה

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

html

<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או תת-קבוצה של תוכן הכרטיס כפי שמוצג להלן.

כּוֹתֶרֶת

כותרת הכרטיס הראשי

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

כּוֹתֶרֶת

כותרת כרטיס משני

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

כּוֹתֶרֶת

כותרת כרטיס ההצלחה

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

כּוֹתֶרֶת

כותרת כרטיס הסכנה

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

כּוֹתֶרֶת

כותרת כרטיס אזהרה

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

כּוֹתֶרֶת

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

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

כּוֹתֶרֶת

כותרת קלף קל

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

כּוֹתֶרֶת

כותרת כרטיס כהה

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

html

<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.

כּוֹתֶרֶת

כותרת כרטיס ההצלחה

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

כותרת תחתונה

html

<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מנקודת השבירה.

כותרת הכרטיס

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

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

כותרת הכרטיס

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

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

כותרת הכרטיס

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

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

html

<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>

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

כותרת הכרטיס

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

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

כותרת הכרטיס

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

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

כותרת הכרטיס

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

html

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

כותרת הכרטיס

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

כותרת הכרטיס

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

כותרת הכרטיס

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

כותרת הכרטיס

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

html

<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ותראה את עטיפת הקלף הרביעי.

כותרת הכרטיס

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

כותרת הכרטיס

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

כותרת הכרטיס

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

כותרת הכרטיס

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

html

<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.

כותרת הכרטיס

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

כותרת הכרטיס

זהו כרטיס קצר.

כותרת הכרטיס

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

כותרת הכרטיס

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

html

<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>

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

כותרת הכרטיס

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

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

כותרת הכרטיס

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

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

כותרת הכרטיס

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

html

<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};

משתנים Sass

$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;