Τεκμηρίωση και παραδείγματα για το στυλ επιλογής πινάκων (δεδομένης της επικρατούσας χρήσης τους σε προσθήκες JavaScript) με το Bootstrap.
Σε αυτήν την σελίδα
ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ
Λόγω της ευρείας χρήσης <table>στοιχείων σε γραφικά στοιχεία τρίτων, όπως τα ημερολόγια και τα εργαλεία επιλογής ημερομηνιών, οι πίνακες του Bootstrap είναι επιλέξιμοι . Προσθέστε τη βασική κλάση .tableσε οποιαδήποτε <table>και, στη συνέχεια, επεκτείνετε με τις προαιρετικές μας κατηγορίες τροποποιητών ή προσαρμοσμένα στυλ. Όλα τα στυλ πίνακα δεν κληρονομούνται στο Bootstrap, πράγμα που σημαίνει ότι οι ένθετοι πίνακες μπορούν να διαμορφωθούν ανεξάρτητα από το γονικό.
Χρησιμοποιώντας την πιο βασική σήμανση πίνακα, δείτε πώς .tableφαίνονται οι βασισμένοι πίνακες στο Bootstrap.
#
Πρώτα
τελευταίος
Λαβή
1
Σημάδι
Οθων
@mdo
2
Ιάκωβος
Θόρντον
@Λίπος
3
Larry the Bird
@κελάδημα
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Παραλλαγές
Χρησιμοποιήστε κλάσεις με βάση τα συμφραζόμενα για να χρωματίσετε πίνακες, σειρές πινάκων ή μεμονωμένα κελιά.
Τάξη
Επικεφαλίδα
Επικεφαλίδα
Προκαθορισμένο
Κύτταρο
Κύτταρο
Πρωταρχικός
Κύτταρο
Κύτταρο
Δευτερεύων
Κύτταρο
Κύτταρ��
Επιτυχία
Κύτταρο
Κύτταρο
Κίνδυνος
Κύτταρο
Κύτταρο
Προειδοποίηση
Κύτταρο
Κύτταρο
Πληροφορίες
Κύτταρο
Κύτταρο
Φως
Κύτταρο
Κύτταρο
Σκοτάδι
Κύτταρο
Κύτταρο
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες
Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο που είναι κρυμμένο με την .visually-hiddenτάξη.
Τονισμένα τραπέζια
Ριγέ σειρές
Χρησιμοποιήστε .table-stripedτο για να προσθέσετε λωρίδες ζέβρας σε οποιαδήποτε σειρά πίνακα εντός του <tbody>.
#
Πρώτα
τελευταίος
Λαβή
1
Σημάδι
Οθων
@mdo
2
Ιάκωβος
Θόρντον
@Λίπος
3
Larry the Bird
@κελάδημα
<tableclass="table table-striped">
...
</table>
Αυτές οι κλάσεις μπορούν επίσης να προστεθούν σε παραλλαγές πίνακα:
Ξεκινάμε ορίζοντας το φόντο ενός κελιού πίνακα με την --bs-table-bgπροσαρμοσμένη ιδιότητα. Στη συνέχεια, όλες οι παραλλαγές πίνακα ορίζουν αυτήν την προσαρμοσμένη ιδιότητα για χρωματισμό των κελιών του πίνακα. Με αυτόν τον τρόπο, δεν μπαίνουμε σε μπελάδες εάν χρησιμοποιούνται ημιδιαφανή χρώματα ως φόντο του τραπεζιού.
Στη συνέχεια, προσθέτουμε μια σκιά πλαισίου εισαγωγής στα κελιά του πίνακα με box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);το στρώμα πάνω από οποιοδήποτε καθορισμένο background-color. Επειδή χρησιμοποιούμε τεράστιο άπλωμα και χωρίς θαμπάδα, το χρώμα θα είναι μονότονο. Εφόσον --bs-table-accent-bgδεν έχει οριστεί από προεπιλογή, δεν έχουμε σκιά προεπιλεγμένου πλαισίου.
Όταν προστίθενται τάξεις ή .table-striped, το ρυθμίζεται σε ένα ημιδιαφανές χρώμα για χρωματισμό του φόντου..table-hover.table-active--bs-table-accent-bg
Για κάθε παραλλαγή πίνακα, δημιουργούμε ένα --bs-table-accent-bgχρώμα με την υψηλότερη αντίθεση ανάλογα με αυτό το χρώμα. Για παράδειγμα, το χρώμα έμφασης για .table-primaryείναι πιο σκούρο ενώ .table-darkέχει πιο ανοιχτό χρώμα.
Τα χρώματα κειμένου και περιγράμματος δημιουργούνται με τον ίδιο τρόπο και τα χρώματά τους κληρονομούνται από προεπιλογή.
Τα κελιά του πίνακα <thead>είναι πάντα κάθετα ευθυγραμμισμένα προς τα κάτω. Τα κελιά του πίνακα <tbody>κληρονομούν την ευθυγράμμισή τους από <table>και στοιχίζονται στην κορυφή από προεπιλογή. Χρησιμοποιήστε τις κλάσεις κάθετης στοίχισης για να ευθυγραμμίσετε εκ νέου όπου χρειάζεται.
Επικεφαλίδα 1
Επικεφαλίδα 2
Επικεφαλίδα 3
Κεφάλαιο 4
Αυτό το κελί κληρονομείται vertical-align: middle;από τον πίνακα
Αυτό το κελί κληρονομείται vertical-align: middle;από τον πίνακα
Αυτό το κελί κληρονομείται vertical-align: middle;από τον πίνακα
Αυτό εδώ είναι ένα κείμενο κράτησης θέσης, που προορίζεται να καταλαμβάνει αρκετό κατακόρυφο χώρο, για να δείξει πώς λειτουργεί η κατακόρυφη στοίχιση στα προηγούμενα κελιά.
Αυτό το κελί κληρονομείται vertical-align: bottom;από τη γραμμή του πίνακα
Αυτό το κελί κληρονομείται vertical-align: bottom;από τη γραμμή του πίνακα
Αυτό το κελί κληρονομείται vertical-align: bottom;από τη γραμμή του πίνακα
Αυτό εδώ είναι ένα κείμενο κράτησης θέσης, που προορίζεται να καταλαμβάνει αρκετό κατακόρυφο χώρο, για να δείξει πώς λειτουργεί η κατακόρυφη στοίχιση στα προηγούμενα κελιά.
Αυτό το κελί κληρονομείται vertical-align: middle;από τον πίνακα
Αυτό το κελί κληρονομείται vertical-align: middle;από τον πίνακα
Αυτό το κελί είναι ευθυγραμμισμένο στην κορυφή.
Αυτό εδώ είναι ένα κείμενο κράτησης θέσης, που προορίζεται να καταλαμβάνει αρκετό κατακόρυφο χώρο, για να δείξει πώς λειτουργεί η κατακόρυφη στοίχιση στα προηγούμενα κελιά.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Φωλιάζοντας
Τα στυλ περιγράμματος, τα ενεργά στυλ και οι παραλλαγές πίνακα δεν κληρονομούνται από ένθετους πίνακες.
Για να αποτρέψουμε τη διαρροή οποιωνδήποτε στυλ σε ένθετους πίνακες, χρησιμοποιούμε τον >επιλογέα θυγατρικού συνδυασμού ( ) στο CSS μας. Δεδομένου ότι πρέπει να στοχεύσουμε όλα τα tds και ths στο thead, tbody, και tfoot, ο επιλογέας μας θα φαινόταν αρκετά μεγάλος χωρίς αυτό. Ως εκ τούτου, χρησιμοποιούμε τον μάλλον περίεργο .table > :not(caption) > * > *επιλογέα για να στοχεύσουμε όλα τα tds και thτα s του .table, αλλά κανένα από τυχόν ένθετους πίνακες.
Σημειώστε ότι εάν προσθέσετε <tr>s ως απευθείας θυγατρικά ενός πίνακα, αυτά <tr>θα είναι τυλιγμένα σε ένα <tbody>από προεπιλογή, κάνοντας έτσι τους επιλογείς μας να λειτουργούν όπως προβλέπεται.
Ανατομία
Κεφαλή τραπεζιού
Παρόμοια με τους πίνακες και τους σκούρους πίνακες, χρησιμοποιήστε τις κλάσεις τροποποιητών .table-lightή .table-darkγια να κάνετε <thead>τα s να φαίνονται ανοιχτό ή σκούρο γκρι.
Το ένα <caption>λειτουργεί σαν επικεφαλίδα για έναν πίνακα. Βοηθά τους χρήστες με προγράμματα ανάγνωσης οθόνης να βρουν έναν πίνακα και να κατανοήσουν περί τίνος πρόκειται και να αποφασίσουν αν θέλουν να τον διαβάσουν.
Λίστα χρηστών
#
Πρώτα
τελευταίος
Λαβή
1
Σημάδι
Οθων
@mdo
2
Ιάκωβος
Θόρντον
@Λίπος
3
Larry the Bird
@κελάδημα
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Μπορείτε επίσης να βάλετε το <caption>στην κορυφή του τραπεζιού με .caption-top.
Λίστα χρηστών
#
Πρώτα
τελευταίος
Λαβή
1
Σημάδι
Οθων
@mdo
2
Ιάκωβος
Θόρντον
@Λίπος
3
Λάρι
το πουλί
@κελάδημα
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Αποκριτικοί πίνακες
Οι αποκριτικοί πίνακες επιτρέπουν την εύκολη κύλιση των πινάκων οριζόντια. Κάντε οποιονδήποτε πίνακα αποκριτικό σε όλες τις θύρες προβολής τυλίγοντας ένα .tableμε .table-responsive. Εναλλακτικά, επιλέξτε ένα μέγιστο σημείο διακοπής με το οποίο μπορείτε να έχετε έναν αποκριτικό πίνακα χρησιμοποιώντας το .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Κατακόρυφη αποκοπή/περικοπή
Οι αποκριτικοί πίνακες χρησιμοποιούν το overflow-y: hidden, το οποίο αποκόπτει κάθε περιεχόμενο που υπερβαίνει το κάτω ή το επάνω άκρο του πίνακα. Συγκεκριμένα, αυτό μπορεί να αποκόψει τα αναπτυσσόμενα μενού και άλλα γραφικά στοιχεία τρίτων.
Πάντα ανταποκρινόμενο
Σε κάθε σημείο διακοπής, χρησιμοποιήστε .table-responsiveτο για οριζόντια κύλιση πινάκων.
Χρησιμοποιήστε .table-responsive{-sm|-md|-lg|-xl|-xxl}το όπως απαιτείται για τη δημιουργία αποκριτικών πινάκων μέχρι ένα συγκεκριμένο σημείο διακοπής. Από αυτό το σημείο διακοπής και πάνω, ο πίνακας θα συμπεριφέρεται κανονικά και δεν θα κάνει κύλιση οριζόντια.
Αυτοί οι πίνακες μπορεί να εμφανίζονται σπασμένοι μέχρι να εφαρμοστούν τα στυλ απόκρισής τους σε συγκεκριμένα πλάτη θυρών προβολής.
Οι μεταβλητές παράγοντα ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) χρησιμοποιούνται για τον προσδιορισμό της αντίθεσης σε παραλλαγές πίνακα.
Εκτός από τις ανοιχτόχρωμες και σκούρες παραλλαγές του τραπεζιού, τα χρώματα του θέματος φωτίζονται από τη $table-bg-levelμεταβλητή.