Συστατικά

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Λάβετε το javascript »

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

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

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

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

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

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

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

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

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

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

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

Μεγέθη

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

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

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

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

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

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

Τα αναπτυσσόμενα μενού μπορούν επίσης να εναλλάσσονται από κάτω προς τα πάνω προσθέτοντας μια κλάση στον άμεσο γονέα του .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κλάσης.

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

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

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

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

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

Πάρτε τακτικά <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>

Με δυνατότητα στοίβαξης Κάντε τις καρτέλες ή τα χάπια κάθετα

Πώς να τα στοιβάζετε

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

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

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

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

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

Αναπτυσσόμενα μενού Για προηγμένα στοιχεία πλοήγησης

Τα πλούσια μενού γίνονται εύκολα

Τα αναπτυσσόμενα μενού στις καρτέλες και τα χάπια Bootstrap είναι εξαιρετικά εύκολα και απαιτούν μόνο λίγο επιπλέον HTML και ένα ελαφρύ πρόσθετο jQuery.

Μεταβείτε στη σελίδα Javascript για να διαβάσετε τα έγγραφα σχετικά με την προετοιμασία αναπτυσσόμενων μενού στο Bootstrap.

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

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

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

με εικονίδια

Οι λίστες πλοήγησης είναι επίσης εύκολο να εξοπλιστούν με εικονίδια. Προσθέστε την κατάλληλη <i>ετικέτα με την τάξη και είστε έτοιμοι.

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

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

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

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

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

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

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

Το ίδιο παράδειγμα, αλλά με <i>ετικέτες για εικονίδια.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Βιβλιοθήκη
    </a>
  </li>
  ...
</ul>

Πλοήγηση με καρτέλες Δώστε ζωή στις καρτέλες μέσω Javascript

Τι περιλαμβάνεται

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

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

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

Για να κάνετε τις καρτέλες με καρτέλες, τυλίξτε τις .nav-tabsσε ένα άλλο div με την κλάση .tabbable.

Είμαι στην Ενότητα 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Προσαρμοσμένο πρόσθετο jQuery

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

Αποκτήστε το Javascript →

Απλή σήμανση

Η χρήση καρτελών με tabbable απαιτεί ένα div αναδίπλωσης, ένα σύνολο καρτελών και ένα σύνολο παραθύρων περιεχομένου με tabbable.

<div class = "tabable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Ενότητα 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Ενότητα 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane ενεργό" id = "1" >  
      <p> Είμαι στην Ενότητα 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Γεια σας, είμαι στην Ενότητα 2. </p>
    </div>
  </div>
</div>

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

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

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

Είμαι στο τμήμα Α.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

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

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

Είμαι στο τμήμα Α.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

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

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

Είμαι στο τμήμα Α.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

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

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

Σκαλωσιές Navbar

Η γραμμή πλοήγησης απαιτεί μόνο μερικά div για να δομηθεί καλά για στατική ή σταθερή εμφάνιση.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Διορθώθηκε η γραμμή πλοήγησης

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

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

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

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

Μάρκα

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

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

Φόρμες στη γραμμή πλοήγησης

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

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

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

Προαιρετική παραλλαγή απόκρισης

Ανάλογα με την ποσότητα του περιεχομένου στην επάνω γραμμή σας, ίσως θελήσετε να εφαρμόσετε τις αποκριτικές επιλογές. Για να το κάνετε αυτό, τυλίξτε το περιεχόμενο πλοήγησής σας σε ένα που περιέχει 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" > 
        <!-- .nav, .navbar-search, .navbar-form, κ.λπ. -->
      </div>
 
    </div>
  </div>
</div>

Ψηλά το κεφάλι! Η αποκριτική γραμμή πλοήγησης απαιτεί την προσθήκη σύμπτυξης .

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

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

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

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

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

Προσθήκη αναπτυσσόμενων μενού

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

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

Αποκτήστε το Javascript →

Κείμενο στη γραμμή πλοήγησης

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

Γιατί να τα χρησιμοποιήσετε

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

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

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

Σήμανση

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

<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, ιδανική για εφαρμογές και αποτελέσματα αναζήτησης. Το μεγάλο μπλοκ είναι δύσκολο να το χάσετε, εύκολα κλιμακώνεται και παρέχει μεγάλες περιοχές κλικ.

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

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

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

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

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

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

Σήμανση

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

<div class = "σελιδοποίηση" > 
  <ul>
    <li><a href = "#" > Προηγ . </a></li> 
    <li class = "ενεργός" > 
      <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 = "#" > Επόμενο </a></li> 
  </ul>
</div>

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

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

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

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

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

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

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

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

Ετικέτες	Σήμανση
Προκαθορισμένο	`<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-error">6</span>`
Πληροφορίες	8	`<span class="badge badge-info">8</span>`
Αντίστροφος	10	`<span class="badge badge-inverse">10</span>`

Μονάδα ηρώων

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

Σήμανση

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

<div class = "ηρωική μονάδα" > 
  <h1> Επικεφαλίδα </h1>
  <p> Περιγραφή </p>
  <p>
    <a class = "btn btn-κύριο btn-large" > 
      Μάθε περισσότερα
    </a>
  </p>
</div>

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

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

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

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

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

<div class = "page-header" > 
  <h1> Παράδειγμα κεφαλίδας σελίδας </h1>
</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για τον έλεγχο των διαστάσεων των μικρογραφιών.

Η σήμανση

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "ειδοποίηση ειδοποίησης-σφάλμα" > 
  ...
</div>

Επιτυχία

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

<div class = "ειδοποίηση ειδοποίησης-επιτυχία" > 
  ...
</div>

Πληροφορίες

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

<div class = "alert alert-info" > 
  ...
</div>

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

Βασικός

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

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

Ριγέ

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

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

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

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

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

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

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

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

Ριγέ μπάρες

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

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

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

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

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

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

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

Πηγάδια

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

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

<div class = "καλά" > 
  ...
</div>

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

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

<a class = "close" > × </a>

Ομάδες κουμπιών Ενώστε τα κουμπιά για περισσότερη λειτουργικότητα που μοιάζει με τη γραμμή εργαλείων

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

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

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

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

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

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

Αναπτυσσόμενα μενού κουμπιών Ενσωματωμένα σε ομάδες κουμπιών για την παροχή μενού με βάση τα συμφραζόμενα

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

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

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

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

Απαιτεί javascript

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

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

Μεγέθη

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

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

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

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

Ισχυρή βασική κατηγορία

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

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

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

Βασικά χάπια

Με δυνατότητα στοίβαξης Κάντε τις καρτέλες ή τα χάπια κάθετα

Πώς να τα στοιβάζετε

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

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

Αναπτυσσόμενα μενού Για προηγμένα στοιχεία πλοήγησης

Τα πλούσια μενού γίνονται εύκολα

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

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

Λίστες πλοήγησης Δημιουργήστε απλές στοιβαγμένες πλοήγησης, ιδανικές για πλευρικές γραμμές

Πλοήγηση σε στυλ εφαρμογής

με εικονίδια

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

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

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

Πλοήγηση με καρτέλες Δώστε ζωή στις καρτέλες μέσω Javascript

Τι περιλαμβάνεται

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

Προσαρμοσμένο πρόσθετο jQuery

Απλή σήμανση

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

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

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

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

Navbar

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

Σκαλωσιές Navbar

Διορθώθηκε η γραμμή πλοήγησης

Μάρκα

Φόρμες στη γραμμή πλοήγησης

Προαιρετική παραλλαγή απόκρισης

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

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

Προσθήκη αναπτυσσόμενων μενού

Κείμενο στη γραμμή πλοήγησης

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

Γιατί να τα χρησιμοποιήσετε

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

Σήμανση

Σελιδοποίηση Δύο επιλογές για σελιδοποίηση μέσω περιεχομένου

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

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

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

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

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

Σήμανση

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

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

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

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

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

Ενσωματωμένες ετικέτες Προσθέστε ετικέτα και σχολιάστε κείμενο

Σήματα Ενδείξεις και πλήθος μη αναγνωσμένων

Σχετικά με

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

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