Source

Καρτέλλες

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

Σχετικά με

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

Παράδειγμα

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

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

100% x 180
Τίτλος κάρτας

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

Πάω κάπου
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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.

Κούπα εικόνας [100%x180]

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

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

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

Κούπα εικόνας [100%x180]
Τίτλος κάρτας

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Προθάλαμος στο έρωτα
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>
Προτεινόμενα
Ειδική μεταχείριση τίτλου

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

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

Κόλλα

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

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

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

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

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

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

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

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

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

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

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

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

Κουμπί
Τίτλος κάρτας

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Προσθέστε κάποια πλοήγηση στην κεφαλίδα (ή μπλοκ) μιας κάρτας με τα στοιχεία πλοήγησης του Bootstrap .

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

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

Πάω κάπου
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Ειδική μεταχείριση τίτλου

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

Πάω κάπου
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

εικόνες

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

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

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

100% x 180
Τίτλος κάρτας

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

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

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

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

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

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

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

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

100% x 270
Τίτλος κάρτας

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

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

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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;για να επιτύχουν το ομοιόμορφο μέγεθός τους.

100% x 180
Τίτλος κάρτας

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

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

100% x 180
Τίτλος κάρτας

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

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

100% x 180
Τίτλος κάρτας

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

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

100% x 180
Τίτλος κάρτας

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

100% x 180
Τίτλος κάρτας

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

100% x 180
Τίτλος κάρτας

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

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

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

100% x 200
Τίτλος κάρτας

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

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

100% x 200
Τίτλος κάρτας

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

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

100% x 200
Τίτλος κάρτας

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

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

100% x 180
Τίτλος κάρτας

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

100% x 180
Τίτλος κάρτας

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

100% x 180
Τίτλος κάρτας

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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δεν είναι ακόμα αλεξίσφαιρη λύση.

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

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

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

Κάποιος διάσημος στον τίτλο πηγής
100% x 160
Τίτλος κάρτας

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

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

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

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

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

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

100% x 260

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=".../100px160/" 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=".../100px160/" 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 a regular title and short paragraphy of text below it.</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=".../100px260/" 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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</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;
  }
}