Διαθέσιμα γλυφά

Περιλαμβάνει πάνω από 250 γλυφές σε μορφή γραμματοσειράς από το σετ Glyphicon Halflings. Τα Glyphicons Halflings συνήθως δεν είναι διαθέσιμα δωρεάν, αλλά ο δημιουργός τους τα έχει κάνει δωρεάν για το Bootstrap. Ως ευχαριστώ, σας ζητάμε μόνο να συμπεριλάβετε έναν σύνδεσμο πίσω στο Glyphicons όποτε είναι δυνατόν.

glyphicon glyphicon-αστερίσκος
glyphicon glyphicon-plus
γλυφικόν γλυφικόν-ευρώ
γλυφικόν γλυφικόν-ευρ
γλυφικόν γλυφικόν-μείον
γλυφικόν γλυφικόν-σύννεφο
γλυφικό γλυφικό-φάκελος
glyphicon glyphicon-μολύβι
γλυφικό γλυφικό-γυαλί
glyphicon glyphicon-μουσική
glyphicon glyphicon-αναζήτηση
glyphicon glyphicon-καρδιά
glyphicon glyphicon-star
γλυφικό γλυφικό-αστέρι-άδειο
glyphicon glyphicon-χρήστης
glyphicon glyphicon-ταινία
γλυφικό γλυφικόν-θ-μεγάλο
γλυφικόν γλυφικόν-ου
glyphicon glyphicon-th-list
γλυφικόν γλυφικόν-οκ
glyphicon glyphicon-αφαιρέστε
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-σήμα
γλυφικόν γλυφικόν-οδοντωτή
glyphicon glyphicon-σκουπίδια
glyphicon glyphicon-σπίτι
glyphicon glyphicon-αρχείο
γλυφικόν γλυφικόν-χρόνος
γλυφικόν γλυφικόν-δρόμος
glyphicon glyphicon-λήψη-alt
glyphicon glyphicon-λήψη
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-παιχνίδι-κύκλος
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-σημαία
glyphicon glyphicon-ακουστικά
glyphicon glyphicon-volume-off
glyphicon glyphicon-μείωση όγκου
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
γλυφικό γλυφικό-βιβλίο
glyphicon glyphicon-σελιδοδείκτης
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
γλυφικό γλυφικό-πλάγιο
γλυφικό γλυφικό-κείμενο-ύψος
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-ευθυγραμμίζω-δικαιολογώ
glyphicon glyphicon-list
γλυφικό γλυφικό-εσοχή-αριστερά
glyphicon glyphicon-εσοχή-δεξιά
glyphicon glyphicon-facetime-video
glyphicon glyphicon-εικόνα
glyphicon glyphicon-map-marker
glyphicon glyphicon-προσαρμόζω
γλυφικό γλυφικό-απόχρωση
glyphicon glyphicon-επεξεργασία
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-κίνηση
glyphicon glyphicon-βήμα-πίσω
glyphicon glyphicon-fast-backward
γλυφικό γλυφικό-πίσω
glyphicon glyphicon-παιχνίδι
glyphicon glyphicon-παύση
γλυφικόν γλυφικόν-στοπ
glyphicon glyphicon-εμπρός
glyphicon glyphicon-fast-forward
glyphicon glyphicon-βήμα-προς τα εμπρός
glyphicon glyphicon-eject
γλυφικό γλυφικό-σεβρόν-αριστερά
γλυφικό γλυφικό-σεβρόν-δεξιά
glyphicon glyphicon-plus-sign
glyphicon glyphicon-πλην-σημάδι
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-ερώτηση-ζώδιο
glyphicon glyphicon-πληροφορία
glyphicon glyphicon-στιγμιότυπο οθόνης
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
γλυφικό γλυφικό-βέλος-αριστερά
glyphicon glyphicon-βέλος-δεξιά
glyphicon glyphicon-βέλος-επάνω
glyphicon glyphicon-βέλος-κάτω
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-size-small
γλυφικό γλυφικό-θαυμαστικό
glyphicon glyphicon-δώρο
γλυφικό γλυφικό-φύλλο
γλυφικόν γλυφικόν-πυρ
γλυφικό γλυφικό-μάτι-ανοιχτό
γλυφικό γλυφικό-μάτι-κλείνω
glyphicon glyphicon-προειδοποιητικό σημάδι
glyphicon glyphicon-plane
glyphicon glyphicon-ημερολόγιο
glyphicon glyphicon-τυχαίο
glyphicon glyphicon-σχόλιο
glyphicon glyphicon-magnet
γλυφικό γλυφικόν-σεβρόν-επάνω
γλυφικό γλυφικό-σεβρόν-κάτω
glyphicon glyphicon-retweet
glyphicon glyphicon-καλάθι-αγορά
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-size-horizontal
glyphicon glyphicon-hdd
γλυφικο γλυφικο-bullhorn
γλυφικό γλυφικό-καμπάνα
glyphicon glyphicon-πιστοποιητικό
glyphicon glyphicon-αντίχειρες-επάνω
glyphicon glyphicon-αντίχειρες-κάτω
γλυφικό γλυφικό-χέρι-δεξιά
γλυφικό γλυφικό-χειροαριστερό
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
γλυφικό γλυφικό-κύκλος-βέλος-δεξιά
γλυφικό γλυφικό-κύκλος-βέλος-αριστερά
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-κύκλος-βέλος-κάτω
glyphicon glyphicon-globe
glyphicon glyphicon- γαλλικό κλειδί
glyphicon glyphicon-tasks
glyphicon glyphicon-φίλτρο
glyphicon glyphicon-χαρτοφύλακας
glyphicon glyphicon-πλήρης οθόνη
glyphicon glyphicon-ταμπλό
glyphicon glyphicon-κλιπ
γλυφικό γλυφικό-καρδιά-άδειο
glyphicon glyphicon-link
glyphicon glyphicon-τηλέφωνο
γλυφικό γλυφικό-πίσω
γλυφικόν γλυφικόν-ουδ
glyphicon glyphicon-gbp
glyphicon glyphicon-ταξινόμηση
glyphicon glyphicon-ταξινόμηση-ανά-αλφάβητο
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-ταξινόμηση-κατά σειρά
glyphicon glyphicon-ταξινόμηση-κατά σειρά-αλτ
glyphicon glyphicon-ταξινόμηση-κατά-ιδιότητες
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-μη επιλεγμένο
glyphicon glyphicon-επέκταση
glyphicon glyphicon-κατάρρευση-κάτω
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-αποθηκεύω
γλυφικό γλυφικό-ανοιχτό
glyphicon glyphicon-saved
glyphicon glyphicon-εισαγωγή
glyphicon glyphicon-εξαγωγή
γλύφικο γλυφικό-αποστολή
glyphicon glyphicon-δισκέτα
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-πιστωτική κάρτα
glyphicon glyphicon-μεταφορά
glyphicon glyphicon-μαχαιροπήρουνα
glyphicon glyphicon-header
glyphicon glyphicon-συμπιεσμένο
glyphicon glyphicon-ακουστικό
glyphicon glyphicon-phone-alt
glyphicon glyphicon-πύργος
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-υπότιτλοι
γλυφικο γλυφικο-ηχο-στερεο
γλυφικό γλυφικό-ήχος-ντόλμπι
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-σύννεφο-λήψη
glyphicon glyphicon-cloud-upload
γλυφικό γλυφικό-δέντρο-κωνοφόρο
γλυφικό γλυφικό-δέντρο-φυλλοβόλο
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-αντίγραφο
glyphicon glyphicon-πάστα
glyphicon glyphicon-ειδοποίηση
glyphicon glyphicon-ισοσταθμιστής
γλυφικόν γλυφικόν-βασιλεύς
γλυφικόν γλυφικόν-βασίλισσα
γλυφικό γλυφικό-πιόνι
γλυφικόν γλυφικόν-επίσκοπος
γλυφικόν γλυφικόν-ιππότης
glyphicon glyphicon-baby-formula
γλυφικο γλυφικο-σκηνη
glyphicon glyphicon-μαυροπίνακας
glyphicon glyphicon-κρεβάτι
γλυφικόν γλυφικόν-μήλο
glyphicon glyphicon-ease
glyphicon glyphicon-κλεψύδρα
glyphicon glyphicon-λάμπα
glyphicon glyphicon-διπλότυπο
γλυφικό γλυφικό-κουμπαράς
glyphicon glyphicon-ψαλίδι
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
γλυφικόν γλυφικόν-γιεν
glyphicon glyphicon-jpy
glyphicon glyphicon-ρούβλι
glyphicon glyphicon-τρίβω
glyphicon glyphicon-scale
γλυφικόν γλυφικόν-πάγο-γλειφιτζούρι
glyphicon glyphicon-πάγος-γουρουνάκι-γεύση
glyphicon glyphicon-εκπαίδευση
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-μενού-χάμπουργκερ
glyphicon glyphicon-modal-window
γλυφικόν γλυφικόν-λάδι
γλυφικόν γλυφικόν-κόκκος
glyphicon glyphicon-γυαλιά ηλίου
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
γλυφικό γλυφικό-τρίγωνο-αριστερά
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-κονσόλα
γλυφικό γλυφικό-υπέργραφο
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-αριστερά
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Τρόπος χρήσης

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

Μην αναμιγνύετε με άλλα συστατικά

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

Μόνο για χρήση σε κενά στοιχεία

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

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

Το Bootstrap υποθέτει ότι τα αρχεία γραμματοσειράς εικονιδίων θα βρίσκονται στον ../fonts/κατάλογο, σε σχέση με τα μεταγλωττισμένα αρχεία CSS. Η μετακίνηση ή η μετονομασία αυτών των αρχείων γραμματοσειρών σημαίνει ενημέρωση του CSS με έναν από τους τρεις τρόπους:

Αλλάξτε το @icon-font-pathκαι/ή @icon-font-nameτις μεταβλητές στα αρχεία πηγής Less.
Χρησιμοποιήστε την επιλογή σχετικών διευθύνσεων URL που παρέχεται από τον μεταγλωττιστή Less.
Αλλάξτε τις url()διαδρομές στο μεταγλωττισμένο CSS.

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

Προσβάσιμα εικονίδια

Οι σύγχρονες εκδόσεις βοηθητικών τεχνολογιών θα ανακοινώνουν περιεχόμενο που δημιουργείται από CSS, καθώς και συγκεκριμένους χαρακτήρες Unicode. Για να αποφευχθεί η ακούσια και μπερδεμένη έξοδος στα προγράμματα ανάγνωσης οθόνης (ιδιαίτερα όταν τα εικονίδια χρησιμοποιούνται καθαρά για διακόσμηση), τα αποκρύπτουμε με το aria-hidden="true"χαρακτηριστικό.

Εάν χρησιμοποιείτε ένα εικονίδιο για να μεταφέρετε νόημα (και όχι μόνο ως διακοσμητικό στοιχείο), βεβαιωθείτε ότι αυτό το νόημα μεταφέρεται και σε βοηθητικές τεχνολογίες – για παράδειγμα, συμπεριλάβετε πρόσθετο περιεχόμενο, οπτικά κρυμμένο με την .sr-onlyτάξη.

Εάν δημιουργείτε στοιχεία ελέγχου χωρίς άλλο κείμενο (όπως ένα <button>που περιέχει μόνο ένα εικονίδιο), θα πρέπει πάντα να παρέχετε εναλλακτικό περιεχόμενο για τον προσδιορισμό του σκοπού του στοιχείου ελέγχου, έτσι ώστε να έχει νόημα για τους χρήστες βοηθητικών τεχνολογιών. Σε αυτήν την περίπτωση, μπορείτε να προσθέσετε ένα aria-labelχαρακτηριστικό στο ίδιο το στοιχείο ελέγχου.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Παραδείγματα

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Ένα εικονίδιο που χρησιμοποιείται σε μια ειδοποίηση για να μεταφέρει ότι πρόκειται για μήνυμα σφάλματος, με πρόσθετο .sr-onlyκείμενο για τη μετάδοση αυτής της υπόδειξης στους χρήστες υποστηρικτικών τεχνολογιών.

Εισάγετε μια έγκυρη διεύθυνση email

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Με δυνατότητα εναλλαγής, με βάση τα συμφραζόμενα για εμφάνιση λιστών συνδέσμων. Έγινε διαδραστικό με την αναπτυσσόμενη προσθήκη JavaScript .

Παράδειγμα

Τυλίξτε τον κανόνα ετικέτας του αναπτυσσόμενου μενού και το αναπτυσσόμενο μενού εντός .dropdownή σε άλλο στοιχείο που δηλώνει position: relative;. Στη συνέχεια, προσθέστε το HTML του μενού.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Τα αναπτυσσόμενα μενού μπορούν να αλλάξουν για να επεκταθούν προς τα πάνω (αντί προς τα κάτω) προσθέτοντας .dropupστο γονικό.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Ευθυγραμμία

Από προεπιλογή, ένα αναπτυσσόμενο μενού τοποθετείται αυτόματα 100% από την κορυφή και κατά μήκος της αριστερής πλευράς του γονέα του. Προσθήκη .dropdown-menu-rightστο a .dropdown-menuπρος τα δεξιά, ευθυγραμμίστε το αναπτυσσόμενο μενού.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Κεφαλίδες

Προσθέστε μια κεφαλίδα για να προσθέσετε ετικέτες σε ενότητες ενεργειών σε οποιοδήποτε αναπτυσσόμενο μενού.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Διαιρών

Προσθέστε ένα διαχωριστικό σε ξεχωριστές σειρές συνδέσμων σε ένα αναπτυσσόμενο μενού.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Απενεργοποιημένα στοιχεία μενού

Προσθέστε .disabledστο a <li>στο αναπτυσσόμενο μενού για να απενεργοποιήσετε τη σύνδεση.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Ομαδοποιήστε μια σειρά κουμπιών μαζί σε μια γραμμή με την ομάδα κουμπιών. Προσθέστε μια προαιρετική συμπεριφορά ραδιοφώνου JavaScript και στυλ πλαισίου ελέγχου με την προσθήκη κουμπιών μας .

Οι συμβουλές εργαλείων και τα popover σε ομάδες κουμπιών απαιτούν ειδική ρύθμιση

Όταν χρησιμοποιείτε επεξηγήσεις εργαλείων ή popover σε στοιχεία μέσα σε ένα .btn-group, θα πρέπει να καθορίσετε την επιλογή container: 'body'για την αποφυγή ανεπιθύμητων παρενεργειών (όπως το στοιχείο που μεγαλώνει και/ή χάνει τις στρογγυλεμένες γωνίες του όταν ενεργοποιείται η επεξήγηση εργαλείου ή το popover).

Βεβαιωθείτε ότι είναι σωστό `role`και δώστε μια ετικέτα

Προκειμένου οι υποστηρικτικές τεχνολογίες – όπως οι συσκευές ανάγνωσης οθόνης – να μεταδώσουν ότι μια σειρά κουμπιών είναι ομαδοποιημένη, roleπρέπει να παρέχεται ένα κατάλληλο χαρακτηριστικό. Για ομάδες κουμπιών, αυτό θα ήταν role="group", ενώ οι γραμμές εργαλείων θα πρέπει να έχουν ένα role="toolbar".

Μια εξαίρεση είναι οι ομάδες που περιέχουν μόνο ένα μόνο στοιχείο ελέγχου (για παράδειγμα τις αιτιολογημένες ομάδες κουμπιών με <button>στοιχεία) ή ένα αναπτυσσόμενο μενού.

Επιπλέον, στις ομάδες και τις γραμμές εργαλείων θα πρέπει να δίνεται σαφής ετικέτα, καθώς οι περισσότερες υποστηρικτικές τεχνολογίες διαφορετικά δεν θα τις ανακοινώσουν, παρά την παρουσία του σωστού roleχαρακτηριστικού. Στα παραδείγματα που παρέχονται εδώ, χρησιμοποιούμε aria-label, αλλά εναλλακτικές όπως aria-labelledbyμπορούν επίσης να χρησιμοποιηθούν.

Βασικό παράδειγμα

Τυλίξτε μια σειρά από κουμπιά .btnμε .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Συνδυάστε σετ <div class="btn-group">σε ένα <div class="btn-toolbar">για πιο σύνθετα συστατικά.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Κόλλα

Αντί να εφαρμόζετε κατηγορίες μεγέθους κουμπιών σε κάθε κουμπί σε μια ομάδα, απλώς προσθέστε .btn-group-*σε κάθε .btn-group, συμπεριλαμβανομένης της ένθεσης πολλών ομάδων.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Φωλιάζοντας

Τοποθετήστε ένα .btn-groupμέσα σε ένα άλλο .btn-groupόταν θέλετε τα αναπτυσσόμενα μενού να αναμειγνύονται με μια σειρά από κουμπιά.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Κάθετη παραλλαγή

Κάντε ένα σύνολο κουμπιών να εμφανίζεται κατακόρυφα στοιβαγμένο και όχι οριζόντια. Τα αναπτυσσόμενα κουμπιά διαχωρισμού δεν υποστηρίζονται εδώ.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Δικαιολογημένες ομάδες κουμπιών

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

Χειρισμός συνόρων

Λόγω του συγκεκριμένου HTML και CSS που χρησιμοποιείται για την αιτιολόγηση των κουμπιών (δηλαδή display: table-cell), τα όρια μεταξύ τους διπλασιάζονται. Σε κανονικές ομάδες κουμπιών, margin-left: -1pxχρησιμοποιείται για τη στοίβαξη των περιγραμμάτων αντί για την αφαίρεσή τους. Ωστόσο, marginδεν λειτουργεί με display: table-cell. Ως αποτέλεσμα, ανάλογα με τις προσαρμογές σας στο Bootstrap, μπορεί να θέλετε να αφαιρέσετε ή να ξαναχρωματίσετε τα περιγράμματα.

IE8 και σύνορα

Ο Internet Explorer 8 δεν αποδίδει περιγράμματα σε κουμπιά σε μια αιτιολογημένη ομάδα κουμπιών, είτε είναι ενεργοποιημένα <a>είτε <button>στοιχεία. Για να το ξεπεράσετε, τυλίξτε κάθε κουμπί σε ένα άλλο .btn-group.

Δείτε το #12476 για περισσότερες πληροφορίες.

Με `<a>`στοιχεία

Απλώς τυλίξτε μια σειρά από .btns σε .btn-group.btn-group-justified.

Αριστερά Μέσης σωστά

Αριστερά Μέσης

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Σύνδεσμοι που λειτουργούν ως κουμπιά

Εάν τα <a>στοιχεία χρησιμοποιούνται για να λειτουργούν ως κουμπιά – ενεργοποιώντας τη λειτουργία στη σελίδα, αντί για πλοήγηση σε άλλο έγγραφο ή ενότητα στην τρέχουσα σελίδα – θα πρέπει επίσης να τους δοθεί το κατάλληλο role="button".

Με `<button>`στοιχεία

Για να χρησιμοποιήσετε αιτιολογημένες ομάδες κουμπιών με <button>στοιχεία, πρέπει να τυλίξετε κάθε κουμπί σε μια ομάδα κουμπιών . Τα περισσότερα προγράμματα περιήγησης δεν εφαρμόζουν σωστά το CSS μας για αιτιολόγηση σε <button>στοιχεία, αλλά επειδή υποστηρίζουμε αναπτυσσόμενα κουμπιά, μπορούμε να το αντιμετωπίσουμε.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Χρησιμοποιήστε οποιοδήποτε κουμπί για να ενεργοποιήσετε ένα αναπτυσσόμενο μενού τοποθετώντας το σε ένα .btn-groupκαι παρέχοντας τη σωστή σήμανση μενού.

Εξάρτηση από πρόσθετο

Τα αναπτυσσόμενα κουμπιά απαιτούν να συμπεριληφθεί η αναπτυσσόμενη προσθήκη στην έκδοση του Bootstrap.

Αναπτυσσόμενα μενού με ένα κουμπί

Μετατρέψτε ένα κουμπί σε αναπτυσσόμενο εναλλαγή με ορισμένες βασικές αλλαγές σήμανσης.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Αναπτυσσόμενα μενού διαίρεσης κουμπιών

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Κόλλα

Τα αναπτυσσόμενα κουμπιά λειτουργούν με κουμπιά όλων των μεγεθών.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Παραλλαγή πτώσης

Ενεργοποιήστε τα αναπτυσσόμενα μενού πάνω από τα στοιχεία προσθέτοντας .dropupστο γονικό στοιχείο.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Επεκτείνετε τα στοιχεία ελέγχου φόρμας προσθέτοντας κείμενο ή κουμπιά πριν, μετά ή και στις δύο πλευρές οποιουδήποτε βασισμένου σε κείμενο <input>. Χρησιμοποιήστε .input-groupτο με ένα .input-group-addonή .input-group-btnγια προσάρτηση ή προσθήκη στοιχείων σε ένα .form-control.

Κείμενο `<input>`μόνο

Αποφύγετε τη χρήση <select>στοιχείων εδώ, καθώς δεν μπορούν να διαμορφωθούν πλήρως σε προγράμματα περιήγησης WebKit.

Αποφύγετε τη χρήση <textarea>στοιχείων εδώ, καθώς το rowsχαρακτηριστικό τους δεν θα γίνει σεβαστό σε ορισμένες περιπτώσεις.

Οι συμβουλές εργαλείων και τα popover σε ομάδες εισόδου απαιτούν ειδική ρύθμιση

Όταν χρησιμοποιείτε επεξηγήσεις εργαλείων ή popover σε στοιχεία μέσα σε ένα .input-group, θα πρέπει να καθορίσετε την επιλογή container: 'body'για την αποφυγή ανεπιθύμητων παρενεργειών (όπως το στοιχείο που μεγαλώνει και/ή χάνει τις στρογγυλεμένες γωνίες του όταν ενεργοποιείται η επεξήγηση εργαλείου ή το popover).

Μην αναμιγνύετε με άλλα συστατικά

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

Πάντα να προσθέτετε ετικέτες

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

Η ακριβής τεχνική που θα χρησιμοποιηθεί (ορατά <label>στοιχεία, <label>στοιχεία που κρύβονται χρησιμοποιώντας την .sr-onlyκλάση ή χρήση του χαρακτηριστικού , , aria-labelή aria-labelledby) και ποιες πρόσθετες πληροφορίες θα πρέπει να μεταδοθούν θα διαφέρουν ανάλογα με τον ακριβή τύπο του γραφικού στοιχείου διεπαφής που εφαρμόζετε. Τα παραδείγματα σε αυτήν την ενότητα παρέχουν μερικές προτεινόμενες προσεγγίσεις για συγκεκριμένες περιπτώσεις.aria-describedbytitleplaceholder

Βασικό παράδειγμα

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

Δεν υποστηρίζουμε πολλαπλά πρόσθετα ( .input-group-addonή .input-group-btn) σε μία μόνο πλευρά.

Δεν υποστηρίζουμε πολλαπλά στοιχεία ελέγχου φορμών σε μία ομάδα εισόδου.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Κόλλα

Προσθέστε τις σχετικές κλάσεις μεγέθους φόρμας στην .input-groupίδια και τα περιεχόμενα εντός θα αλλάξουν αυτόματα το μέγεθος—δεν χρειάζεται να επαναλαμβάνονται οι κλάσεις μεγέθους ελέγχου φόρμας σε κάθε στοιχείο.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Πλαίσια ελέγχου και πρόσθετα ραδιοφώνου

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Πρόσθετα κουμπιών

Τα κουμπιά στις ομάδες εισόδου είναι λίγο διαφορετικά και απαιτούν ένα επιπλέον επίπεδο ένθεσης. Αντί για .input-group-addon, θα χρειαστεί να χρησιμοποιήσετε .input-group-btnγια να τυλίξετε τα κουμπιά. Αυτό απαιτείται λόγω των προεπιλεγμένων στυλ προγράμματος περιήγησης που δεν μπορούν να παρακαμφθούν.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Κουμπιά με αναπτυσσόμενα μενού

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Τμηματοποιημένα κουμπιά

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Πολλαπλά κουμπιά

Ενώ μπορείτε να έχετε μόνο ένα πρόσθετο ανά πλευρά, μπορείτε να έχετε πολλά κουμπιά μέσα σε ένα μόνο .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

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

Η χρήση πλοήγησης για πίνακες καρτελών απαιτεί πρόσθετο καρτελών JavaScript

Για καρτέλες με περιοχές με καρτέλες, πρέπει να χρησιμοποιήσετε το πρόσθετο JavaScript καρτελών . Η σήμανση θα απαιτεί επίσης πρόσθετα roleχαρακτηριστικά και χαρακτηριστικά ARIA – δείτε το παράδειγμα σήμανσης της προσθήκης για περισσότερες λεπτομέρειες.

Κάντε προσβάσιμα τα προγράμματα πλοήγησης που χρησιμοποιούνται ως πλοήγηση

Εάν χρησιμοποιείτε πλοήγηση για να παρέχετε μια γραμμή πλοήγησης, φροντίστε να προσθέσετε ένα role="navigation"στο πιο λογικό γονικό κοντέινερ του <ul>ή να τυλίξετε ένα <nav>στοιχείο γύρω από ολόκληρη τη γραμμή πλοήγησης. Μην προσθέτετε τον ρόλο στον <ul>εαυτό του, καθώς αυτό θα εμπόδιζε να ανακοινωθεί ως πραγματική λίστα από τις υποστηρικτικές τεχνολογίες.

Καρτέλες

Σημειώστε ότι η .nav-tabsκλάση απαιτεί τη .navβασική κλάση.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Χάπια

Πάρτε το ίδιο HTML, αλλά χρησιμοποιήστε .nav-pillsαντί αυτού:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Τα χάπια μπορούν επίσης να στοιβάζονται κάθετα. Απλώς προσθέστε .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Δικαιολογημένα

Κάντε εύκολα τις καρτέλες ή τα χάπια ίσα με το πλάτος του μητρικού τους σε οθόνες μεγαλύτερες από 768 εικονοστοιχεία με .nav-justified. Σε μικρότερες οθόνες, οι σύνδεσμοι πλοήγησης στοιβάζονται.

Οι αιτιολογημένοι σύνδεσμοι πλοήγησης στη γραμμή πλοήγησης δεν υποστηρίζονται αυτήν τη στιγμή.

Safari και ανταποκρινόμενα δικαιολογημένα πλοία

Από την έκδοση 9.1.2, το Safari εμφανίζει ένα σφάλμα στο οποίο η οριζόντια αλλαγή του μεγέθους του προγράμματος περιήγησής σας προκαλεί σφάλματα απόδοσης στην αιτιολογημένη πλοήγηση που διαγράφονται κατά την ανανέωση. Αυτό το σφάλμα εμφανίζεται επίσης στο παράδειγμα αιτιολογημένης πλοήγησης .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Απενεργοποιημένοι σύνδεσμοι

Για οποιοδήποτε στοιχείο πλοήγησης (καρτέλες ή χάπια), προσθέστε .disabledγια γκρι συνδέσμους και χωρίς εφέ αιώρησης .

Η λειτουργικότητα του συνδέσμου δεν επηρεάστηκε

Αυτή η κλάση θα αλλάξει μόνο την <a>εμφάνιση του ', όχι τη λειτουργικότητά του. Χρησιμοποιήστε προσαρμοσμένη JavaScript για να απενεργοποιήσετε τους συνδέσμους εδώ.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Χρήση αναπτυσσόμενων

Προσθέστε αναπτυσσόμενα μενού με λίγο επιπλέον HTML και την αναπτυσσόμενη προσθήκη JavaScript .

Καρτέλες με αναπτυσσόμενα μενού

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Χάπια με σταγόνες

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

Οι αιτιολογημένοι σύνδεσμοι πλοήγησης στη γραμμή πλοήγησης δεν υποστηρίζονται αυτήν τη στιγμή.

Ξεχειλισμένο περιεχόμενο

Εφόσον το Bootstrap δεν γνωρίζει πόσο χώρο χρειάζεται το περιεχόμενο στη γραμμή πλοήγησης, ενδέχεται να αντιμετωπίσετε προβλήματα με την αναδίπλωση περιεχομένου σε δεύτερη σειρά. Για να επιλύσετε αυτό, μπορείτε:

Μειώστε την ποσότητα ή το πλάτος των στοιχείων της γραμμής πλοήγησης.
Απόκρυψη συγκεκριμένων στοιχείων γραμμής πλοήγησης σε συγκεκριμένα μεγέθη οθόνης χρησιμοποιώντας κλάσεις βοηθητικών προγραμμάτων που αποκρίνονται .
Αλλάξτε το σημείο στο οποίο η γραμμή πλοήγησής σας αλλάζει μεταξύ σύμπτυξης και οριζόντιας λειτουργίας. Προσαρμόστε τη @grid-float-breakpointμεταβλητή ή προσθέστε το δικό σας ερώτημα πολυμέσων.

Απαιτεί πρόσθετο JavaScript

Εάν η JavaScript είναι απενεργοποιημένη και η θύρα προβολής είναι αρκετά στενή ώστε η γραμμή πλοήγησης να συμπτύσσεται, θα είναι αδύνατη η επέκταση της γραμμής πλοήγησης και η προβολή του περιεχομένου εντός του .navbar-collapse.

Η αποκριτική γραμμή πλοήγησης απαιτεί την προσθήκη της σύμπτυξης στην έκδοση του Bootstrap.

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

Η γραμμή πλοήγησης συμπτύσσεται στην κατακόρυφη προβολή για κινητά όταν η θύρα προβολής είναι στενότερη από το @grid-float-breakpoint, και επεκτείνεται στην οριζόντια προβολή μη φορητή όταν η θύρα προβολής έχει τουλάχιστον @grid-float-breakpointπλάτος. Προσαρμόστε αυτήν τη μεταβλητή στην πηγή Less για να ελέγχετε πότε η γραμμή πλοήγησης συμπτύσσεται/επεκτείνεται. Η προεπιλεγμένη τιμή είναι 768px(η μικρότερη οθόνη "μικρή" ή "tablet").

Κάντε τις γραμμές πλοήγησης προσβάσιμες

Φροντίστε να χρησιμοποιήσετε ένα <nav>στοιχείο ή, εάν χρησιμοποιείτε ένα πιο γενικό στοιχείο, όπως το <div>, προσθέστε ένα role="navigation"σε κάθε γραμμή πλοήγησης για να το προσδιορίσετε ρητά ως περιοχή ορόσημο για χρήστες υποστηρικτικών τεχνολογιών.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Αντικαταστήστε την επωνυμία της γραμμής πλοήγησης με τη δική σας εικόνα, αντικαθιστώντας το κείμενο με ένα <img>. Δεδομένου ότι το .navbar-brandέχει τη δική του επένδυση και ύψος, μπορεί να χρειαστεί να παρακάμψετε κάποιο CSS ανάλογα με την εικόνα σας.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Τοποθετήστε το περιεχόμενο της φόρμας μέσα .navbar-formγια σωστή κάθετη στοίχιση και συμπτυγμένη συμπεριφορά σε στενές θυρίδες προβολής. Χρησιμοποιήστε τις επιλογές στοίχισης για να αποφασίσετε πού βρίσκεται εντός του περιεχομένου της γραμμής πλοήγησης.

Ως heads up, .navbar-formμοιράζεται μεγάλο μέρος του κώδικά του με .form-inlineμέσω mixin. Ορισμένα στοιχεία ελέγχου φορμών, όπως οι ομάδες εισόδου, ενδέχεται να απαιτούν σταθερά πλάτη για να εμφανίζονται σωστά σε μια γραμμή πλοήγησης.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Πάντα να προσθέτετε ετικέτες

Οι αναγνώστες οθόνης θα έχουν πρόβλημα με τις φόρμες σας, εάν δεν συμπεριλάβετε μια ετικέτα για κάθε εισαγωγή. Για αυτές τις ενσωματωμένες φόρμες, μπορείτε να αποκρύψετε τις ετικέτες χρησιμοποιώντας την .sr-onlyκλάση. Υπάρχουν περαιτέρω εναλλακτικές μέθοδοι παροχής ετικέτας για υποστηρικτικές τεχνολογίες, όπως το χαρακτηριστικό aria-label, aria-labelledbyή title. Εάν δεν υπάρχει κανένα από αυτά, οι αναγνώστες οθόνης ενδέχεται να καταφύγουν στη χρήση του placeholderχαρακτηριστικού, εάν υπάρχει, αλλά σημειώστε ότι η χρήση του placeholderως αντικατάσταση για άλλες μεθόδους επισήμανσης δεν συνιστάται.

Προσθέστε την .navbar-btnκλάση σε <button>στοιχεία που δεν βρίσκονται στο a <form>για να τα κεντράρετε κάθετα στη γραμμή πλοήγησης.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Τυλίξτε συμβολοσειρές κειμένου σε ένα στοιχείο με το .navbar-text, συνήθως σε μια <p>ετικέτα για σωστή εισαγωγή και χρώμα.

<p class="navbar-text">Signed in as Mark Otto</p>

Για άτομα που χρησιμοποιούν τυπικούς συνδέσμους που δεν περιλαμβάνονται στο κανονικό στοιχείο πλοήγησης της γραμμής πλοήγησης, χρησιμοποιήστε την .navbar-linkκλάση για να προσθέσετε τα κατάλληλα χρώματα για τις προεπιλεγμένες και αντίστροφες επιλογές της γραμμής πλοήγησης.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Ευθυγραμμίστε συνδέσμους πλοήγησης, φόρμες, κουμπιά ή κείμενο, χρησιμοποιώντας τις κλάσεις .navbar-leftή .navbar-rightβοηθητικές τάξεις. Και οι δύο κλάσεις θα προσθέσουν ένα float CSS προς την καθορισμένη κατεύθυνση. Για παράδειγμα, για να ευθυγραμμίσετε συνδέσμους πλοήγησης, τοποθετήστε τους σε ξεχωριστό <ul>τμήμα με την αντίστοιχη κλάση βοηθητικού προγράμματος που εφαρμόζεται.

Αυτές οι κλάσεις είναι μικτές εκδόσεις του .pull-leftκαι .pull-right, αλλά καλύπτονται από ερωτήματα πολυμέσων για ευκολότερο χειρισμό των στοιχείων της γραμμής πλοήγησης σε όλα τα μεγέθη συσκευών.

Δεξιά στοίχιση πολλαπλών στοιχείων

Οι γραμμές πλοήγησης έχουν επί του παρόντος έναν περιορισμό με πολλές .navbar-rightκλάσεις. Για να διαθέσουμε σωστά το περιεχόμενο, χρησιμοποιούμε αρνητικό περιθώριο στο τελευταίο .navbar-rightστοιχείο. Όταν υπάρχουν πολλά στοιχεία που χρησιμοποιούν αυτήν την κλάση, αυτά τα περιθώρια δεν λειτουργούν όπως προβλέπεται.

Θα το ξαναδούμε όταν μπορέσουμε να ξαναγράψουμε αυτό το στοιχείο στο v4.

Προσθέστε .navbar-fixed-topκαι συμπεριλάβετε περιεχόμενο στη γραμμή πλοήγησης στο κέντρο .containerκαι .container-fluidστο pad.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Απαιτείται επένδυση σώματος

Η σταθερή γραμμή πλοήγησης θα επικαλύψει το άλλο περιεχόμενό σας, εκτός εάν προσθέσετε paddingστην κορυφή του <body>. Δοκιμάστε τις δικές σας τιμές ή χρησιμοποιήστε το απόσπασμά μας παρακάτω. Συμβουλή: Από προεπιλογή, η γραμμή πλοήγησης έχει ύψος 50 px.

body { padding-top: 70px; }

Φροντίστε να το συμπεριλάβετε μετά το βασικό Bootstrap CSS.

Προσθέστε .navbar-fixed-bottomκαι συμπεριλάβετε περιεχόμενο στη γραμμή πλοήγησης στο κέντρο .containerκαι .container-fluidστο pad.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Απαιτείται επένδυση σώματος

Η σταθερή γραμμή πλοήγησης θα επικαλύψει το άλλο περιεχόμενό σας, εκτός εάν προσθέσετε paddingστο κάτω μέρος του <body>. Δοκιμάστε τις δικές σας τιμές ή χρησιμοποιήστε το απόσπασμά μας παρακάτω. Συμβουλή: Από προεπιλογή, η γραμμή πλοήγησης έχει ύψος 50 px.

body { padding-bottom: 70px; }

Φροντίστε να το συμπεριλάβετε μετά το βασικό Bootstrap CSS.

Δημιουργήστε μια γραμμή πλοήγησης πλήρους πλάτους που απομακρύνεται με κύλιση με τη σελίδα προσθέτοντας .navbar-static-topκαι συμπεριλάβετε περιεχόμενο στη γραμμή πλοήγησης στο κέντρο .containerή .container-fluidστο pad.

Σε αντίθεση με τις .navbar-fixed-*κλάσεις, δεν χρειάζεται να αλλάξετε καμία επένδυση στο body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Τροποποιήστε την εμφάνιση της γραμμής πλοήγησης προσθέτοντας .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Τριμμένη φρυγανιά

Υποδείξτε τη θέση της τρέχουσας σελίδας σε μια ιεραρχία πλοήγησης.

Τα διαχωριστικά προστίθενται αυτόματα στο CSS μέσω :beforeκαι content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Σελιδοποίηση

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

Προεπιλεγμένη σελιδοποίηση

Απλή σελιδοποίηση εμπνευσμένη από το Rdio, ιδανική για εφαρμογές και αποτελέσματα αναζήτησης. Το μεγάλο μπλοκ είναι δύσκολο να το χάσετε, εύκολα κλιμακώνεται και παρέχει μεγάλες περιοχές κλικ.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Επισήμανση του στοιχείου σελιδοποίησης

Το στοιχείο σελιδοποίησης πρέπει να είναι τυλιγμένο σε ένα <nav>στοιχείο ώστε να αναγνωρίζεται ως τμήμα πλοήγησης για προγράμματα ανάγνωσης οθόνης και άλλες βοηθητικές τεχνολογίες. Επιπλέον, καθώς μια σελίδα είναι πιθανό να έχει ήδη περισσότερες από μία τέτοιες ενότητες πλοήγησης (όπως η κύρια πλοήγηση στην κεφαλίδα ή μια πλοήγηση πλαϊνής γραμμής), είναι σκόπιμο να παρέχεται μια περιγραφική περιγραφή που aria-labelνα <nav>αντικατοπτρίζει τον σκοπό της. Για παράδειγμα, εάν το στοιχείο σελιδοποίησης χρησιμοποιείται για πλοήγηση μεταξύ ενός συνόλου αποτελεσμάτων αναζήτησης, μια κατάλληλη ετικέτα θα μπορούσε να είναι aria-label="Search results pages".

Αναπηρία και ενεργές καταστάσεις

Οι σύνδεσμοι είναι προσαρμόσιμοι για διαφορετικές περιστάσεις. Χρησιμοποιήστε .disabledτο για συνδέσμους που δεν μπορούν να κάνουν κλικ και .activeγια να υποδείξετε την τρέχουσα σελίδα.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Συνιστούμε να ανταλλάξετε ενεργές ή απενεργοποιημένες αγκυρώσεις για <span>, ή να παραλείψετε την άγκυρα στην περίπτωση των προηγούμενων/επόμενων βελών, για να καταργήσετε τη λειτουργικότητα κλικ διατηρώντας τα επιδιωκόμενα στυλ.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Κόλλα

Θέλετε μεγαλύτερη ή μικρότερη σελιδοποίηση; Προσθέστε .pagination-lgή .pagination-smγια επιπλέον μεγέθη.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager

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

Προεπιλεγμένο παράδειγμα

Από προεπιλογή, οι σύνδεσμοι στο κέντρο τηλεειδοποίησης.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Ευθυγραμμισμένοι σύνδεσμοι

Εναλλακτικά, μπορείτε να ευθυγραμμίσετε κάθε σύνδεσμο στις πλευρές:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Προαιρετική κατάσταση απενεργοποίησης

Οι σύνδεσμοι σελιδοποίησης χρησιμοποιούν επίσης τη γενική .disabledκατηγορία χρησιμότητας από τη σελιδοποίηση.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Παράδειγμα

Παράδειγμα επικεφαλίδας Νέο

<h3>Example heading <span class="label label-default">New</span></h3>

Διαθέσιμες παραλλαγές

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

Προεπιλογή Κίνδυνος Προειδοποίησης Πρωταρχικών Πληροφοριών Επιτυχίας

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Έχετε τόνους ετικετών;

Προβλήματα απόδοσης μπορεί να προκύψουν όταν έχετε δεκάδες ενσωματωμένες ετικέτες σε ένα στενό κοντέινερ, καθεμία από τις οποίες περιέχει το δικό της inline-blockστοιχείο (όπως ένα εικονίδιο). Ο τρόπος γύρω από αυτό είναι ρύθμιση display: inline-block;. Για το πλαίσιο και ένα παράδειγμα, δείτε #13219 .

Επισημάνετε εύκολα νέα ή μη αναγνωσμένα στοιχεία προσθέτοντας ένα <span class="badge">σε συνδέσμους, πλοήγηση Bootstrap και άλλα.

Inbox42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Αυτοκαταρρέει

Όταν δεν υπάρχουν νέα ή μη αναγνωσμένα στοιχεία, τα σήματα απλώς θα συμπτύσσονται (μέσω του :emptyεπιλογέα του CSS), υπό την προϋπόθεση ότι δεν υπάρχει περιεχόμενο μέσα.

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Τα σήματα δεν θα συμπτύσσονται από μόνα τους στον Internet Explorer 8 επειδή δεν υποστηρίζεται ο :emptyεπιλογέας.

Προσαρμόζεται σε ενεργές καταστάσεις πλοήγησης

Περιλαμβάνονται ενσωματωμένα στυλ για την τοποθέτηση σημάτων σε ενεργές καταστάσεις στις πλοηγήσεις χαπιών.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

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

Γειά σου Κόσμε!

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

Μάθε περισσότερα

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Για να φτιάξετε το jumbotron σε πλήρες πλάτος και χωρίς στρογγυλεμένες γωνίες, τοποθετήστε το έξω από όλα τα .containers και αντ' αυτού προσθέστε ένα .containerεσωτερικό.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Ένα απλό κέλυφος για τον h1κατάλληλο χώρο και τμηματοποίηση ενοτήτων περιεχομένου σε μια σελίδα. Μπορεί να χρησιμοποιήσει το h1προεπιλεγμένο smallστοιχείο του 's, καθώς και τα περισσότερα άλλα στοιχεία (με πρόσθετα στυλ).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

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

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

Προεπιλεγμένο παράδειγμα

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Προσαρμοσμένο περιεχόμενο

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

Ετικέτα μικρογραφίας

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Κουμπί Κουμπί

Ετικέτα μικρογραφίας

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Κουμπί Κουμπί

Ετικέτα μικρογραφίας

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Κουμπί Κουμπί

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

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

Παραδείγματα

Αναδιπλώστε οποιοδήποτε κείμενο και ένα προαιρετικό κουμπί απόρριψης .alertκαι σε μία από τις τέσσερις κατηγορίες συμφραζομένων (π.χ. .alert-success) για βασικά μηνύματα ειδοποίησης.

Καμία προεπιλεγμένη τάξη

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

Μπράβο! Διαβάσατε με επιτυχία αυτό το σημαντικό μήνυμα ειδοποίησης.

Ψηλά το κεφάλι! Αυτή η ειδοποίηση χρειάζεται την προσοχή σας, αλλά δεν είναι πολύ σημαντική.

Προειδοποίηση! Ελέγξτε καλύτερα τον εαυτό σας, δεν φαίνεστε πολύ καλά.

Ω snap! Αλλάξτε μερικά πράγματα και δοκιμάστε να υποβάλετε ξανά.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Ειδοποιήσεις που μπορούν να παραβλεφθούν

Δώστε βάση σε οποιαδήποτε ειδοποίηση προσθέτοντας ένα προαιρετικό .alert-dismissibleκαι κουμπί κλεισίματος.

Απαιτείται πρόσθετο ειδοποίησης JavaScript

Για πλήρως λειτουργικές, απορριπτόμενες ειδοποιήσεις, πρέπει να χρησιμοποιήσετε την προσθήκη JavaScript ειδοποιήσεων .

Προειδοποίηση! Ελέγξτε καλύτερα τον εαυτό σας, δεν φαίνεστε πολύ καλά.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Διασφαλίστε τη σωστή συμπεριφορά σε όλες τις συσκευές

Βεβαιωθείτε ότι χρησιμοποιείτε το <button>στοιχείο με το data-dismiss="alert"χαρακτηριστικό data.

Σύνδεσμοι σε ειδοποιήσεις

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

Μπράβο! Διαβάσατε με επιτυχία αυτό το σημαντικό μήνυμα ειδοποίησης .

Ψηλά το κεφάλι! Αυτή η ειδοποίηση χρειάζεται την προσοχή σας , αλλά δεν είναι πολύ σημαντική.

Προειδοποίηση! Ελέγξτε καλύτερα τον εαυτό σας, δεν φαίνεστε πολύ καλά .

Ω snap! Αλλάξτε μερικά πράγματα και δοκιμάστε να υποβάλετε ξανά.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

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

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Οι γραμμές προόδου χρησιμοποιούν μεταβάσεις και κινούμενα σχέδια CSS3 για να επιτύχουν ορισμένα από τα εφέ τους. Αυτές οι δυνατότητες δεν υποστηρίζονται στον Internet Explorer 9 και σε παλαιότερες ή παλαιότερες εκδόσεις του Firefox. Το Opera 12 δεν υποστηρίζει κινούμενα σχέδια.

Συμβατότητα Πολιτικής Ασφάλειας Περιεχομένου (CSP).

Εάν ο ιστότοπός σας έχει Πολιτική Ασφάλειας Περιεχομένου (CSP) που δεν επιτρέπει την style-src 'unsafe-inline', τότε δεν θα μπορείτε να χρησιμοποιήσετε ενσωματωμένα styleχαρακτηριστικά για να ορίσετε πλάτη γραμμών προόδου όπως φαίνεται στα παρακάτω παραδείγματα. Οι εναλλακτικές μέθοδοι για τον ορισμό των πλατών που είναι συμβατά με αυστηρά CSP περιλαμβάνουν τη χρήση λίγης προσαρμοσμένης JavaScript (που ορίζει element.style.width) ή τη χρήση προσαρμοσμένων κλάσεων CSS.

Βασικό παράδειγμα

Προεπιλεγμένη γραμμή προόδου.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Με ετικέτα

Αφαιρέστε την κλάση <span>με .sr-onlyαπό τη γραμμή προόδου για να εμφανιστεί ένα ορατό ποσοστό.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Για να διασφαλίσετε ότι το κείμενο της ετικέτας παραμένει ευανάγνωστο ακόμη και για χαμηλά ποσοστά, σκεφτείτε να προσθέσετε ένα min-widthστη γραμμή προόδου.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Εναλλακτικές λύσεις με βάση τα συμφραζόμενα

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Ριγέ

Χρησιμοποιεί μια κλίση για να δημιουργήσει ένα ριγέ εφέ. Δεν διατίθεται σε IE9 και παρακάτω.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Κινούμενα σχέδια

Προσθέστε .activeστο για .progress-bar-stripedνα κάνετε κίνηση των λωρίδων από δεξιά προς τα αριστερά. Δεν διατίθεται σε IE9 και παρακάτω.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Στοιβαγμένα

Τοποθετήστε πολλές ράβδους στο ίδιο .progressγια να τις στοιβάξετε.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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

Προεπιλεγμένα μέσα

Το προεπιλεγμένο μέσο εμφανίζει ένα αντικείμενο πολυμέσων (εικόνες, βίντεο, ήχος) στα αριστερά ή στα δεξιά ενός μπλοκ περιεχομένου.

Επικεφαλίδα μέσων ενημέρωσης

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.

Επικεφαλίδα μέσων ενημέρωσης

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.

Ένθετη επικεφαλίδα μέσων

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.

Επικεφαλίδα μέσων ενημέρωσης

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Επικεφαλίδα μέσων ενημέρωσης

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Οι κλάσεις .pull-leftκαι .pull-rightεπίσης υπάρχουν και χρησιμοποιούνταν προηγουμένως ως μέρος του στοιχείου πολυμέσων, αλλά έχουν καταργηθεί για αυτήν τη χρήση από την έκδοση 3.3.0. Είναι περίπου ισοδύναμα με .media-leftκαι .media-right, εκτός από το ότι .media-rightπρέπει να τοποθετηθεί μετά το .media-bodyστο html.

Ευθυγράμμιση μέσων

Οι εικόνες ή άλλα μέσα μπορούν να ευθυγραμμιστούν επάνω, στη μέση ή κάτω. Η προεπιλογή είναι ευθυγραμμισμένη στο επάνω μέρος.

Επάνω ευθυγραμμισμένα μέσα

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

Μεσαία ευθυγραμμισμένα μέσα

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

Ευθυγραμμισμένα μέσα από κάτω

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Λίστα πολυμέσων

Με λίγη επιπλέον σήμανση, μπορείτε να χρησιμοποιήσετε μέσα στη λίστα πολυμέσων (χρήσιμο για νήματα σχολίων ή λίστες άρθρων).

Επικεφαλίδα μέσων ενημέρωσης

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ένθετη επικεφαλίδα μέσων
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ένθετη επικεφαλίδα μέσων
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ένθετη επικεφαλίδα μέσων
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

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

Βασικό παράδειγμα

Η πιο βασική ομάδα λίστας είναι απλώς μια μη ταξινομημένη λίστα με στοιχεία λίστας και τις κατάλληλες κλάσεις. Βασιστείτε πάνω σε αυτό με τις επιλογές που ακολουθούν ή το δικό σας CSS όπως απαιτείται.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Προθάλαμος στο έρωτα

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Σήματα

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

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Συνδεδεμένα στοιχεία

Συνδέστε στοιχεία ομάδας λίστας χρησιμοποιώντας ετικέτες αγκύρωσης αντί για στοιχεία λίστας (αυτό σημαίνει επίσης γονικό <div>αντί για <ul>). Δεν χρειάζεται για μεμονωμένους γονείς γύρω από κάθε στοιχείο.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Προθάλαμος στο έρωτα

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Στοιχεία κουμπιών

Τα στοιχεία της ομάδας λίστας μπορεί να είναι κουμπιά αντί για στοιχεία λίστας (αυτό σημαίνει επίσης γονέας <div>αντί για <ul>). Δεν χρειάζεται για μεμονωμένους γονείς γύρω από κάθε στοιχείο. Μην χρησιμοποιείτε τις τυπικές .btnτάξεις εδώ.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Στοιχεία με ειδικές ανάγκες

Προσθέστε .disabledτο στο a .list-group-itemγια να γίνει γκρι για να φαίνεται απενεργοποιημένο.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Προθάλαμος στο έρωτα

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Τάξεις με βάση τα συμφραζόμενα

Χρησιμοποιήστε κλάσεις με βάση τα συμφραζόμενα για να διαμορφώσετε στοιχεία λίστας, προεπιλεγμένα ή συνδεδεμένα. Περιλαμβάνει επίσης το .activeκράτος.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Προθάλαμος στο έρωτα

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Προθάλαμος στο έρωτα

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Προσαρμοσμένο περιεχόμενο

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

Επικεφαλίδα στοιχείου ομάδας λίστας

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Επικεφαλίδα στοιχείου ομάδας λίστας

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Επικεφαλίδα στοιχείου ομάδας λίστας

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Αν και δεν είναι πάντα απαραίτητο, μερικές φορές χρειάζεται να βάλετε το DOM σας σε ένα κουτί. Για αυτές τις περιπτώσεις, δοκιμάστε το στοιχείο του πίνακα.

Βασικό παράδειγμα

Από προεπιλογή, το μόνο .panelπου κάνει είναι να εφαρμόσει κάποιο βασικό περίγραμμα και padding για να περιέχει κάποιο περιεχόμενο.

Παράδειγμα βασικού πίνακα

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Πίνακας με επικεφαλίδα

Προσθέστε εύκολα ένα κοντέινερ επικεφαλίδας στον πίνακα σας με .panel-heading. Μπορείτε επίσης να συμπεριλάβετε οποιαδήποτε <h1>- <h6>με μια .panel-titleτάξη για να προσθέσετε μια προκαθορισμένη επικεφαλίδα. Ωστόσο, τα μεγέθη γραμματοσειράς <h1>- <h6>παρακάμπτονται από το .panel-heading.

Για σωστό χρωματισμό συνδέσμων, φροντίστε να τοποθετήσετε συνδέσμους σε επικεφαλίδες εντός .panel-title.

Επικεφαλίδα πίνακα χωρίς τίτλο

Περιεχόμενο πάνελ

Τίτλος πίνακα

Περιεχόμενο πάνελ

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Πάνελ με υποσέλιδο

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

Περιεχόμενο πάνελ

Υποσέλιδο πίνακα

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Εναλλακτικές λύσεις με βάση τα συμφραζόμενα

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

Τίτλος πίνακα

Περιεχόμενο πάνελ

Τίτλος πίνακα

Περιεχόμενο πάνελ

Τίτλος πίνακα

Περιεχόμενο πάνελ

Τίτλος πίνακα

Περιεχόμενο πάνελ

Τίτλος πίνακα

Περιεχόμενο πάνελ

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Με τραπέζια

Προσθέστε οποιοδήποτε μη περιθώριο .tableσε ένα πλαίσιο για απρόσκοπτη σχεδίαση. Εάν υπάρχει ένα .panel-body, προσθέτουμε ένα επιπλέον περίγραμμα στην κορυφή του πίνακα για διαχωρισμό.

Επικεφαλίδα πίνακα

Ορισμένο προεπιλεγμένο περιεχόμενο του πίνακα εδώ. Nulla vitae elit libero, μια pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Ονομα	Επίθετο	Όνομα χρήστη
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

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

Επικεφαλίδα πίνακα

#	Ονομα	Επίθετο	Όνομα χρήστη
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Με ομάδες λιστών

Συμπεριλάβετε εύκολα ομάδες λιστών πλήρους πλάτους σε οποιοδήποτε πλαίσιο.

Επικεφαλίδα πίνακα

Ορισμένο προεπιλεγμένο περιεχόμενο του πίνακα εδώ. Nulla vitae elit libero, μια pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Προθάλαμος στο έρωτα

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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

Οι κανόνες εφαρμόζονται απευθείας σε <iframe>, <embed>, <video>και <object>στοιχεία. χρησιμοποιήστε προαιρετικά μια ρητή κλάση καταγωγής .embed-responsive-itemόταν θέλετε να ταιριάξετε το στυλ για άλλα χαρακτηριστικά.

Pro-Tip! Δεν χρειάζεται να το συμπεριλάβετε frameborder="0"στα <iframe>δικά σας καθώς το παρακάμπτουμε για εσάς.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Προεπιλογή καλά

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

Κοίτα, είμαι σε ένα πηγάδι!

<div class="well">...</div>

Προαιρετικά μαθήματα

Ελέγξτε την επένδυση και τις στρογγυλεμένες γωνίες με δύο προαιρετικές κατηγορίες τροποποιητών.

Κοίτα, είμαι σε ένα μεγάλο πηγάδι!

<div class="well well-lg">...</div>

Κοίτα, είμαι σε ένα μικρό πηγάδι!

<div class="well well-sm">...</div>

Συστατικά

Γλυφικά

Διαθέσιμα γλυφά

Τρόπος χρήσης

Μην αναμιγνύετε με άλλα συστατικά

Μόνο για χρήση σε κενά στοιχεία

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

Προσβάσιμα εικονίδια

Παραδείγματα

Αναπτυσσόμενα

Παράδειγμα

Ευθυγραμμία

Μπορεί να απαιτεί πρόσθετη τοποθέτηση

Καταργημένη .pull-rightευθυγράμμιση

Κεφαλίδες

Διαιρών

Απενεργοποιημένα στοιχεία μενού

Ομάδες κουμπιών

Οι συμβουλές εργαλείων και τα popover σε ομάδες κουμπιών απαιτούν ειδική ρύθμιση

Βεβαιωθείτε ότι είναι σωστό roleκαι δώστε μια ετικέτα

Βασικό παράδειγμα

Γραμμή εργαλείων κουμπιών

Κόλλα

Φωλιάζοντας

Κάθετη παραλλαγή

Δικαιολογημένες ομάδες κουμπιών

Χειρισμός συνόρων

IE8 και σύνορα

Με <a>στοιχεία

Σύνδεσμοι που λειτουργούν ως κουμπιά

Με <button>στοιχεία

Αναπτυσσόμενα κουμπιά

Εξάρτηση από πρόσθετο

Αναπτυσσόμενα μενού με ένα κουμπί

Αναπτυσσόμενα μενού διαίρεσης κουμπιών

Κόλλα

Παραλλαγή πτώσης

Ομάδες εισόδου

Κείμενο <input>μόνο

Οι συμβουλές εργαλείων και τα popover σε ομάδες εισόδου απαιτούν ειδική ρύθμιση

Μην αναμιγνύετε με άλλα συστατικά

Πάντα να προσθέτετε ετικέτες

Βασικό παράδειγμα

Κόλλα

Πλαίσια ελέγχου και πρόσθετα ραδιοφώνου

Πρόσθετα κουμπιών

Κουμπιά με αναπτυσσόμενα μενού

Τμηματοποιημένα κουμπιά

Πολλαπλά κουμπιά

Navs

Η χρήση πλοήγησης για πίνακες καρτελών απαιτεί πρόσθετο καρτελών JavaScript

Κάντε προσβάσιμα τα προγράμματα πλοήγησης που χρησιμοποιούνται ως πλοήγηση

Καρτέλες

Χάπια

Δικαιολογημένα

Safari και ανταποκρινόμενα δικαιολογημένα πλοία

Απενεργοποιημένοι σύνδεσμοι

Η λειτουργικότητα του συνδέσμου δεν επηρεάστηκε

Χρήση αναπτυσσόμενων

Καρτέλες με αναπτυσσόμενα μενού

Χάπια με σταγόνες

Navbar

Προεπιλεγμένη γραμμή πλοήγησης

Ξεχειλισμένο περιεχόμενο

Απαιτεί πρόσθετο JavaScript

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

Κάντε τις γραμμές πλοήγησης προσβάσιμες

Εικόνα μάρκας

Έντυπα

Προειδοποιήσεις για φορητές συσκευές

Πάντα να προσθέτετε ετικέτες

Κουμπιά

Χρήση σε συγκεκριμένο πλαίσιο

Κείμενο

Σύνδεσμοι που δεν είναι πλοήγησης

Ευθυγράμμιση εξαρτημάτων

Δεξιά στοίχιση πολλαπλών στοιχείων

Σταθερό στην κορυφή

Απαιτείται επένδυση σώματος

Σταθερό στο κάτω μέρος

Καταργημένη `.pull-right`ευθυγράμμιση

Βεβαιωθείτε ότι είναι σωστό `role`και δώστε μια ετικέτα

Με `<a>`στοιχεία

Με `<button>`στοιχεία

Κείμενο `<input>`μόνο