Καρτέλλες

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

Σε αυτήν την σελίδα

Σχετικά με

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

Παράδειγμα

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

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

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

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

Πάω κάπου

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

Σώμα

Το δομικό στοιχείο μιας κάρτας είναι το .card-body. Χρησιμοποιήστε το όποτε χρειάζεστε ένα τμήμα με επένδυση μέσα σε μια κάρτα.

Αυτό είναι κάποιο κείμενο μέσα σε ένα σώμα κάρτας.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

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

Οι τίτλοι καρτών χρησιμοποιούνται με την προσθήκη .card-titleσε μια <h*>ετικέτα. Με τον ίδιο τρόπο προστίθενται σύνδεσμοι και τοποθετούνται ο ένας δίπλα στον άλλο προσθέτοντας .card-linkσε μια <a>ετικέτα.

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

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

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

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

html

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

εικόνες

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

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Λίστα ομάδων

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

Ενα αντικείμενο
Ένα δεύτερο στοιχείο
Ένα τρίτο στοιχείο

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

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

Ενα αντικείμενο
Ένα δεύτερο στοιχείο
Ένα τρίτο στοιχείο

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Ενα αντικείμενο
Ένα δεύτερο στοιχείο
Ένα τρίτο στοιχείο

Υποσέλιδο κάρτας

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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

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

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

Ενα αντικείμενο
Ένα δεύτερο στοιχείο
Ένα τρίτο στοιχείο

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

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Προσθέστε μια προαιρετική κεφαλίδα ή/και υποσέλιδο σε μια κάρτα.

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

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

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

Πάω κάπου

html

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

Οι κεφαλίδες καρτών μπορούν να διαμορφωθούν προσθέτοντας .card-headerσε <h*>στοιχεία.

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

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

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

Πάω κάπου

html

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

Παραθέτω, αναφορά

Ένα πολύ γνωστό απόσπασμα, που περιέχεται σε ένα στοιχείο blockquote.

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

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

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

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

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

Πάω κάπου

2 μέρες πριν

html

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

Κόλλα

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

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

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

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

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

Πάω κάπου

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

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

Πάω κάπου

html

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

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

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

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

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

Κουμπί

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

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

Κουμπί

html

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

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

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

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

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

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

Πάω κάπου

html

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

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

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

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

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

Πάω κάπου

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

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

Πάω κάπου

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

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

Πάω κάπου

html

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

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

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

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

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

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

Πάω κάπου

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

Πάω κάπου

html

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

εικόνες

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

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

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

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

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

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

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

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

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

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

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

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

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

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

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

Οριζόντιος

Χρησιμοποιώντας έναν συνδυασμό κλάσεων πλέγματος και χρησιμότητας, οι κάρτες μπορούν να γίνουν οριζόντιες με τρόπο φιλικό προς τα κινητά και απόκριση. Στο παρακάτω παράδειγμα, αφαιρούμε τις υδρορροές πλέγματος με .g-0και χρησιμοποιούμε .col-md-*κλάσεις για να κάνουμε την κάρτα οριζόντια στο mdσημείο διακοπής. Μπορεί να χρειαστούν περαιτέρω προσαρμογές ανάλογα με το περιεχόμενο της κάρτας σας.

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

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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Στυλ καρτών

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

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

Προστέθηκε στην έκδοση 5.2.0

Ορίστε ένα background-colorμε αντίθεση στο προσκήνιο colorμε τους .text-bg-{color}βοηθούς μας . Προηγουμένως απαιτούνταν η μη αυτόματη αντιστοίχιση των επιλογών σας .text-{color}και των .bg-{color}βοηθητικών προγραμμάτων για το στυλ, τα οποία μπορείτε ακόμα να χρησιμοποιήσετε εάν προτιμάτε.

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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

Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο που είναι κρυμμένο με την .visually-hiddenτάξη.

Σύνορο

Χρησιμοποιήστε βοηθητικά προγράμματα περιγράμματος για να αλλάξετε μόνο το border-colorστοιχείο μιας κάρτας. Λάβετε υπόψη ότι μπορείτε να τοποθετήσετε .text-{color}κλάσεις στο γονικό .cardή ένα υποσύνολο των περιεχομένων της κάρτας όπως φαίνεται παρακάτω.

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

Επί κεφαλής

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

html

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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

Μπορείτε επίσης να αλλάξετε τα περιγράμματα στην κεφαλίδα και το υποσέλιδο της κάρτας όπως χρειάζεται, ακόμη και να τα αφαιρέσετε background-colorμε .bg-transparent.

Επί κεφαλής

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

Υποσέλιδο

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

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

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

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

Χρησιμοποιήστε ομάδες καρτών για να αποδώσετε τις κάρτες ως ένα ενιαίο, προσαρτημένο στοιχείο με στήλες ίσου πλάτους και ύψους. Οι ομάδες καρτών ξεκινούν στοιβαγμένες και τις χρησιμοποιούν display: flex;για να συνδεθούν με ομοιόμορφες διαστάσεις ξεκινώντας από το smσημείο διακοπής.

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

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

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

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

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

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

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

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

html

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

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

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

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

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

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

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

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

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

html

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

Κάρτες πλέγματος

Χρησιμοποιήστε το σύστημα πλέγματος Bootstrap και τις .row-colsκλάσεις του για να ελέγξετε πόσες στήλες πλέγματος (τυλιγμένες γύρω από τις κάρτες σας) θα εμφανίσετε ανά σειρά. Για παράδειγμα, ορίστε .row-cols-1τα φύλλα σε μια στήλη και .row-cols-md-2χωρίστε τέσσερα φύλλα σε ίσο πλάτος σε πολλές σειρές, από το μεσαίο σημείο διακοπής προς τα πάνω.

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

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

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

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

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

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Αλλάξτε το σε .row-cols-3και θα δείτε το τέταρτο φύλλο.

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

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

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Όταν χρειάζεστε ίσο ύψος, προσθέστε .h-100στα χαρτιά. Εάν θέλετε ίσα ύψη από προεπιλογή, μπορείτε να ορίσετε $card-height: 100%στο Sass.

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

Αυτή είναι μια σύντομη κάρτα.

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

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

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Τοιχοποιία

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

CSS

Μεταβλητές

Προστέθηκε στην έκδοση 5.2.0

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, οι κάρτες χρησιμοποιούν πλέον τοπικές μεταβλητές CSS ενεργοποιημένες .cardγια βελτιωμένη προσαρμογή σε πραγματικό χρόνο. Οι τιμές για τις μεταβλητές CSS ορίζονται μέσω Sass, επομένως η προσαρμογή Sass εξακολουθεί να υποστηρίζεται.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Μεταβλητές Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

Καρτέλλες

Σχετικά με

Παράδειγμα

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

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

Σώμα

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

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

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

εικόνες

Λίστα ομάδων

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

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

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

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

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

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

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

Κόλλα

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

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

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

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

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

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

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

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

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

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

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

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

Πλοήγηση

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

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

εικόνες

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

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

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

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

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

Οριζόντιος

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

Στυλ καρτών

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

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

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

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

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

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

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

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

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

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

Σύνορο

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Κάρτες πλέγματος

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

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

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

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

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

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

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