Παράδειγμα

Με δυνατότητα εναλλαγής, με βάση τα συμφραζόμενα για εμφάνιση λιστών συνδέσμων. Έγινε διαδραστικό με την αναπτυσσόμενη προσθήκη 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>

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

Δύο βασικές επιλογές, μαζί με δύο πιο συγκεκριμένες παραλλαγές.

Ομάδα με ένα κουμπί

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

<div class = "btn-group" > 
  <button class = "btn" > Αριστερά </button> 
  <button class = "btn" > Μεσαία </button> 
  <button class = "btn" > Δεξιά </button> 
</div>

Πολλαπλές ομάδες κουμπιών

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

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

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

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

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

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

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

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Δράση
    <span class = "caret" ></span> 
  </a>
  <ul class = "αναπτυσσόμενο μενού" > 
    <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  </ul>
</div>

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

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

Απαιτεί JavaScript

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

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

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

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

<div class = "btn-group" > 
  <button class = "btn" > Ενέργεια </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "αναπτυσσόμενο μενού" > 
    <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  </ul>
</div>

Μεγέθη

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Ενέργεια </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "αναπτυσσόμενο μενού" > 
    <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  </ul>
</div>

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

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

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "αναπτυσσόμενο μενού" > 
    <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  </ul>
</div>

Ελαφρύ προεπιλογές Ίδια σήμανση, διαφορετικές κατηγορίες

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

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

Πάρτε τακτικά <ul>συνδέσμους και προσθέστε .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "ενεργός" > 
    <a href = "#" > Αρχική σελίδα </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Βασικά χάπια

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

<ul class = "nav nav-pills" > 
  <li class = "ενεργός" > 
    <a href = "#" > Αρχική σελίδα </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Κατάσταση αναπηρίας

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

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Αρχική σελίδα </a></li>  
  ...
</ul>

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

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

Στοιβαζόμενο

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

Στοιβαγμένες καρτέλες

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

Στοιβαγμένα χάπια

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

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

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

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

<ul class = "nav nav-tabs" > 
  <li class = "αναπτυσσόμενο μενού" > 
    <a class = "dropdown-toggle" 
       data-toggle = "αναπτυσσόμενο"
       href = "#" >
        Αναπτυσσόμενο
        <b class = "caret" ></b> 
      </a>
    <ul class = "αναπτυσσόμενο μενού" > 
      <!-- σύνδεσμοι -->
    </ul>
  </li>
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "αναπτυσσόμενο μενού" > 
    <a class = "dropdown-toggle" 
       data-toggle = "αναπτυσσόμενο"
       href = "#" >
        Αναπτυσσόμενο
        <b class = "caret" ></b> 
      </a>
    <ul class = "αναπτυσσόμενο μενού" > 
      <!-- σύνδεσμοι -->
    </ul>
  </li>
</ul>

Λίστες πλοήγησης

Ένας απλός και εύκολος τρόπος για να δημιουργήσετε ομάδες συνδέσμων πλοήγησης με προαιρετικές κεφαλίδες. Χρησιμοποιούνται καλύτερα σε πλαϊνές γραμμές όπως το Finder στο OS X.

Παράδειγμα λίστας πλοήγησης

Πάρτε μια λίστα με συνδέσμους και προσθέστε class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Κεφαλίδα λίστας </li> 
  <li class = "active" ><a href = "#" > Αρχική σελίδα </a></li>  
  <li><a href = "#" > Βιβλιοθήκη </a></li> 
  ...
</ul>

ΣημείωσηΓια ένθεση σε μια λίστα πλοήγησης, συμπεριλάβετε class="nav nav-list"σε οποιαδήποτε ένθετη <ul>.

Οριζόντια διαχωριστικά

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

<ul class = "nav nav-list" > 
  ...
  <li class = "διαιρέτης" ></li> 
  ...
</ul>

Πλοήγηση με καρτέλες

Δώστε ζωή στις καρτέλες σας με μια απλή προσθήκη για εναλλαγή μεταξύ περιεχομένου μέσω καρτελών. Το Bootstrap ενσωματώνει καρτέλες με tabbable σε τέσσερα στυλ: επάνω (προεπιλογή), δεξιά, κάτω και αριστερά.

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

Για να κάνετε τις καρτέλες με καρτέλες, δημιουργήστε ένα .tab-paneμοναδικό αναγνωριστικό για κάθε καρτέλα και τυλίξτε τις σε .tab-content.

<div class = "tabable" > <!-- Απαιτείται μόνο για αριστερή/δεξιά καρτέλα -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Ενότητα 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Ενότητα 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane ενεργό" id = "tab1" >  
      <p> Είμαι στην Ενότητα 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Γεια σας, είμαι στην Ενότητα 2. </p>
    </div>
  </div>
</div>

Εξασθένιση στις καρτέλες

Για να κάνετε τις καρτέλες να ξεθωριάζουν, προσθέστε .fadeσε κάθε .tab-pane.

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

Όλες οι καρτέλες με tabbable τροφοδοτούνται από το ελαφρύ πρόσθετο jQuery. Διαβάστε περισσότερα σχετικά με το πώς να ζωντανέψετε τις καρτέλες με tabbable στη σελίδα εγγράφων JavaScript .

Καρτέλα προς οποιαδήποτε κατεύθυνση

Καρτέλες στο κάτω μέρος

Αναστρέψτε τη σειρά του HTML και προσθέστε μια κλάση για να τοποθετήσετε καρτέλες στο κάτω μέρος.

<div class = "tabable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Καρτέλες στα αριστερά

Αλλάξτε την τάξη για να βάλετε καρτέλες στα αριστερά.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Καρτέλες στα δεξιά

Αλλάξτε την τάξη για να βάλετε καρτέλες στα δεξιά.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Βασική γραμμή πλοήγησης

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

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Τίτλος </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Αρχική σελίδα </a></li>  
      <li><a href = "#" > Σύνδεσμος </a></li> 
      <li><a href = "#" > Σύνδεσμος </a></li> 
    </ul>
  </div>
</div>

Στοιχεία Navbar

Μάρκα

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

<a class = "brand" href = "#" > Όνομα έργου </a>  

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

Τα στοιχεία πλοήγησης προστίθενται εύκολα μέσω μη ταξινομημένων λιστών.

<ul class = "nav" > 
  <li class = "ενεργός" > 
    <a href = "#" > Αρχική σελίδα </a> 
  </li>
  <li><a href = "#" > Σύνδεσμος </a></li> 
  <li><a href = "#" > Σύνδεσμος </a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Έντυπα

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Υποβολή </button>  
</form>

Φόρμα αναζήτησης

Για μια πιο προσαρμοσμένη φόρμα αναζήτησης, προσθέστε .navbar-searchστο formκαι .search-queryστην είσοδο για εξειδικευμένα στυλ στη γραμμή πλοήγησης.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Αναζήτηση" >   
</form>

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

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

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

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

<ul class = "nav" > 
  <li class = "αναπτυσσόμενο μενού" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      λογαριασμός
      <b class = "caret" ></b> 
    </a>
    <ul class = "αναπτυσσόμενο μενού" > 
      ...
    </ul>
  </li>
</ul>

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

Κείμενο

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

Προαιρετικές παραλλαγές οθόνης

Στερεώστε τη γραμμή πλοήγησης στο επάνω ή στο κάτω μέρος της θύρας προβολής με μια πρόσθετη κλάση στο πιο εξωτερικό div, .navbar.

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

Προσθέστε .navbar-fixed-topκαι θυμηθείτε να λάβετε υπόψη την κρυφή περιοχή κάτω από αυτήν προσθέτοντας τουλάχιστον 40 εικονοστοιχεία paddingστο <body>. Φροντίστε να το προσθέσετε μετά το βασικό Bootstrap CSS και πριν από το προαιρετικό CSS που αποκρίνεται.

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

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

Αντ' αυτού, προσθέστε .navbar-fixed-bottom.

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

Στατική επάνω γραμμή πλοήγησης

Δημιουργήστε μια γραμμή πλοήγησης πλήρους πλάτους που απομακρύνεται με κύλιση με τη σελίδα προσθέτοντας .navbar-static-top. Σε αντίθεση με την .navbar-fixed-topτάξη, δεν χρειάζεται να αλλάξετε καμία συμπλήρωση στο body.

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

Αποκριτική γραμμή πλοήγησης

Για να εφαρμόσετε μια αναδιπλούμενη αποκριτική γραμμή πλοήγησης, τυλίξτε το περιεχόμενο της γραμμής πλοήγησης σε ένα που περιέχει div, .nav-collapse.collapseκαι προσθέστε το κουμπί εναλλαγής της γραμμής πλοήγησης, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- Το .btn-navbar χρησιμοποιείται ως εναλλαγή για το περιεχόμενο της γραμμής πλοήγησης σε σύμπτυξη -->
      <a class = "btn btn-navbar" data-toggle = "σύμπτυξη" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Βεβαιωθείτε ότι έχετε αφήσει την επωνυμία εκεί έξω εάν θέλετε να εμφανίζεται -->
      <a class = "brand" href = "#" > Όνομα έργου </a>  
 
      <!-- Ό,τι θέλετε κρυμμένο στα 940 px ή λιγότερο, τοποθετήστε εδώ -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, κ.λπ. -->
      </div>
 
    </div>
  </div>
</div>

Αντεστραμμένη παραλλαγή

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

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

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

Ένα μεμονωμένο παράδειγμα εμφανίζεται καθώς μπορεί να εμφανίζεται σε πολλές σελίδες.

<ul class = "ψωμάκι" > 
  <li><a href = "#" > Αρχική σελίδα </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Βιβλιοθήκη </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Δεδομένα </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>

Pager

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

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

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

<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>

Ετικέτες

Σήματα

Εύκολα πτυσσόμενο

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

Μονάδα ηρώων

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

<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>   

Παράβλεψη ειδοποιήσεων μέσω JavaScript

Χρησιμοποιήστε την προσθήκη ειδοποιήσεων jQuery για γρήγορη και εύκολη απόρριψη ειδοποιήσεων.

Επιλογές

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

<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, κ.λπ.) που διαθέτουν μια εικόνα με αριστερή ή δεξιά στοίχιση μαζί με περιεχόμενο κειμένου.

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

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

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

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.

<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>

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

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

<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 ; 
  &: πριν ,
  &: μετά από {
    οθόνη : πίνακας ;
    περιεχόμενο : "" ; 
  }
  &: μετά από {
    ξεκάθαρο : και τα δύο ;
  }
}