Σχετικά με τα modals

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

Στατικό παράδειγμα

Παρακάτω είναι ένα στατικά αποδοθέν modal.

Ζωντανή επίδειξη

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

Χρήση bootstrap-modal

Καλέστε το modal μέσω javascript:

$ ( '#myModal' ). modal ( επιλογές )

Επιλογές

Σήμανση

Μπορείτε να ενεργοποιήσετε τα modals στη σελίδα σας εύκολα χωρίς να χρειάζεται να γράψετε ούτε μια γραμμή javascript. Απλώς ορίστε data-toggle="modal"ένα στοιχείο ελεγκτή με ένα data-target="#foo"ή το href="#foo"οποίο αντιστοιχεί σε ένα αναγνωριστικό στοιχείου modal, και όταν κάνετε κλικ, θα εκκινήσει το modal σας.

Επίσης, για να προσθέσετε επιλογές στο modal instance, απλώς συμπεριλάβετέ τις ως πρόσθετα χαρακτηριστικά δεδομένων είτε στο στοιχείο ελέγχου είτε στην ίδια τη σήμανση modal.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Εκκίνηση Modal </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> Modal header </h3>
  </div>
  <div class = "modal-body" > 
    <p> Ένα ωραίο σώμα… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Κλείσιμο </a>  
    <a href = "#" class = "btn btn-primary" > Αποθήκευση αλλαγών </a>  
  </div>
</div>

Μέθοδοι

.modal(επιλογές)

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

$ ( '#myModal' ). τροπικό ({
  πληκτρολόγιο : ψευδής 
})

.modal('εναλλαγή')

Εναλλάσσει χειροκίνητα ένα modal.

$ ( '#myModal' ). modal ( 'εναλλαγή' )

.modal('show')

Ανοίγει χειροκίνητα ένα modal.

$ ( '#myModal' ). modal ( 'show' )

.modal('απόκρυψη')

Χειροκίνητα κρύβει ένα modal.

$ ( '#myModal' ). modal ( «απόκρυψη» )

Εκδηλώσεις

Η κλάση modal του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα του modal.

$ ( '#myModal' ). on ( 'κρυφό' , συνάρτηση () {   
  // Κάνε κάτι…
})

Σχετικά με τα αναπτυσσόμενα

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

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

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

• Κανονικός σύνδεσμος
• Αναπτυσσόμενο
  • Action
  • Another action
  • Something else here
  • Separated link
• Αναπτυσσόμενο 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Αναπτυσσόμενο μενού 3
  • Action
  • Another action
  • Something else here
  • Separated link

Χρησιμοποιώντας bootstrap-dropdown.js

Καλέστε τα αναπτυσσόμενα μενού μέσω javascript:

$ ( '.dropdown-toggle' ). αναπτυσσόμενο μενού ()

Σήμανση

Για γρήγορη προσθήκη αναπτυσσόμενης λειτουργικότητας σε οποιοδήποτε στοιχείο, απλώς προσθέστε data-toggle="dropdown"και οποιοδήποτε έγκυρο αναπτυσσόμενο μενού εκκίνησης θα ενεργοποιηθεί αυτόματα.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Κανονικός σύνδεσμος </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Αναπτυσσόμενο
      <b class = "caret" ></b> 
    </a>
    <ul class = "αναπτυσσόμενο μενού" > 
      <li><a href = "#" > Ενέργεια </a></li> 
      <li><a href = "#" > Μια άλλη ενέργεια </a></li> 
      <li><a href = "#" > Κάτι άλλο εδώ </a></li> 
      <li class = "διαιρέτης" ></li> 
      <li><a href = "#" > Διαχωρισμένος σύνδεσμος </a></li> 
    </ul>
  </li>
  ...
</ul>

Μέθοδοι

$().dropdown()

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

Η προσθήκη ScrollSpy προορίζεται για αυτόματη ενημέρωση στόχων πλοήγησης με βάση τη θέση κύλισης.

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

Κάντε κύλιση στην παρακάτω περιοχή και παρακολουθήστε την ενημέρωση πλοήγησης. Τα αναπτυσσόμενα υποστοιχεία θα επισημανθούν επίσης. Δοκίμασέ το!

Χρήση bootstrap-scrollspy.js

Καλέστε το scrollspy μέσω javascript:

$ ( '#navbar' ). scrollspy ()

Σήμανση

Για να προσθέσετε εύκολα τη συμπεριφορά scrollspy στην πλοήγησή σας στην επάνω γραμμή, απλώς προσθέστε data-spy="scroll"το στο στοιχείο που θέλετε να κατασκοπεύσετε (συνήθως αυτό θα ήταν το σώμα).

<body data-spy = "scroll" > ... </body>  

Επιλογές

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

Παραδείγματα καρτελών

Κάντε κλικ στις καρτέλες παρακάτω για εναλλαγή μεταξύ κρυφών παραθύρων, ακόμη και μέσω αναπτυσσόμενων μενού.

• Σπίτι
• Προφίλ
• Αναπτυσσόμενο
  • @fat
  • @mdo

Χρησιμοποιώντας bootstrap-tab.js

Ενεργοποίηση καρτελών με tabbable μέσω javascript:

$ ( '#myTab' ). καρτέλα ( 'εμφάνιση' )

Σήμανση

Μπορείτε να ενεργοποιήσετε μια καρτέλα ή ένα χάπι πλοήγησης χωρίς να γράψετε javascript απλά προσδιορίζοντας data-toggle="tab"ή data-toggle="pill"σε ένα στοιχείο.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Αρχική σελίδα </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Προφίλ </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Μηνύματα </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Ρυθμίσεις </a></li>  
</ul>

Μέθοδοι

καρτέλα $().

Ενεργοποιεί ένα στοιχείο καρτέλας και ένα κοντέινερ περιεχομένου. Η καρτέλα θα πρέπει να έχει είτε "στόχο δεδομένων" ή "href" που στοχεύει έναν κόμβο κοντέινερ στο dom.

<ul class = "nav nav-tabs" > 
  <li class = "active" ><a href = "#home" > Αρχική σελίδα </a></li>  
  <li><a href = "#profile" > Προφίλ </a></li> 
  <li><a href = "#messages" > Μηνύματα </a></li> 
  <li><a href = "#settings" > Ρυθμίσεις </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane ενεργό" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<σενάριο>
  $ ( συνάρτηση () {  
    $ ( '.tabs a:last' ). καρτέλα ( 'εμφάνιση' )
  })
</script>

Εκδηλώσεις

$ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {   
  ε . στόχος // ενεργοποιημένη καρτέλα
  ε . relatedTarget // προηγούμενη καρτέλα
})

Σχετικά με τις συμβουλές εργαλείων

Εμπνευσμένο από το εξαιρετικό πρόσθετο jQuery.tipsy γραμμένο από τον Jason Frame. Οι συμβουλές εργαλείων είναι μια ενημερωμένη έκδοση, η οποία δεν βασίζεται σε εικόνες, χρησιμοποιεί css3 για κινούμενα σχέδια και χαρακτηριστικά δεδομένων για τοπική αποθήκευση τίτλων.

Παράδειγμα χρήσης Συμβουλών εργαλείων

Τοποθετήστε το δείκτη του ποντικιού στους παρακάτω συνδέσμους για να δείτε συμβουλές εργαλείων:

Χρήση bootstrap-tooltip.js

Ενεργοποιήστε την επεξήγηση εργαλείου μέσω javascript:

$ ( '#example' ). συμβουλή εργαλείου ( επιλογές )

Επιλογές

Σήμανση

Για λόγους απόδοσης, το Tooltip και το Popover data-apis επιλέγονται. Εάν θέλετε να τα χρησιμοποιήσετε, απλώς καθορίστε μια επιλογή επιλογέα.

<a href = "#" rel = "tooltip" title = "first tooltip" > τοποθετήστε το δείκτη του ποντικιού πάνω μου </a>   

Μέθοδοι

$().tooltip(επιλογές)

Προσαρτά έναν χειριστή συμβουλών εργαλείου σε μια συλλογή στοιχείων.

.tooltip('show')

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

$ ( '#στοιχείο' ). επεξήγηση εργαλείου ( 'εμφάνιση' )

.tooltip('απόκρυψη')

Κρύβει την επεξήγηση εργαλείου ενός στοιχείου.

$ ( '#στοιχείο' ). επεξήγηση εργαλείου ( «απόκρυψη» )

.tooltip('εναλλαγή')

Εναλλάσσει την επεξήγηση εργαλείου ενός στοιχείου.

$ ( '#στοιχείο' ). επεξήγηση εργαλείου ( 'εναλλαγή' )

Σχετικά με τα popovers

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

* Απαιτείται να συμπεριληφθεί επεξήγηση εργαλείου

Παράδειγμα hover popover

Τοποθετήστε το δείκτη του ποντικιού πάνω από το κουμπί για να ενεργοποιήσετε το popover.

Χρήση bootstrap-popover.js

Ενεργοποίηση popovers μέσω javascript:

$ ( '#example' ). popover ( επιλογές )

Επιλογές

Σήμανση

Για λόγους απόδοσης, το Tooltip και το Popover data-apis επιλέγονται. Εάν θέλετε να τα χρησιμοποιήσετε, απλώς καθορίστε μια επιλογή επιλογής.

Μέθοδοι

$().popover(επιλογές)

Αρχικοποιεί τα popover για μια συλλογή στοιχείων.

.popover('show')

Αποκαλύπτει ένα popover στοιχείων.

$ ( '#στοιχείο' ). popover ( 'show' )

.popover ('απόκρυψη')

Κρύβει ένα popover στοιχείων.

$ ( '#στοιχείο' ). popover ( «απόκρυψη» )

.popover ('εναλλαγή')

Εναλλάσσει ένα popover στοιχείων.

$ ( '#στοιχείο' ). popover ( «εναλλαγή» )

Σχετικά με τις ειδοποιήσεις

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

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

Η προσθήκη ειδοποιήσεων λειτουργεί σε κανονικά μηνύματα ειδοποίησης και αποκλείει μηνύματα.

Χρήση bootstrap-alert.js

Ενεργοποίηση απόρριψης μιας ειδοποίησης μέσω javascript:

$ ( ".alert" ). ειδοποίηση ()

Σήμανση

Απλώς προσθέστε data-dismiss="alert"το στο κουμπί κλεισίματος για να δώσετε αυτόματα μια λειτουργία κλεισίματος ειδοποίησης.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Μέθοδοι

$().alert()

Αναδιπλώνει όλες τις ειδοποιήσεις με λειτουργία κλεισίματος. Για να ενεργοποιήσετε τις ειδοποιήσεις σας όταν είναι κλειστές, βεβαιωθείτε ότι έχουν ήδη εφαρμοστεί το .fadeκαι η .inκλάση σε αυτές.

.alert('close')

Κλείνει μια ειδοποίηση.

$ ( ".alert" ). ειδοποίηση ( «κλείσιμο» )

Εκδηλώσεις

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

$ ( '#my-alert' ). bind ( 'κλειστό' , συνάρτηση () {   
  // Κάνε κάτι…
})

Σχετικά με

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

Παραδείγματα χρήσεων

Χρησιμοποιήστε την προσθήκη κουμπιών για καταστάσεις και εναλλαγές.

Χρήση bootstrap-button.js

Ενεργοποίηση κουμπιών μέσω javascript:

$ ( '.tabs' ). κουμπί ()

Σήμανση

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

<!-- Προσθήκη data-toggle="button" για να ενεργοποιήσετε την εναλλαγή σε ένα μόνο κουμπί -->
<button class = "btn" data-toggle = "button" > Μεμονωμένη εναλλαγή </button>  
 
<!-- Προσθήκη data-toggle="buttons-checkbox" για εναλλαγή στυλ πλαισίου ελέγχου στο btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Αριστερά </button> 
  <button class = "btn" > Μεσαία </button> 
  <button class = "btn" > Δεξιά </button> 
</div>
 
<!-- Προσθήκη data-toggle="buttons-radio" για εναλλαγή στυλ ραδιοφώνου στο btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Αριστερά </button> 
  <button class = "btn" > Μεσαία </button> 
  <button class = "btn" > Δεξιά </button> 
</div>

Μέθοδοι

$().button('toggle')

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

<button class = "btn" data-toggle = "button" > … </button>   

$().button('loading')

Ορίζει την κατάσταση του κουμπιού σε φόρτωση - απενεργοποιεί το κουμπί και εναλλάσσει το κείμενο σε κείμενο φόρτωσης. Η φόρτωση κειμένου θα πρέπει να οριστεί στο στοιχείο κουμπιού χρησιμοποιώντας το χαρακτηριστικό data data-loading-text.

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().button('reset')

Επαναφέρει την κατάσταση του κουμπιού - αλλάζει κείμενο σε αρχικό κείμενο.

$().button(string)

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

<button class = "btn" data-complete-text = "ολοκληρώθηκε!" > ... </button>   
<σενάριο>
  $ ( '.btn' ). κουμπί ( 'ολοκλήρωση' )
</script>

Σχετικά με

Αποκτήστε στυλ βάσης και ευέλικτη υποστήριξη για πτυσσόμενα εξαρτήματα όπως ακορντεόν και πλοήγηση.

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

Χρησιμοποιώντας το πρόσθετο σύμπτυξης, δημιουργήσαμε ένα απλό widget στυλ ακορντεόν:

Χρήση bootstrap-collapse.js

Ενεργοποίηση μέσω javascript:

$ ( ".collapse" ). κατάρρευση ()

Επιλογές

Σήμανση

Απλώς προσθέστε data-toggle="collapse"και ένα data-targetστοιχείο για να εκχωρήσετε αυτόματα τον έλεγχο ενός πτυσσόμενου στοιχείου. Το data-targetχαρακτηριστικό δέχεται έναν επιλογέα css στον οποίο εφαρμόζεται η σύμπτυξη. Φροντίστε να προσθέσετε την κλάση collapseστο πτυσσόμενο στοιχείο. Εάν θέλετε να είναι ανοιχτό από προεπιλογή, προσθέστε την πρόσθετη κλάση in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  απλό πτυσσόμενο
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Μέθοδοι

.collapse(επιλογές)

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

$ ( '#myCollapsible' ). κατάρρευση ({
  εναλλαγή : ψευδής 
})

.collapse ('εναλλαγή')

Εναλλάσσει ένα πτυσσόμενο στοιχείο σε εμφάνιση ή απόκρυψη.

.collapse ('show')

Εμφανίζει ένα πτυσσόμενο στοιχείο.

.collapse ('απόκρυψη')

Κρύβει ένα πτυσσόμενο στοιχείο.

Εκδηλώσεις

Η κλάση κατάρρευσης του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα κατάρρευσης.

$ ( '#myCollapsible' ). on ( 'κρυφό' , συνάρτηση () {   
  // Κάνε κάτι…
})

Σχετικά με

Ένα γενικό πρόσθετο για την ανακύκλωση στοιχείων. Ένα γαϊτανάκι.

Παράδειγμα καρουζέλ

Δείτε το slideshow παρακάτω.

Πρώτη ετικέτα μικρογραφίας

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.

Τρίτη ετικέτα μικρογραφίας

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.

‹ ›

Χρήση bootstrap-carousel.js

Κλήση μέσω javascript:

$ ( '.καρουσέλ' ). καρουζέλ ()

Επιλογές

Σήμανση

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

<div id = "myCarousel" class = "carousel" >  
  <!-- Είδη καρουζέλ -->
  <div class = "καρουσέλ-εσωτερικό" > 
    <div class = "ενεργό στοιχείο" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Περιήγηση καρουζέλ -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Μέθοδοι

.καρουσέλ(επιλογές)

Αρχικοποιεί το καρουζέλ με προαιρετικές επιλογές objectκαι ξεκινάει να περιηγείται στα αντικείμενα.

$ ( '.καρουσέλ' ). καρουζέλ ({
  διάστημα : 2000 
})

.carousel('cycle')

Κυκλοφορεί μέσα από τα στοιχεία καρουζέλ από αριστερά προς τα δεξιά.

.carousel ('παύση')

Σταματά το καρουζέλ από το να περνάει με το ποδήλατο μέσα από αντικείμενα.

.καρουσέλ(αριθμός)

Κυκλοφορεί το καρουζέλ σε ένα συγκεκριμένο πλαίσιο (με βάση το 0, παρόμοιο με έναν πίνακα).

.carousel('προηγούμενο')

Κύκλοι στο προηγούμενο στοιχείο.

.καρουσέλ ('επόμενο')

Κύκλοι στο επόμενο στοιχείο.

Εκδηλώσεις

Η κατηγορία καρουζέλ του Bootstrap εκθέτει δύο συμβάντα για σύνδεση στη λειτουργικότητα καρουζέλ.

Σχετικά με

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

Παράδειγμα

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

Χρησιμοποιώντας bootstrap-typeahead.js

Καλέστε την πληκτρολόγηση μέσω javascript:

$ ( '.typeahead' ). γραμματοσειρά ()

Επιλογές

Σήμανση

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

<input type = "text" data- provide = "typeahead" >  

Μέθοδοι

.typeahead(επιλογές)

Αρχικοποιεί μια είσοδο με κεφαλίδα.