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

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

Μπορείτε επίσης να συνδυάσετε σετ <div class="btn-group">σε ένα <div class="btn-toolbar">για πιο σύνθετα έργα.

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Και με μια γραμμή εργαλείων για πολλές ομάδες:

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

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

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

Λάβετε το javascript »

Το κεφάλι ψηλά

Το CSS για ομάδες κουμπιών βρίσκεται σε ξεχωριστό αρχείο, button-groups.less.

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

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

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

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

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

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

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

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

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

Γιατί ταμπλέτες και χάπια

Οι καρτέλες και τα χάπια στο Bootstrap είναι χτισμένα σε έναν <ul>με τον ίδιο πυρήνα HTML, μια λίστα συνδέσμων. Εναλλάξτε μεταξύ καρτελών ή χαπιών μόνο με μια κατηγορία.

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

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

Πάρτε τακτικά <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>ετικέτα με την τάξη και είστε έτοιμοι.

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

Πάρτε μια λίστα με συνδέσμους και προσθέστε 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 σε τέσσερα στυλ: επάνω (προεπιλογή), δεξιά, κάτω και αριστερά.

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

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

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

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

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

Αποκτήστε το 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>

Σκαλωσιές Navbar

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

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

Για να στερεώσετε τη γραμμή πλοήγησης στο επάνω μέρος της θύρας προβολής, προσθέστε .navbar-fixed-topστο πιο εξωτερικό div, .navbar. Στο CSS σας, θα πρέπει επίσης να λάβετε υπόψη την επικάλυψη που προκαλεί προσθέτοντας padding-top: 40px;στο <body>.

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

Μάρκα

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

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

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

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

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

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

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

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

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

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

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

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

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

• Σπίτι

• Αρχική σελίδα /
• Βιβλιοθήκη

• Αρχική σελίδα /
• Βιβλιοθήκη /
• Δεδομένα

Σήμανση

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

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

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

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

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

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

• Προηγούμενος
• Επόμενο

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

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

Από προεπιλογή, οι μικρογραφίες του 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" > × </a> 
  <strong> Προειδοποίηση! </strong> Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.
</div>

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

<div class = "alert alert-block" > 
  <a class = "close" > × </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>

Ριγέ

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

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

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

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

<div class = "πρόοδος πρόοδος-κίνδυνος 
     ενεργή με λωρίδες προόδου" >
  <div class = "μπαρ" 
       στυλ = " πλάτος : 40 %;  " </div>
</div>

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

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

• .progress-info
• .progress-success
• .progress-danger

Εναλλακτικά, μπορείτε να προσαρμόσετε τα αρχεία LESS και να ρίξετε τα δικά σας χρώματα και μεγέθη.

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

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

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

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

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

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

Πηγάδια

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

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

Σήματα

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

<span class = "σήμα" > 3 </div> 

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

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

×

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