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

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

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

• Σπίτι
• Βοήθεια
• Αναπτυσσόμενο
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• Σπίτι
• Βοήθεια
• Αναπτυσσόμενο
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

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

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

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

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

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

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

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

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

Για ευθυγραμμισμένες καρτέλες δεξιά ή αριστερά, τυλίξτε το .nav-tabsκαι .tab-contentμέσα .tabbable.

Απλή σήμανση

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

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

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

Αναστρέψτε τη σειρά του 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>

Σκαλωσιές 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 εικονοστοιχεία ή περισσότερα padding στο <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και .search-queryστην είσοδο για εξειδικευμένα στυλ στη γραμμή πλοήγησης.

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

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

Τυλίξτε συμβολοσειρές κειμένου σε ένα <.navbar-text>, συνήθως πάνω σε μια <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>

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

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

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

Οι σύνδεσμοι τηλεειδοποίησης χρησιμοποιούν επίσης τη γενική .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>

Σχετικά με

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

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

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

Σήμανση

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

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

Ένα απλό κέλυφος για τον 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 = "ειδοποίηση" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Προειδοποίηση! </strong> Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.
</div>

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

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

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

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

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

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

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

×

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

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

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