Κάρτες Bootstrap 5

Επιλογή μαθημάτων

Προτάσεις μαθημάτων:

Κάρτα

Μια βασική κάρτα είναι μια τοίχος με κατεύθυνση τον πλάτανο, η περιεχόμενη περιοχή της οποίας έχει μερικά εσωτερικά περιθώρια. Εξαιρείται η κεφαλίδα, τα πατήματα, το περιεχόμενο, τα χρώματα και άλλες επιλογές. .card Η κάρτα που δημιουργείται με την κλάση .card-body Κλάση:

Παράδειγμα

<div class="card">
  <div class="card-body">Βασική κάρτα</div>
</div>

Δοκιμάστε το προσωπικά

Κεφαλίδα και πατήματα

.card-header Προσθέστε τον τίτλο στην κάρτα με την κλάση:.card-footer Προσθέστε τα πατήματα στην κάρτα με την κλάση:

Παράδειγμα

<div class="card">
  <div class="card-header">Κεφαλίδα</div>
  <div class="card-body">Περιεχόμενο</div>
  <div class="card-footer">Πατήματα</div>
</div>

Δοκιμάστε το προσωπικά

Κάρτα περιβάλλοντος

Για να προσθέσετε χρώμα υποβάθρου στην κάρτα, χρησιμοποιήστε τις κλάσεις περιβάλλοντος:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Παράδειγμα

Δοκιμάστε το προσωπικά

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

Χρησιμοποιήστε .card-title Προσθέστε τον τίτλο της κάρτας σε οποιοδήποτε στοιχείο τίτλου. Αν <p> το στοιχείο είναι .card-body Τα τελευταία στοιχεία (ή το μοναδικό στοιχείο) του .card-text Η κλάση χρησιμοποιείται για την αφαίρεση <p> Κατώτερη περιθωρία στο στοιχείο..card-link Προσθέστε μπλε χρώμα και εφέ πτήσης σε οποιοδήποτε σύνδεσμο.

Παράδειγμα

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Τίτλος κάρτας</h4>
    <p class="card-text">Κάποια παραδείγματα κειμένων. Κάποια παραδείγματα κειμένων.</p>
    <a href="#" class="card-link">Σύνδεσμος κάρτας</a>
    <a href="#" class="card-link">Ανάλογος σύνδεσμος</a>
  </div>
</div>

Δοκιμάστε το προσωπικά

εικόνα κάρτας

Μετατρέψτε την .card-img-top ή .card-img-bottom Προσθέστε στο <img>μπορείτε να τοποθετήσετε την εικόνα στην κορυφή ή στην βάση της κάρτας.

Σημειώστε ότι προσθέσαμε την εικόνα εκτός της .card-body για να καλύπτει ολόκληρη τη πλάτος:

Παράδειγμα

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Εικόνα κάρτας">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Ο Bill Gates είναι ένας προγραμματιστής και μηχανικός. Κάποια παραδείγματα κειμένων. Κάποια παραδείγματα κειμένων.</p>
    <a href="#" class="btn btn-primary">Δείτε το προφίλ σας</a>
  </div>
</div>

Δοκιμάστε το προσωπικά

Κάρτα εικόνας επικάλυψης

Μετατρέψτε την εικόνα σε φόντο κάρτας και χρησιμοποιήστε .card-img-overlay Προσθέστε κείμενο στην κορυφή της εικόνας:

Παράδειγμα

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Εικόνα κάρτας">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Κάποια παραδείγματα κειμένων. Κάποια παραδείγματα κειμένων.</p>
    <a href="#" class="btn btn-primary">Δείτε το προφίλ σας</a>
  </div>
</div>

Δοκιμάστε το προσωπικά