Ομάδες Λίστας στο Bootstrap 5

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

Βασική λίστα

η πιο βασική λίστα είναι μια αλυσίδα χωρίς σύνδεσμοι που περιέχει στοιχεία λίστας: .list-group .list-group-item <ul> Για να δημιουργήσετε μια βασική λίστα με κλάση πράγμα και κλάση .list-group-item <li> πράγμα:

Παράδειγμα

<ul class="list-group">
  <li class="list-group-item">Πρώτο στοιχείο</li>
  <li class="list-group-item">Δεύτερο στοιχείο</li>
  <li class="list-group-item">Τρίτο στοιχείο</li>
</ul>

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

ενεργή κατάσταση

Χρησιμοποιήστε .active Κατάδειξη του τρέχοντος στοιχείου με κλάση:

Παράδειγμα

<ul class="list-group">
  <li class="list-group-item active">ενεργό στοιχείο</li>
  <li class="list-group-item">Δεύτερο στοιχείο</li>
  <li class="list-group-item">Τρίτο στοιχείο</li>
</ul>

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

λίστα με συνδέσμους

Για να δημιουργήσετε μια λίστα με συνδέσμους, χρησιμοποιήστε <div> αντικαταστήστε <ul>με <a> αντικαταστήστε <li>Επιλογικά, αν θέλετε να προσθέσετε γκρι φόντο όταν είναι επιλεγμένο, προσθέστε .list-group-item-action Τύπος:

Παράδειγμα

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">πρώτη επιλογή</a>
  <a href="#" class="list-group-item list-group-item-action">δεύτερη επιλογή</a>
  <a href="#" class="list-group-item list-group-item-action">Τρίτο στοιχείο</a>
</div>

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

Προσβλέπων στοιχείο

.disabled Η κλάση προσθέτει πιο αχνό χρώμα κειμένου στα προσβλέπων στοιχεία. Όταν χρησιμοποιείται σε συνδέσμους, θα αφαιρεθεί το εφέ πτήσης:

Παράδειγμα

<div class="list-group">
  <a href="#" class="list-group-item disabled">Προσβλέπων στοιχείο</a>
  <a href="#" class="list-group-item disabled">Προσβλέπων στοιχείο</a>
  <a href="#" class="list-group-item">Τρίτο στοιχείο</a>
</div>

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

Αφαιρέστε τα περιθώρια

Χρησιμοποιήστε .list-group-flush Η κλάση αφαιρεί τα περιθώρια και τις γωνίες από τα στοιχεία της λίστας:

Παράδειγμα

<ul class="list-group list-group-flush">
  <li class="list-group-item">Πρώτο στοιχείο</li>
  <li class="list-group-item">Δεύτερο στοιχείο</li>
  <li class="list-group-item">Τρίτο στοιχείο</li>
  <li class="list-group-item">Δέκατο τέταρτο στοιχείο</li>
</ul>

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

Οριζόντια λίστα ομάδας με αριθμούς

Χρησιμοποιήστε .list-group-numbered Η κλάση δημιουργεί στοιχεία λίστας με αριθμούς στο αρχείο:

Παράδειγμα

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Πρώτο στοιχείο</li>
  <li class="list-group-item">Δεύτερο στοιχείο</li>
  <li class="list-group-item">Τρίτο στοιχείο</li>
</ol>

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

Οριζόντια λίστα ομάδας

Αν θέλετε τα στοιχεία της λίστας να εμφανίζονται οριζόντια αντί για κάθετο (παράλληλα αντί για τοποθετημένα), προσθέστε την κλάση .list-group-horizontal Προσθέστε την κλάση .list-group：

Παράδειγμα

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Πρώτο στοιχείο</li>
  <li class="list-group-item">Δεύτερο στοιχείο</li>
  <li class="list-group-item">Τρίτο στοιχείο</li>
  <li class="list-group-item">Δέκατο τέταρτο στοιχείο</li>
</ul>

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

Οι κλάσεις περιβάλλοντος

Οι κλάσεις περιβάλλοντος χρησιμοποιούνται για την προσθήκη χρώματος στα στοιχεία της λίστας:

Οι κλάσεις για την παλέτα χρώματος των στοιχείων της λίστας είναι:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Παράδειγμα

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Επιτυχής αντικείμενο</li>
  <li class="list-group-item list-group-item-secondary">Δευτερεύον στοιχείο</li>
  <li class="list-group-item list-group-item-info">Πληροφοριακό στοιχείο</li>
  <li class="list-group-item list-group-item-warning">Κατανοητό στοιχείο</li>
  <li class="list-group-item list-group-item-danger">Κίνδυνος στοιχείου</li>
  <li class="list-group-item list-group-item-primary">Πρωτεύον στοιχείο</li>
  <li class="list-group-item list-group-item-dark">Σκοτεινό στοιχείο</li>
  <li class="list-group-item list-group-item-light">Ανοιχτό στοιχείο</li>
</ul>

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

Στοιχεία συνδέσμων με τυποποιημένη κλάση

Παράδειγμα

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Στοιχείο ενέργειας</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Επιτυχία στοιχείου</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Δευτερεύον στοιχείο</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Πληροφοριακό στοιχείο</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Κατανοητό στοιχείο</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Κίνδυνος στοιχείο</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Πρωτεύον στοιχείο</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Αχνό στοιχείο</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Μικρό στοιχείο</a>
</div>

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

Λίστες με διακρίσεις

Μετακίνηση .badge Η σύνδεση με τα είδη utility/helper επιτρέπει την προσθήκη διακρίσεων σε ομαδοποιημένες λίστες:

Παράδειγμα

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Παραλήψεις
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Εμailable
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Κάδος απορριψεων
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

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