Καρτέλλες

Οι κάρτες του Bootstrap παρέχουν ένα ευέλικτο και επεκτάσιμο κοντέινερ περιεχομένου με πολλές παραλλαγές και επιλογές.

Σχετικά με

Η κάρτα είναι ένα ευέλικτο και επεκτάσιμο κοντέινερ περιεχομένου. Περιλαμβάνει επιλογές για κεφαλίδες και υποσέλιδα, μεγάλη ποικιλία περιεχομένου, χρώματα φόντου με βάση τα συμφραζόμενα και ισχυρές επιλογές εμφάνισης. Εάν είστε εξοικειωμένοι με το Bootstrap 3, οι κάρτες αντικαθιστούν τα παλιά μας πάνελ, πηγάδια και μικρογραφίες. Παρόμοια λειτουργικότητα με αυτά τα στοιχεία είναι διαθέσιμη ως κατηγορίες τροποποιητών για κάρτες.

Παράδειγμα

Οι κάρτες κατασκευάζονται με όσο το δυνατόν λιγότερη σήμανση και στυλ, αλλά εξακολουθούν να καταφέρνουν να προσφέρουν έναν τόνο ελέγχου και προσαρμογής. Χτισμένα με flexbox, προσφέρουν εύκολη ευθυγράμμιση και αναμειγνύονται καλά με άλλα εξαρτήματα Bootstrap. Δεν έχουν marginαπό προεπιλογή, επομένως χρησιμοποιήστε βοηθητικά προγράμματα Spacing όπως απαιτείται.

Παρακάτω είναι ένα παράδειγμα βασικής κάρτας με μικτό περιεχόμενο και σταθερό πλάτος. Οι κάρτες δεν έχουν σταθερό πλάτος για να ξεκινήσουν, επομένως θα γεμίσουν φυσικά όλο το πλάτος του γονικού τους στοιχείου. Αυτό προσαρμόζεται εύκολα με τις διάφορες επιλογές μεγεθών που διαθέτουμε .

Τίτλος κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Πάω κάπου

<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-subtitleσε μια <h*>ετικέτα. Εάν το .card-titleκαι τα .card-subtitleστοιχεία τοποθετηθούν σε ένα .card-bodyαντικείμενο, ο τίτλος και ο υπότιτλος της κάρτας ευθυγραμμίζονται σωστά.

Τίτλος κάρτας

Υπότιτλος κάρτας

Σύνδεσμος κάρτας Ένας άλλος σύνδεσμος

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

εικόνες

.card-img-topτοποθετεί μια εικόνα στο επάνω μέρος της κάρτας. Με .card-text, μπορεί να προστεθεί κείμενο στην κάρτα. Το κείμενο εντός .card-textμπορεί επίσης να διαμορφωθεί με τις τυπικές ετικέτες HTML.

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

Λίστα ομάδων

Δημιουργήστε λίστες περιεχομένου σε μια κάρτα με μια ομάδα flush list.

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>

Ο νεροχύτης της κουζίνας

Ανακατέψτε και αντιστοιχίστε πολλούς τύπους περιεχομένου για να δημιουργήσετε την κάρτα που χρειάζεστε ή πετάξτε τα πάντα εκεί. Παρακάτω εμφανίζονται στυλ εικόνων, μπλοκ, στυλ κειμένου και μια ομάδα λίστας—όλα τυλιγμένα σε μια κάρτα σταθερού πλάτους.

Τίτλος κάρτας

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. Ακέραιος posuere erat a ante.

Κάποιος διάσημος στον τίτλο πηγής

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

Προτεινόμενα

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου

2 μέρες πριν

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Κόλλα

Οι κάρτες υποθέτουν ότι δεν widthπρέπει να ξεκινήσουν συγκεκριμένα, επομένως θα έχουν πλάτος 100%, εκτός εάν αναφέρεται διαφορετικά. Μπορείτε να το αλλάξετε όπως απαιτείται με προσαρμοσμένο CSS, κλάσεις πλέγματος, μίξεις πλέγματος Sass ή βοηθητικά προγράμματα.

Χρήση σήμανσης πλέγματος

Χρησιμοποιώντας το πλέγμα, τυλίξτε τις κάρτες σε στήλες και σειρές όπως απαιτείται.

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Χρήση βοηθητικών προγραμμάτων

Χρησιμοποιήστε τα ελάχιστα διαθέσιμα βοηθητικά προγράμματα μέτρησης μεγέθους για να ορίσετε γρήγορα το πλάτος μιας κάρτας.

Τίτλος κάρτας

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Κουμπί

Τίτλος κάρτας

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Κουμπί

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Χρήση προσαρμοσμένου CSS

Χρησιμοποιήστε προσαρμοσμένο CSS στα φύλλα στυλ σας ή ως ενσωματωμένα στυλ για να ορίσετε ένα πλάτος.

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Στοίχιση κειμένου

Μπορείτε να αλλάξετε γρήγορα τη στοίχιση κειμένου οποιασδήποτε κάρτας — στο σύνολό της ή σε συγκεκριμένα μέρη της — με τις τάξεις μας στοίχισης κειμένου .

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-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>

εικόνες

Οι κάρτες περιλαμβάνουν μερικές επιλογές για εργασία με εικόνες. Επιλέξτε από την προσθήκη "κεφαλαίων εικόνων" σε κάθε άκρο μιας κάρτας, επικάλυψη εικόνων με περιεχόμενο κάρτας ή απλώς ενσωμάτωση της εικόνας σε μια κάρτα.

Καλύμματα εικόνας

Παρόμοια με τις κεφαλίδες και τα υποσέλιδα, οι κάρτες μπορούν να περιλαμβάνουν πάνω και κάτω "κεφαλαία εικόνας"—εικόνες στο επάνω ή στο κάτω μέρος μιας κάρτας.

Τίτλος κάρτας

Αυτή είναι μια ευρύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 3 λεπτά

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

Επικαλύψεις εικόνων

Μετατρέψτε μια εικόνα σε φόντο κάρτας και επικαλύψτε το κείμενο της κάρτας σας. Ανάλογα με την εικόνα, μπορεί να χρειάζεστε ή να μην χρειάζεστε επιπλέον στυλ ή βοηθητικά προγράμματα.

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 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>

Στυλ καρτών

Οι κάρτες περιλαμβάνουν διάφορες επιλογές για την προσαρμογή του φόντου, των περιγραμμάτων και του χρώματός τους.

Φόντο και χρώμα

Χρησιμοποιήστε βοηθητικά προγράμματα κειμένου και φόντου για να αλλάξετε την εμφάνιση μιας κάρτας.

Επί κεφαλής

Κύριος τίτλος κάρτας

Επί κεφαλής

Δευτερεύων τίτλος κάρτας

Επί κεφαλής

Τίτλος κάρτας επιτυχίας

Επί κεφαλής

Τίτλος κάρτας κινδύνου

Επί κεφαλής

Τίτλος προειδοποιητικής κάρτας

Επί κεφαλής

Τίτλος κάρτας πληροφοριών

Επί κεφαλής

Τίτλος κάρτας Light

Επί κεφαλής

Τίτλος σκοτεινής κάρτας

<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ή ένα υποσύνολο των περιεχομένων της κάρτας όπως φαίνεται παρακάτω.

Επί κεφαλής

Κύριος τίτλος κάρτας

Επί κεφαλής

Δευτερεύων τίτλος κάρτας

Επί κεφαλής

Τίτλος κάρτας επιτυχίας

Επί κεφαλής

Τίτλος κάρτας κινδύνου

Επί κεφαλής

Τίτλος προειδοποιητικής κάρτας

Επί κεφαλής

Τίτλος κάρτας πληροφοριών

Επί κεφαλής

Τίτλος κάρτας Light

Επί κεφαλής

Τίτλος σκοτεινής κάρτας

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

Συνδυάζει βοηθητικά προγράμματα

Μπορείτε επίσης να αλλάξετε τα περιγράμματα στην κεφαλίδα και το υποσέλιδο της κάρτας όπως χρειάζεται, ακόμη και να τα αφαιρέσετε 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;για να επιτύχουν το ομοιόμορφο μέγεθός τους.

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Αυτή η κάρτα έχει κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Αυτή είναι μια ευρύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτή η κάρτα έχει ακόμη μεγαλύτερο περιεχόμενο από την πρώτη που δείχνει αυτήν την ενέργεια ίσου ύψους.

Τελευταία ενημέρωση πριν από 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>

Όταν χρησιμοποιείτε ομάδες καρτών με υποσέλιδα, το περιεχόμενό τους θα ευθυγραμμιστεί αυτόματα.

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Αυτή η κάρτα έχει κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 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>
    </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>

Τράπουλες για κάρτες

Χρειάζεστε ένα σετ από κάρτες ίσου πλάτους και ύψους που δεν είναι συνδεδεμένες μεταξύ τους; Χρησιμοποιήστε τράπουλες.

Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Αυτή η κάρτα έχει κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 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>

Όπως και με τις ομάδες καρτών, τα υποσέλιδα καρτών στις τράπουλες θα ευθυγραμμιστούν αυτόματα.

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Αυτή η κάρτα έχει κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 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 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>

Στήλες καρτών

Οι κάρτες μπορούν να οργανωθούν σε στήλες που μοιάζουν με τοιχοποιία.card-columns με μόνο CSS, τυλίγοντάς τις σε . Οι κάρτες είναι κατασκευασμένες με columnιδιότητες CSS αντί για flexbox για ευκολότερη ευθυγράμμιση. Οι κάρτες ταξινομούνται από πάνω προς τα κάτω και από αριστερά προς τα δεξιά.

Ψηλά το κεφάλι! Τα χιλιόμετρα με τις στήλες καρτών μπορεί να διαφέρουν. Για να αποτρέψουμε το σπάσιμο των φύλλων μεταξύ των στηλών, πρέπει να τις ορίσουμε σε display: inline-blockότι column-break-inside: avoidδεν είναι ακόμα αλεξίσφαιρη λύση.

Τίτλος κάρτας που αναδιπλώνεται σε νέα γραμμή

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante.

Κάποιος διάσημος στον τίτλο πηγής

Τίτλος κάρτας

Αυτή η κάρτα έχει κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat.

Κάποιος διάσημος στον τίτλο πηγής

Τίτλος κάρτας

Αυτή η κάρτα έχει κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante.

Κάποιος διάσημος στον τίτλο πηγής

Τίτλος κάρτας

Τελευταία ενημέρωση πριν από 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;
  }
}

Καρτέλλες

Σχετικά με

Παράδειγμα

Τίτλος κάρτας

Τύποι περιεχομένου

Σώμα

Τίτλοι, κείμενο και σύνδεσμοι

Τίτλος κάρτας

Υπότιτλος κάρτας

εικόνες

Λίστα ομάδων

Ο νεροχύτης της κουζίνας

Τίτλος κάρτας

Κεφαλίδα και υποσέλιδο

Ειδική μεταχείριση τίτλου

Προτεινόμενα

Ειδική μεταχείριση τίτλου

Ειδική μεταχείριση τίτλου

Κόλλα

Χρήση σήμανσης πλέγματος

Ειδική μεταχείριση τίτλου

Ειδική μεταχείριση τίτλου

Χρήση βοηθητικών προγραμμάτων

Τίτλος κάρτας

Τίτλος κάρτας

Χρήση προσαρμοσμένου CSS

Ειδική μεταχείριση τίτλου

Στοίχιση κειμένου

Ειδική μεταχείριση τίτλου

Ειδική μεταχείριση τίτλου

Ειδική μεταχείριση τίτλου

Πλοήγηση

Ειδική μεταχείριση τίτλου

Ειδική μεταχείριση τίτλου

εικόνες

Καλύμματα εικόνας

Τίτλος κάρτας

Τίτλος κάρτας

Επικαλύψεις εικόνων

Τίτλος κάρτας

Στυλ καρτών

Φόντο και χρώμα

Κύριος τίτλος κάρτας

Δευτερεύων τίτλος κάρτας

Τίτλος κάρτας επιτυχίας

Τίτλος κάρτας κινδύνου

Τίτλος προειδοποιητικής κάρτας

Τίτλος κάρτας πληροφοριών

Τίτλος κάρτας Light

Τίτλος σκοτεινής κάρτας

Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

Σύνορο

Κύριος τίτλος κάρτας

Δευτερεύων τίτλος κάρτας

Τίτλος κάρτας επιτυχίας

Τίτλος κάρτας κινδύνου

Τίτλος προειδοποιητικής κάρτας

Τίτλος κάρτας πληροφοριών

Τίτλος κάρτας Light

Τίτλος σκοτεινής κάρτας

Συνδυάζει βοηθητικά προγράμματα

Τίτλος κάρτας επιτυχίας

Διάταξη κάρτας

Ομάδες καρτών

Τίτλος κάρτας

Τίτλος κάρτας

Τίτλος κάρτας

Τίτλος κάρτας

Τίτλος κάρτας

Τίτλος κάρτας

Τράπουλες για κάρτες

Τίτλος κάρτας

Τίτλος κάρτας

Τίτλος κάρτας

Τίτλος κάρτας

Τίτλος κάρτας

Τίτλος κάρτας

Στήλες καρτών

Τίτλος κάρτας που αναδιπλώνεται σε νέα γραμμή

Τίτλος κάρτας