קלפים
הכרטיסים של Bootstrap מספקים מיכל תוכן גמיש וניתן להרחבה עם גרסאות ואפשרויות מרובות.
על אודות
כרטיס הוא מיכל תוכן גמיש וניתן להרחבה. הוא כולל אפשרויות לכותרות עליונות ותחתונות, מגוון רחב של תוכן, צבעי רקע הקשריים ואפשרויות תצוגה עוצמתיות. אם אתה מכיר את Bootstrap 3, כרטיסים מחליפים את הפאנלים הישנים, הבארות והתמונות הממוזערות שלנו. פונקציונליות דומה לרכיבים אלה זמינה כמחלקות שינוי עבור כרטיסים.
דוגמא
כרטיסים בנויים עם כמה שפחות סימון וסגנונות, אך עדיין מצליחים לספק המון שליטה והתאמה אישית. בנויים עם flexbox, הם מציעים יישור קל ומתערבבים היטב עם רכיבי Bootstrap אחרים. אין להם margin
כברירת מחדל, אז השתמש בכלי עזר לרווחים לפי הצורך.
להלן דוגמה לכרטיס בסיסי עם תוכן מעורב ורוחב קבוע. לכרטיסים אין רוחב קבוע להתחיל, כך שהם ימלאו באופן טבעי את מלוא הרוחב של רכיב האב שלו. זה מותאם בקלות עם אפשרויות הגודל השונות שלנו .
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
סוגי תוכן
כרטיסים תומכים במגוון רחב של תוכן, כולל תמונות, טקסט, קבוצות רשימות, קישורים ועוד. להלן דוגמאות למה שנתמך.
גוּף
אבן הבניין של כרטיס היא .card-body
. השתמש בו בכל פעם שאתה צריך חלק מרופד בתוך כרטיס.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
כותרות, טקסט וקישורים
כותרות כרטיסים משמשות על ידי הוספה .card-title
לתג <h*>
. באותו אופן, קישורים מתווספים וממוקמים זה ליד זה על ידי הוספה .card-link
לתג <a>
.
כתוביות משמשות על ידי הוספת .card-subtitle
a <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 סטנדרטיות.
טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.
<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>
כיור מטבח
ערבב והתאם מספר סוגי תוכן כדי ליצור את הכרטיס שאתה צריך, או לזרוק הכל לשם. להלן מוצגים סגנונות תמונה, בלוקים, סגנונות טקסט וקבוצת רשימה - כולם עטופים בכרטיס ברוחב קבוע.
כותרת הכרטיס
טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.
- חפץ
- פריט שני
- פריט שלישי
<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>
תמונות
כרטיסים כוללים כמה אפשרויות לעבודה עם תמונות. בחר מתוך הוספת "כובעי תמונה" בשני קצות הכרטיס, שכבת-על של תמונות עם תוכן כרטיס, או פשוט הטבעת התמונה בכרטיס.
כובעי תמונה
בדומה לכותרות עליונות ותחתונות, כרטיסים יכולים לכלול "כובעי תמונה" עליונים ותחתונים - תמונות בחלק העליון או התחתון של הכרטיס.
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
עודכן לאחרונה לפני 3 דקות
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
עודכן לאחרונה לפני 3 דקות
<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>
שכבות תמונה
הפוך תמונה לרקע של כרטיס ושכב על הטקסט של הכרטיס שלך. בהתאם לתמונה, ייתכן שתזדקק לסגנונות או כלי עזר נוספים או לא.
<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
השבירה. ייתכן שיהיה צורך בהתאמות נוספות בהתאם לתוכן הכרטיס שלך.
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
עודכן לאחרונה לפני 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
מנקודת השבירה.
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
עודכן לאחרונה לפני 3 דקות
כותרת הכרטיס
לכרטיס זה יש טקסט תומך למטה כהובלה טבעית לתוכן נוסף.
עודכן לאחרונה לפני 3 דקות
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. לכרטיס הזה יש תוכן ארוך אפילו מהראשון שמראה את פעולת הגובה השווה.
עודכן לאחרונה לפני 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>
בעת שימוש בקבוצות כרטיסים עם כותרות תחתונות, התוכן שלהן יתיישר אוטומטית.
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
כותרת הכרטיס
לכרטיס זה יש טקסט תומך למטה כהובלה טבעית לתוכן נוסף.
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. לכרטיס הזה יש תוכן ארוך אפילו מהראשון שמראה את פעולת הגובה השווה.
<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
וחלוקת ארבעה קלפים לרוחב שווה על פני מספר שורות, מנקודת השבירה הבינונית ומעלה.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
<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
ותראה את עטיפת הקלף הרביעי.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
<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.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
כותרת הכרטיס
זהו כרטיס קצר.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף.
כותרת הכרטיס
זהו כרטיס ארוך יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
<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>
בדיוק כמו בקבוצות קלפים, כותרות תחתונות של כרטיסים יסתדרו אוטומטית.
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. התוכן הזה קצת יותר ארוך.
כותרת הכרטיס
לכרטיס זה יש טקסט תומך למטה כהובלה טבעית לתוכן נוסף.
כותרת הכרטיס
זהו כרטיס רחב יותר עם טקסט תומך למטה כהובלה טבעית לתוכן נוסף. לכרטיס הזה יש תוכן ארוך אפילו מהראשון שמראה את פעולת הגובה השווה.
<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;