Δεκάδες επαναχρησιμοποιήσιμα εξαρτήματα κατασκευασμένα για να παρέχουν πλοήγηση, ειδοποιήσεις, popover και πολλά άλλα.
Με δυνατότητα εναλλαγής, με βάση τα συμφραζόμενα για εμφάνιση λιστών συνδέσμων. Έγινε διαδραστικό με την αναπτυσσόμενη προσθήκη JavaScript .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Ενέργεια </a></li>
- <li><a tabindex = "-1" href = "#" > Μια άλλη ενέργεια </a></li>
- <li><a tabindex = "-1" href = "#" > Κάτι άλλο εδώ </a></li>
- <li class = "διαιρέτης" ></li>
- <li><a tabindex = "-1" href = "#" > Διαχωρισμένος σύνδεσμος </a></li>
- </ul>
Κοιτάζοντας μόνο το αναπτυσσόμενο μενού, εδώ είναι το απαιτούμενο HTML. Πρέπει να τυλίξετε τον κανόνα ετικέτας του αναπτυσσόμενου μενού και το αναπτυσσόμενο μενού εντός .dropdown
ή σε άλλο στοιχείο που δηλώνει position: relative;
. Στη συνέχεια, απλώς δημιουργήστε το μενού.
- <div class = "αναπτυσσόμενο μενού" >
- <!-- Σύνδεσμος ή κουμπί για εναλλαγή του αναπτυσσόμενου μενού -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Ενέργεια </a></li>
- <li><a tabindex = "-1" href = "#" > Μια άλλη ενέργεια </a></li>
- <li><a tabindex = "-1" href = "#" > Κάτι άλλο εδώ </a></li>
- <li class = "διαιρέτης" ></li>
- <li><a tabindex = "-1" href = "#" > Διαχωρισμένος σύνδεσμος </a></li>
- </ul>
- </div>
Ευθυγραμμίστε τα μενού προς τα δεξιά και προσθέστε επιπλέον επίπεδα αναπτυσσόμενων μενού.
Προσθήκη .pull-right
στο a .dropdown-menu
προς τα δεξιά, ευθυγραμμίστε το αναπτυσσόμενο μενού.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Προσθέστε .disabled
στο a <li>
στο αναπτυσσόμενο μενού για να απενεργοποιήσετε τη σύνδεση.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Κανονικός σύνδεσμος </a></li>
- <li class = "disabled" ><a tabindex = "-1" href = "#" > Απενεργοποιημένος σύνδεσμος </a></li>
- <li><a tabindex = "-1" href = "#" > Ένας άλλος σύνδεσμος </a></li>
- </ul>
Προσθέστε ένα επιπλέον επίπεδο αναπτυσσόμενων μενού, που εμφανίζονται στο δείκτη του ποντικιού όπως αυτά του OS X, με μερικές απλές προσθήκες σήμανσης. Προσθήκη .dropdown-submenu
σε οποιοδήποτε li
σε ένα υπάρχον αναπτυσσόμενο μενού για αυτόματο στυλ.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "αναπτυσσόμενο-υπομενού" >
- <a tabindex = "-1" href = "#" > Περισσότερες επιλογές </a>
- <ul class = "αναπτυσσόμενο μενού" >
- ...
- </ul>
- </li>
- </ul>
Απλή σελιδοποίηση εμπνευσμένη από το Rdio, ιδανική για εφαρμογές και αποτελέσματα αναζήτησης. Το μεγάλο μπλοκ είναι δύσκολο να το χάσετε, εύκολα κλιμακώνεται και παρέχει μεγάλες περιοχές κλικ.
- <div class = "σελιδοποίηση" >
- <ul>
- <li><a href = "#" > Προηγ . </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 = "#" > Επόμενο </a></li>
- </ul>
- </div>
Οι σύνδεσμοι είναι προσαρμόσιμοι για διαφορετικές περιστάσεις. Χρησιμοποιήστε .disabled
το για συνδέσμους που δεν μπορούν να κάνουν κλικ και .active
για να υποδείξετε την τρέχουσα σελίδα.
- <div class = "σελιδοποίηση" >
- <ul>
- <li class = "disabled" ><a href = "#" > « </a></li>
- <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Μπορείτε προαιρετικά να ανταλλάξετε ενεργές ή απενεργοποιημένες άγκυρες για διαστήματα για να καταργήσετε τη λειτουργικότητα των κλικ διατηρώντας παράλληλα τα επιδιωκόμενα στυλ.
- <div class = "σελιδοποίηση" >
- <ul>
- <li class = "disabled" ><span> « </span></li>
- <li class = "ενεργός" ><span> 1 </span></li>
- ...
- </ul>
- </div>
Θέλετε μεγαλύτερη ή μικρότερη σελιδοποίηση; Προσθέστε .pagination-large
, .pagination-small
, ή .pagination-mini
για επιπλέον μεγέθη.
- <div class = "σελιδοποίηση-μεγάλη" >
- <ul>
- ...
- </ul>
- </div>
- <div class = "σελιδοποίηση" >
- <ul>
- ...
- </ul>
- </div>
- <div class = "σελιδοποίηση-μικρή" >
- <ul>
- ...
- </ul>
- </div>
- <div class = "σελιδοποίηση-mini" >
- <ul>
- ...
- </ul>
- </div>
Προσθέστε μία από τις δύο προαιρετικές κλάσεις για να αλλάξετε τη στοίχιση των συνδέσμων σελιδοποίησης: .pagination-centered
και .pagination-right
.
- <div class = "σελιδοποίηση με επίκεντρο τη σελιδοποίηση" >
- ...
- </div>
- <div class = "σελιδοποίηση-δεξιά" >
- ...
- </div>
Γρήγοροι προηγούμενοι και επόμενοι σύνδεσμοι για απλές υλοποιήσεις σελιδοποίησης με ελαφριά σήμανση και στυλ. Είναι ιδανικό για απλούς ιστότοπους όπως ιστολόγια ή περιοδικά.
Από προεπιλογή, οι σύνδεσμοι στο κέντρο τηλεειδοποίησης.
- <ul class = "pager" >
- <li><a href = "#" > Προηγούμενο </a></li>
- <li><a href = "#" > Επόμενο </a></li>
- </ul>
Εναλλακτικά, μπορείτε να ευθυγραμμίσετε κάθε σύνδεσμο στις πλευρές:
- <ul class = "pager" >
- <li class = "προηγούμενο" >
- <a href = "#" > ← Παλαιότερο </a>
- </li>
- <li class = "επόμενο" >
- <a href = "#" > Νεότερο → </a>
- </li>
- </ul>
Οι σύνδεσμοι σελιδοποίησης χρησιμοποιούν επίσης τη γενική .disabled
κατηγορία χρησιμότητας από τη σελιδοποίηση.
- <ul class = "pager" >
- <li class = "προηγούμενο απενεργοποιημένο" >
- <a href = "#" > ← Παλαιότερο </a>
- </li>
- ...
- </ul>
Ετικέτες | Σήμανση |
---|---|
Προκαθορισμένο | <span class="label">Default</span> |
Επιτυχία | <span class="label label-success">Success</span> |
Προειδοποίηση | <span class="label label-warning">Warning</span> |
Σπουδαίος | <span class="label label-important">Important</span> |
Πληροφορίες | <span class="label label-info">Info</span> |
Αντίστροφος | <span class="label label-inverse">Inverse</span> |
Ονομα | Παράδειγμα | Σήμανση |
---|---|---|
Προκαθορισμένο | 1 | <span class="badge">1</span> |
Επιτυχία | 2 | <span class="badge badge-success">2</span> |
Προειδοποίηση | 4 | <span class="badge badge-warning">4</span> |
Σπουδαίος | 6 | <span class="badge badge-important">6</span> |
Πληροφορίες | 8 | <span class="badge badge-info">8</span> |
Αντίστροφος | 10 | <span class="badge badge-inverse">10</span> |
Για εύκολη εφαρμογή, οι ετικέτες και τα σήματα απλά θα συμπτύσσονται (μέσω του :empty
επιλογέα του CSS) όταν δεν υπάρχει περιεχόμενο.
Ένα ελαφρύ, ευέλικτο στοιχείο για την προβολή βασικού περιεχομένου στον ιστότοπό σας. Λειτουργεί καλά σε ιστότοπους μάρκετινγκ και μεγάλου περιεχομένου.
Αυτή είναι μια απλή μονάδα ήρωα, ένα απλό εξάρτημα σε στυλ jumbotron για να προσελκύει επιπλέον προσοχή στο επιλεγμένο περιεχόμενο ή πληροφορίες.
- <div class = "ηρωική μονάδα" >
- <h1> Επικεφαλίδα </h1>
- <p> Περιγραφή </p>
- <p>
- <a class = "btn btn-κύριο btn-large" >
- Μάθε περισσότερα
- </a>
- </p>
- </div>
Ένα απλό κέλυφος για τον h1
κατάλληλο χώρο και τμηματοποίηση ενοτήτων περιεχομένου σε μια σελίδα. Μπορεί να χρησιμοποιήσει το h1
προεπιλεγμένο small
στοιχείο , καθώς και τα περισσότερα άλλα στοιχεία (με πρόσθετα στυλ).
- <div class = "page-header" >
- <h1> Παράδειγμα κεφαλίδας σελίδας <small> Υποκείμενο για την κεφαλίδα </small></h1>
- </div>
Από προεπιλογή, οι μικρογραφίες του Bootstrap έχουν σχεδιαστεί για να προβάλλουν συνδεδεμένες εικόνες με ελάχιστη απαιτούμενη σήμανση.
Με λίγη επιπλέον σήμανση, είναι δυνατό να προσθέσετε οποιοδήποτε είδος περιεχομένου HTML, όπως επικεφαλίδες, παραγράφους ή κουμπιά σε μικρογραφίες.
Οι μικρογραφίες (προηγουμένως .media-grid
μέχρι την έκδοση 1.4) είναι ιδανικές για πλέγματα φωτογραφιών ή βίντεο, αποτελέσματα αναζήτησης εικόνων, προϊόντα λιανικής, χαρτοφυλάκια και πολλά άλλα. Μπορεί να είναι σύνδεσμοι ή στατικό περιεχόμενο.
Η σήμανση μικρογραφιών είναι απλή—α ul
με οποιονδήποτε αριθμό li
στοιχείων είναι το μόνο που απαιτείται. Είναι επίσης εξαιρετικά ευέλικτο, επιτρέποντας οποιονδήποτε τύπο περιεχομένου με λίγο περισσότερη σήμανση για να τυλίξει το περιεχόμενό σας.
Τέλος, το στοιχείο μικρογραφιών χρησιμοποιεί υπάρχουσες κλάσεις συστήματος πλέγματος—όπως .span2
ή.span3
— για τον έλεγχο των διαστάσεων των μικρογραφιών.
Όπως αναφέρθηκε προηγουμένως, η απαιτούμενη σήμανση για τις μικρογραφίες είναι ελαφριά και απλή. Ακολουθεί μια ματιά στην προεπιλεγμένη ρύθμιση για συνδεδεμένες εικόνες :
- <ul class = "μικρογραφίες" >
- <li class = "span4" >
- <a href = "#" class = "μικρογραφία" >
- <img data-src = "holder.js/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
Για προσαρμοσμένο περιεχόμενο HTML σε μικρογραφίες, η σήμανση αλλάζει ελαφρώς. Για να επιτρέψουμε περιεχόμενο σε επίπεδο μπλοκ οπουδήποτε, ανταλλάσσουμε το <a>
με ένα <div>
όπως:
- <ul class = "μικρογραφίες" >
- <li class = "span4" >
- <div class = "μικρογραφία" >
- <img data-src = "holder.js/300x200" alt = "" >
- <h3> Ετικέτα μικρογραφίας </h3>
- <p> Λεζάντα μικρογραφίας... </p>
- </div>
- </li>
- ...
- </ul>
Εξερευνήστε όλες τις επιλογές σας με τις διάφορες κατηγορίες πλέγματος που έχετε στη διάθεσή σας. Μπορείτε επίσης να αναμίξετε και να ταιριάξετε διαφορετικά μεγέθη.
Τυλίξτε οποιοδήποτε κείμενο και ένα προαιρετικό κουμπί απόρριψης .alert
για ένα βασικό προειδοποιητικό μήνυμα.
- <div class = "ειδοποίηση" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Προειδοποίηση! </strong> Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.
- </div>
Τα προγράμματα περιήγησης Mobile Safari και Mobile Opera, εκτός από το data-dismiss="alert"
χαρακτηριστικό, απαιτούν href="#"
την απόρριψη ειδοποιήσεων κατά τη χρήση μιας <a>
ετικέτας.
- <a href = "#" class = "close" data-dismiss = "ειδοποίηση" > × </a>
Εναλλακτικά, μπορείτε να χρησιμοποιήσετε ένα <button>
στοιχείο με το χαρακτηριστικό data, το οποίο έχουμε επιλέξει να κάνουμε για τα έγγραφά μας. Όταν χρησιμοποιείτε <button>
το , πρέπει να συμπεριλάβετε type="button"
διαφορετικά οι φόρμες σας ενδέχεται να μην υποβληθούν.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Χρησιμοποιήστε την προσθήκη ειδοποιήσεων jQuery για γρήγορη και εύκολη απόρριψη ειδοποιήσεων.
Για μεγαλύτερα μηνύματα, αυξήστε το padding στο επάνω και στο κάτω μέρος του περιτυλίγματος ειδοποιήσεων προσθέτοντας .alert-block
.
Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά. Nulla vitae elit libero, μια pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Προειδοποίηση! </h4>
- Ελέγξτε καλύτερα τον εαυτό σας, δεν είστε...
- </div>
Προσθέστε προαιρετικές τάξεις για να αλλάξετε τη σημασία μιας ειδοποίησης.
- <div class = "ειδοποίηση ειδοποίησης-σφάλμα" >
- ...
- </div>
- <div class = "ειδοποίηση ειδοποίησης-επιτυχία" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Προεπιλεγμένη γραμμή προόδου με κατακόρυφη κλίση.
- <div class = "πρόοδος" >
- <div class = "bar" style = " πλάτος : 60 %; " </div>
- </div>
Χρησιμοποιεί μια κλίση για να δημιουργήσει ένα ριγέ εφέ. Δεν διατίθεται σε IE7-8.
- <div class = "progress progress-striped" >
- <div class = "bar" style = " πλάτος : 20 %; " </div>
- </div>
Προσθέστε .active
στο για .progress-striped
να κάνετε κίνηση των λωρίδων από δεξιά προς τα αριστερά. Δεν είναι διαθέσιμο σε όλες τις εκδόσεις του IE.
- <div class = "progress progress-striped active" >
- <div class = "bar" style = " πλάτος : 40 %; " </div>
- </div>
Τοποθετήστε πολλές ράβδους στο ίδιο .progress
για να τις στοιβάξετε.
- <div class = "πρόοδος" >
- <div class = "bar bar-success" style = " πλάτος : 35 %; " ></div>
- <div class = "bar bar-warning" style = " πλάτος : 20 %; " </div>
- <div class = "bar bar-danger" style = " πλάτος : 10 %; " </div>
- </div>
Οι γραμμές προόδου χρησιμοποιούν μερικά από τα ίδια κουμπιά και κλάσεις ειδοποίησης για συνεπή στυλ.
- <div class = "progress progress-info" >
- <div class = "bar" style = " πλάτος : 20 % " ></div>
- </div>
- <div class = "πρόοδος-πρόοδος-επιτυχία" >
- <div class = "bar" style = " πλάτος : 40 % " ></div>
- </div>
- <div class = "προειδοποίηση προόδου" >
- <div class = "bar" style = " πλάτος : 60 % " ></div>
- </div>
- <div class = "πρόοδος πρόοδος-κίνδυνος" >
- <div class = "bar" style = " πλάτος : 80 % " ></div>
- </div>
Παρόμοια με τα συμπαγή χρώματα, έχουμε ποικίλες ριγέ γραμμές προόδου.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " πλάτος : 20 % " ></div>
- </div>
- <div class = "πρόοδος πρόοδος-επιτυχία πρόοδος-ριγέ" >
- <div class = "bar" style = " πλάτος : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" style = " πλάτος : 60 % " ></div>
- </div>
- <div class = "πρόοδος πρόοδος-κίνδυνος πρόοδος-ριγέ" >
- <div class = "bar" style = " πλάτος : 80 % " ></div>
- </div>
Οι γραμμές προόδου χρησιμοποιούν διαβαθμίσεις, μεταβάσεις και κινούμενα σχέδια CSS3 για να επιτύχουν όλα τα εφέ τους. Αυτές οι δυνατότητες δεν υποστηρίζονται στον IE7-9 ή σε παλαιότερες εκδόσεις του Firefox.
Οι εκδόσεις παλαιότερες από τον Internet Explorer 10 και την Opera 12 δεν υποστηρίζουν κινούμενα σχέδια.
Αφηρημένα στυλ αντικειμένων για τη δημιουργία διαφόρων τύπων στοιχείων (όπως σχόλια ιστολογίου, tweets, κ.λπ.) που διαθέτουν μια εικόνα με αριστερή ή δεξιά στοίχιση μαζί με περιεχόμενο κειμένου.
Τα προεπιλεγμένα μέσα επιτρέπουν την αιώρηση ενός αντικειμένου πολυμέσων (εικόνες, βίντεο, ήχος) στα αριστερά ή στα δεξιά ενός μπλοκ περιεχομένου.
- <div class = "μέσα" >
- <a class = "pull-left" href = "#" >
- <img class = "media-object" data-src = "holder.js/64x64" >
- </a>
- <div class = "μέσα-σώμα" >
- <h4 class = "media-heading" > Επικεφαλίδα μέσων </h4>
- ...
- <!-- Ένθετο αντικείμενο πολυμέσων -->
- <div class = "μέσα" >
- ...
- </div>
- </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.
- <ul class = "media-list" >
- <li class = "μέσα" >
- <a class = "pull-left" href = "#" >
- <img class = "media-object" data-src = "holder.js/64x64" >
- </a>
- <div class = "μέσα-σώμα" >
- <h4 class = "media-heading" > Επικεφαλίδα μέσων </h4>
- ...
- <!-- Ένθετο αντικείμενο πολυμέσων -->
- <div class = "μέσα" >
- ...
- </div>
- </div>
- </li>
- </ul>
Χρησιμοποιήστε το πηγάδι ως απλό εφέ σε ένα στοιχείο για να του δώσετε ένα ένθετο εφέ.
- <div class = "καλά" >
- ...
- </div>
Ελέγξτε την επένδυση και τις στρογγυλεμένες γωνίες με δύο προαιρετικές κατηγορίες τροποποιητών.
- <div class = "καλά καλά-μεγάλο" >
- ...
- </div>
- <div class = "καλά καλά-μικρό" >
- ...
- </div>
Χρησιμοποιήστε το γενικό εικονίδιο κλεισίματος για να απορρίψετε περιεχόμενο όπως τρόπους λειτουργίας και ειδοποιήσεις.
- <button class = "close" > × </button>
Οι συσκευές iOS απαιτούν href="#"
συμβάντα για κλικ, αν προτιμάτε να χρησιμοποιήσετε άγκυρα.
- <a class = "close" href = "#" > × </a>
Απλά, εστιασμένα μαθήματα για μικρές αλλαγές οθόνης ή συμπεριφοράς.
Επιπλέουν ένα στοιχείο αριστερά
- class = "pull-left"
- . τραβήξτε - αριστερά {
- float : αριστερά ;
- }
Επιπλέουν ένα στοιχείο δεξιά
- class = "τραβήξτε δεξιά"
- . τραβήξτε - δεξιά {
- float : δεξιά ;
- }
Αλλάξτε το χρώμα ενός στοιχείου σε#999
- class = "σίγαση"
- . σίγαση {
- χρώμα : #999;
- }
Διαγράψτε το float
σε οποιοδήποτε στοιχείο
- class = "καθαρή επιδιόρθωση"
- . επιδιόρθωση {
- * ζουμ : 1 ;
- &: πριν ,
- &: μετά από {
- οθόνη : πίνακας ;
- περιεχόμενο : "" ;
- }
- &: μετά από {
- ξεκάθαρο : και τα δύο ;
- }
- }