Συστατικά

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

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

Χρησιμοποιήστε ομάδες κουμπιών για να συνδέσετε πολλά κουμπιά μαζί ως ένα σύνθετο στοιχείο. Κατασκευάστε τα με μια σειρά από <a>ή <button>στοιχεία.

Βέλτιστες πρακτικές

Συνιστούμε τις ακόλουθες οδηγίες για τη χρήση ομάδων κουμπιών και γραμμών εργαλείων:

  • Να χρησιμοποιείτε πάντα το ίδιο στοιχείο σε μια ομάδα κουμπιών <a>ή <button>.
  • Μην αναμιγνύετε κουμπιά διαφορετικών χρωμάτων στην ίδια ομάδα κουμπιών.
  • Χρησιμοποιήστε εικονίδια επιπρόσθετα ή αντί για κείμενο, αλλά φροντίστε να συμπεριλάβετε εναλλακτικό και κείμενο τίτλου όπου χρειάζεται.

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

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

Δείτε πώς φαίνεται το HTML για μια τυπική ομάδα κουμπιών που έχει δημιουργηθεί με κουμπιά ετικετών αγκύρωσης:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Παράδειγμα γραμμής εργαλείων

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

  1. <div class = "btn-γραμμή εργαλείων" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Πλαίσιο ελέγχου και γεύσεις ραδιοφώνου

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

Λάβετε το javascript »

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

Ψηλά το κεφάλι! Τα κουμπιά με αναπτυσσόμενα μενού πρέπει να τυλίγονται μεμονωμένα .btn-groupμέσα σε ένα .btn-toolbarγια σωστή απόδοση.

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

Επισκόπηση και παραδείγματα

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

Παράδειγμα σήμανσης

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Δράση
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "αναπτυσσόμενο μενού" >
  7. <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  8. </ul>
  9. </div>

Λειτουργεί με όλα τα μεγέθη κουμπιών

Τα αναπτυσσόμενα κουμπιά λειτουργούν σε οποιοδήποτε μέγεθος. τα μεγέθη των κουμπιών σας σε .btn-large, .btn-smallή .btn-mini.

Απαιτεί javascript

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

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


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

Επισκόπηση και παραδείγματα

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

Μεγέθη

Χρησιμοποιήστε τις επιπλέον κατηγορίες κουμπιών .btn-mini, .btn-smallή .btn-largeγια το μέγεθος.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "αναπτυσσόμενο μενού pull-right" >
  4. <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  5. </ul>
  6. </div>

Παράδειγμα σήμανσης

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Ενέργεια </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "αναπτυσσόμενο μενού" >
  7. <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  8. </ul>
  9. </div>

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

Τα αναπτυσσόμενα μενού μπορούν επίσης να εναλλάσσονται από κάτω προς τα πάνω προσθέτοντας μια κλάση στον άμεσο γονέα του .dropdown-menu. Θα γυρίσει την κατεύθυνση του .caretκαι θα επανατοποθετήσει το ίδιο το μενού ώστε να μετακινείται από κάτω προς τα πάνω αντί για από πάνω προς τα κάτω.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "αναπτυσσόμενο μενού" >
  7. <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  8. </ul>
  9. </div>

Σελιδοποίηση πολλαπλών σελίδων

Πότε να χρησιμοποιείται

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

Σύνδεσμοι κρατικών σελίδων

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

Ευέλικτη ευθυγράμμιση

Προσθέστε μία από τις δύο προαιρετικές κλάσεις για να αλλάξετε τη στοίχιση των συνδέσμων σελιδοποίησης: .pagination-centeredκαι .pagination-right.

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

Το προεπιλεγμένο στοιχείο σελιδοποίησης είναι ευέλικτο και λειτουργεί σε διάφορες παραλλαγές.

Σήμανση

Τυλιγμένη σε ένα <div>, η σελιδοποίηση είναι απλώς ένα <ul>.

  1. <div class = "σελιδοποίηση" >
  2. <ul>
  3. <li><a href = "#" > Προηγ . </a></li>
  4. <li class = "ενεργός" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Επόμενο </a></li>
  11. </ul>
  12. </div>

Pager Για γρήγορους προηγούμενους και επόμενους συνδέσμους

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

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

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

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

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

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Προηγούμενο </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Επόμενο </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "pager" >
  2. <li class = "προηγούμενο" >
  3. <a href = "#" > Παλαιότερο </a>
  4. </li>
  5. <li class = "επόμενο" >
  6. <a href = "#" > Νεότερο → </a>
  7. </li>
  8. </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>

Σχετικά με

Τα σήματα είναι μικρά, απλά στοιχεία για την εμφάνιση μιας ένδειξης ή μέτρησης κάποιου είδους. Βρίσκονται συνήθως σε προγράμματα-πελάτες ηλεκτρονικού ταχυδρομείου όπως το Mail.app ή σε εφαρμογές για κινητά για ειδοποιήσεις push.

Διαθέσιμες τάξεις

Ονομα Παράδειγμα Σήμανση
Προκαθορισμένο 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>

Μονάδα ηρώων

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

Σήμανση

Τυλίξτε το περιεχόμενό σας σε ένα divόπως:

  1. <div class = "ηρωική μονάδα" >
  2. <h1> Επικεφαλίδα </h1>
  3. <p> Περιγραφή </p>
  4. <p>
  5. <a class = "btn btn-κύριο btn-large" >
  6. Μάθε περισσότερα
  7. </a>
  8. </p>
  9. </div>

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

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

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

Κεφαλίδα σελίδας

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

  1. <div class = "page-header" >
  2. <h1> Παράδειγμα κεφαλίδας σελίδας </h1>
  3. </div>

Προεπιλεγμένες μικρογραφίες

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

Εξαιρετικά προσαρμόσιμο

Με λίγη επιπλέον σήμανση, είναι δυνατό να προσθέσετε οποιοδήποτε είδος περιεχομένου 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.

    Δράση Δράση

Γιατί να χρησιμοποιήσετε μικρογραφίες

Οι μικρογραφίες (προηγουμένως .media-gridμέχρι την έκδοση 1.4) είναι ιδανικές για πλέγματα φωτογραφιών ή βίντεο, αποτελέσματα αναζήτησης εικόνων, προϊόντα λιανικής, χαρτοφυλάκια και πολλά άλλα. Μπορεί να είναι σύνδεσμοι ή στατικό περιεχόμενο.

Απλή, ευέλικτη σήμανση

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

Χρησιμοποιεί μεγέθη στηλών πλέγματος

Τέλος, το στοιχείο μικρογραφιών χρησιμοποιεί υπάρχουσες τάξεις συστήματος πλέγματος—όπως .span2ή — .span3για τον έλεγχο των διαστάσεων των μικρογραφιών.

Η σήμανση

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

  1. <ul class = "μικρογραφίες" >
  2. <li class = "span3" >
  3. <a href = "#" class = "μικρογραφία" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Για προσαρμοσμένο περιεχόμενο HTML σε μικρογραφίες, η σήμανση αλλάζει ελαφρώς. Για να επιτρέψουμε περιεχόμενο σε επίπεδο μπλοκ οπουδήποτε, ανταλλάσσουμε το <a>με ένα <div>όπως:

  1. <ul class = "μικρογραφίες" >
  2. <li class = "span3" >
  3. <div class = "μικρογραφία" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Ετικέτα μικρογραφίας </h5>
  6. <p> Λεζάντα μικρογραφίας εδώ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Περισσότερα παραδείγματα

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

Ελαφρύ προεπιλογές

Ξαναγραμμένη βασική τάξη

Με το Bootstrap 2, απλοποιήσαμε τη βασική κλάση: .alertαντί για .alert-message. Επίσης, μειώσαμε την ελάχιστη απαιτούμενη σήμανση—δεν <p>απαιτείται από προεπιλογή, μόνο η εξωτερική <div>.

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

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


Ταιριάζει υπέροχα με javascript

Το Bootstrap συνοδεύεται από ένα εξαιρετικό πρόσθετο jQuery που υποστηρίζει μηνύματα ειδοποίησης, κάνοντας την απόρριψή τους γρήγορη και εύκολη.

Λήψη της προσθήκης »

Παραδείγματα ειδοποιήσεων

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

Προειδοποίηση! Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.
  1. <div class = "ειδοποίηση" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Προειδοποίηση! </strong> Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.
  4. </div>

Ψηλά το κεφάλι! Οι συσκευές iOS απαιτούν href="#"την απόρριψη ειδοποιήσεων. Φροντίστε να το συμπεριλάβετε και το χαρακτηριστικό δεδομένων για τα εικονίδια κλεισίματος αγκύρωσης. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε ένα <button>στοιχείο με το χαρακτηριστικό data, το οποίο έχουμε επιλέξει να κάνουμε για τα έγγραφά μας. Όταν χρησιμοποιείτε <button>το , πρέπει να συμπεριλάβετε type="button"διαφορετικά οι φόρμες σας ενδέχεται να μην υποβληθούν.

Επεκτείνετε εύκολα το τυπικό μήνυμα ειδοποίησης με δύο προαιρετικές κατηγορίες: .alert-blockγια περισσότερα στοιχεία ελέγχου συμπλήρωσης και κειμένου και .alert-headingγια αντίστοιχη επικεφαλίδα.

Προειδοποίηση!

Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά. Nulla vitae elit libero, μια pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Προειδοποίηση! </h4>
  4. Ελέγξτε καλύτερα τον εαυτό σας, δεν είστε...
  5. </div>

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

Λάθος ή κίνδυνος

Ω snap! Αλλάξτε μερικά πράγματα και δοκιμάστε να υποβάλετε ξανά.
  1. <div class = "ειδοποίηση ειδοποίησης-σφάλμα" >
  2. ...
  3. </div>

Επιτυχία

Μπράβο! Διαβάσατε με επιτυχία αυτό το σημαντικό μήνυμα ειδοποίησης.
  1. <div class = "ειδοποίηση ειδοποίησης-επιτυχία" >
  2. ...
  3. </div>

Πληροφορίες

Ψηλά το κεφάλι! Αυτή η ειδοποίηση χρειάζεται την προσοχή σας, αλλά δεν είναι πολύ σημαντική.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Παραδείγματα και σήμανση

Βασικός

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

  1. <div class = "πρόοδος" >
  2. <div class = "μπαρ"
  3. style = " πλάτος : 60 %; " ></div>
  4. </div>

Ριγέ

Χρησιμοποιεί μια κλίση για να δημιουργήσει ένα ριγέ εφέ (χωρίς IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "μπαρ"
  3. style = " πλάτος : 20 %; " ></div>
  4. </div>

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

Παίρνει το ριγέ παράδειγμα και το ζωντανεύει (χωρίς IE).

  1. <div class = "πρόοδος προόδου-ριγέ
  2. ενεργός" >
  3. <div class = "μπαρ"
  4. style = " πλάτος : 40 %; " </div>
  5. </div>

Επιλογές και υποστήριξη προγράμματος περιήγησης

Πρόσθετα χρώματα

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

Ριγέ μπάρες

Παρόμοια με τα συμπαγή χρώματα, έχουμε ποικίλες ριγέ γραμμές προόδου.

η ΣΥΜΠΕΡΙΦΟΡΑ

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

Εάν χρησιμοποιείτε την .activeτάξη, οι .progress-stripedγραμμές προόδου σας θα κινούν τις ρίγες από αριστερά προς τα δεξιά.

Υποστήριξη προγράμματος περιήγησης

Οι γραμμές προόδου χρησιμοποιούν διαβαθμίσεις, μεταβάσεις και κινούμενα σχέδια CSS3 για να επιτύχουν όλα τα εφέ τους. Αυτές οι δυνατότητες δεν υποστηρίζονται στον IE7-9 ή σε παλαιότερες εκδόσεις του Firefox.

Η Opera και ο IE δεν υποστηρίζουν κινούμενα σχέδια αυτήν τη στιγμή.

Πηγάδια

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

Κοίτα, είμαι σε ένα πηγάδι!
  1. <div class = "καλά" >
  2. ...
  3. </div>

Κλείσιμο εικονίδιο

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

  1. <button class = "close" > × </button>

Οι συσκευές iOS απαιτούν ένα href="#" για συμβάντα κλικ, εάν προτιμάτε να χρησιμοποιείτε άγκυρα.

  1. <a class = "close" href = "#" > × </a>