Ατομικό ή μεταγλωττισμένο

Τα πρόσθετα μπορούν να συμπεριληφθούν μεμονωμένα (αν και ορισμένα απαιτούν εξαρτήσεις) ή όλα ταυτόχρονα. Τόσο το bootstrap.js όσο και το bootstrap.min.js περιέχουν όλες τις προσθήκες σε ένα μόνο αρχείο.

Χαρακτηριστικά δεδομένων

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

Τούτου λεχθέντος, σε ορισμένες περιπτώσεις μπορεί να είναι επιθυμητό να απενεργοποιήσετε αυτήν τη λειτουργία. Επομένως, παρέχουμε επίσης τη δυνατότητα απενεργοποίησης του API χαρακτηριστικού δεδομένων αποδεσμεύοντας όλα τα συμβάντα στον χώρο ονομάτων σώματος με "data-api"". Αυτό μοιάζει με αυτό:

$ ( «σώμα» ). απενεργοποιημένο ( '.data-api' )

Εναλλακτικά, για να στοχεύσετε μια συγκεκριμένη προσθήκη, απλώς συμπεριλάβετε το όνομα της προσθήκης ως χώρο ονομάτων μαζί με τον χώρο ονομάτων του data-api ως εξής:

$ ( «σώμα» ). off ( '.alert.data-api' )

API μέσω προγραμματισμού

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

$ ( ".btn.danger" ). κουμπί ( "εναλλαγή" ). addClass ( "λίπος" )

Όλες οι μέθοδοι πρέπει να δέχονται ένα αντικείμενο προαιρετικών επιλογών, μια συμβολοσειρά που στοχεύει μια συγκεκριμένη μέθοδο ή τίποτα (που εκκινεί μια προσθήκη με προεπιλεγμένη συμπεριφορά):

$ ( "#myModal" ). modal () // αρχικοποιήθηκε με προεπιλογές                       
$ ( "#myModal" ). modal ({ keyboard : false }) // αρχικοποιήθηκε χωρίς πληκτρολόγιο     
$ ( "#myModal" ). modal ( 'show' ) // αρχικοποιεί και επικαλείται την εμφάνιση αμέσως                

Κάθε πρόσθετο εκθέτει επίσης τον ακατέργαστο κατασκευαστή του σε μια ιδιότητα "Constructor": $.fn.popover.Constructor. Εάν θέλετε να λάβετε μια συγκεκριμένη παρουσία προσθήκης, ανακτήστε την απευθείας από ένα στοιχείο: $('[rel=popover]').data('popover').

Καμία σύγκρουση

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

var bootstrapButton = $ . fn . κουμπί . noConflict () // επιστροφή $.fn.button στην τιμή που είχε εκχωρηθεί προηγουμένως 
$ . fn . bootstrapBtn = bootstrapButton             // δώσει $().bootstrapBtn τη λειτουργία εκκίνησης

Εκδηλώσεις

Το Bootstrap παρέχει προσαρμοσμένα συμβάντα για τις περισσότερες μοναδικές ενέργειες της προσθήκης. Γενικά, αυτά έρχονται σε αόριστο και παρελθοντικό - όπου το αόριστο (π.χ. show) ενεργοποιείται στην αρχή ενός γεγονότος και η παρελθοντική του μορφή (π. shown) ενεργοποιείται κατά την ολοκλήρωση μιας ενέργειας.

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

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    εάν (! δεδομένα ) επιστρέψουν e . preventDefault () // σταματά την εμφάνιση του modal   
})

Σχετικά με τις μεταβάσεις

Για απλά εφέ μετάβασης, συμπεριλάβετε το bootstrap-transition.js μαζί με τα άλλα αρχεία JS. Εάν χρησιμοποιείτε το μεταγλωττισμένο (ή ελαχιστοποιημένο) bootstrap.js , δεν χρειάζεται να το συμπεριλάβετε — είναι ήδη εκεί.

Θήκες χρήσης

Μερικά παραδείγματα της προσθήκης μετάβασης:

• Ολίσθηση ή ξεθώριασμα στα modals
• Ξεθώριασμα καρτελών
• Εξασθένιση των ειδοποιήσεων
• Συρόμενα τζάμια καρουζέλ

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

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

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

Ένα αποδοθέν modal με κεφαλίδα, σώμα και σύνολο ενεργειών στο υποσέλιδο.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <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 μέσω JavaScript κάνοντας κλικ στο κουμπί παρακάτω. Θα γλιστρήσει προς τα κάτω και θα ξεθωριάσει από την κορυφή της σελίδας.

<!-- Κουμπί ενεργοποίησης modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Έναρξη λειτουργίας επίδειξης </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Ένα ωραίο σώμα… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Κλείσιμο </button>   
    <button class = "btn btn-primary" > Αποθήκευση αλλαγών </button> 
  </div>
</div>

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Ενεργοποιήστε ένα modal χωρίς εγγραφή JavaScript. Ρυθμίστε data-toggle="modal"σε ένα στοιχείο ελεγκτή, όπως ένα κουμπί, μαζί με ένα data-target="#foo"ή href="#foo"για να στοχεύσετε ένα συγκεκριμένο modal για εναλλαγή.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Εκκίνηση τρόπου λειτουργίας </button>   

Μέσω JavaScript

Κλήση ενός modal με αναγνωριστικό myModalμε μία μόνο γραμμή JavaScript:

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

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Μέθοδοι

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

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

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

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

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

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

.modal('show')

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

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

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

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

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

Εκδηλώσεις

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

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

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

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

Μέσα σε μια γραμμή πλοήγησης

Μέσα σε καρτέλες

Χρήση

Μέσω χαρακτηριστικών δεδομένων

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

<div class = "αναπτυσσόμενο μενού" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Αναπτυσσόμενη ενεργοποίηση </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Για να διατηρήσετε ανέπαφες τις διευθύνσεις URL, χρησιμοποιήστε το data-targetχαρακτηριστικό αντί για href="#".

<div class = "αναπτυσσόμενο μενού" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Αναπτυσσόμενο
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Μέσω JavaScript

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

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

Επιλογές

Κανένας

Μέθοδοι

$().dropdown('toggle')

Api μέσω προγραμματισμού για εναλλαγή μενού για μια δεδομένη γραμμή πλοήγησης ή πλοήγηση με καρτέλες.

Παράδειγμα στο navbar

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

Χρήση

Μέσω χαρακτηριστικών δεδομένων

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

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

Μέσω JavaScript

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

$ ( '#navbar' ). scrollspy ()

Μέθοδοι

.scrollspy('refresh')

Όταν χρησιμοποιείτε το scrollspy σε συνδυασμό με την προσθήκη ή την αφαίρεση στοιχείων από το DOM, θα πρέπει να καλέσετε τη μέθοδο ανανέωσης ως εξής:

$ ( '[data-spy="scroll"]' ). καθεμία ( συνάρτηση () {  
  var $spy = $ ( αυτό ). scrollspy ( «ανανέωση» )
});

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-offset="".

Εκδηλώσεις

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

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

Χρήση

Ενεργοποίηση καρτελών με καρτέλες μέσω JavaScript (κάθε καρτέλα πρέπει να ενεργοποιηθεί ξεχωριστά):

$ ( '#myTab a' ). κλικ ( συνάρτηση ( e ) {  
  ε . preventDefault ();
  $ ( αυτό ). καρτέλα ( 'εμφάνιση' );
})

Μπορείτε να ενεργοποιήσετε μεμονωμένες καρτέλες με διάφορους τρόπους:

$ ( '#myTab a[href="#profile"]' ). καρτέλα ( 'εμφάνιση' ); // Επιλέξτε καρτέλα με όνομα 
$ ( '#myTab a:first' ). καρτέλα ( 'εμφάνιση' ); // Επιλέξτε την πρώτη καρτέλα 
$ ( '#myTab a:last' ). καρτέλα ( 'εμφάνιση' ); // Επιλέξτε την τελευταία καρτέλα 
$ ( '#myTab li:eq(2) a' ). καρτέλα ( 'εμφάνιση' ); // Επιλέξτε τρίτη καρτέλα (με ευρετήριο 0) 

Σήμανση

Μπορείτε να ενεργοποιήσετε μια καρτέλα ή ένα χάπι πλοήγησης χωρίς να γράψετε JavaScript προσδιορίζοντας απλά data-toggle="tab"ή data-toggle="pill"σε ένα στοιχείο. Η προσθήκη των κλάσεων navκαι nav-tabsστην καρτέλα ulθα εφαρμόσει το στυλ της καρτέλας Bootstrap.

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

Μέθοδοι

καρτέλα $().

Ενεργοποιεί ένα στοιχείο καρτέλας και ένα κοντέινερ περιεχομένου. Η καρτέλα πρέπει να έχει είτε έναν data-targetείτε έναν hrefκόμβο στόχευσης κοντέινερ στο DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <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>
 
<σενάριο>
  $ ( συνάρτηση () {  
    $ ( '#myTab a:last' ). καρτέλα ( 'εμφάνιση' );
  })
</script>

Εκδηλώσεις

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

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

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

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

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

Τέσσερις κατευθύνσεις

Συμβουλές εργαλείων σε ομάδες εισόδου

Όταν χρησιμοποιείτε συμβουλές εργαλείων και popovers με τις ομάδες εισόδου Bootstrap, θα πρέπει να ορίσετε την containerεπιλογή (που τεκμηριώνεται παρακάτω) για να αποφύγετε ανεπιθύμητες παρενέργειες.

Χρήση

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

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

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-animation="".

Σήμανση

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

Μέθοδοι

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

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

.tooltip('show')

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

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

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

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

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

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

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

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

.tooltip('destroy')

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

$ ( '#στοιχείο' ). συμβουλή εργαλείου ( «καταστρέφω» )

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

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

Στατικό popover

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

Καμία σήμανση που εμφανίζεται ως popover δεν δημιουργείται από JavaScript και περιεχόμενο εντός ενός dataχαρακτηριστικού.

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

Τέσσερις κατευθύνσεις

Χρήση

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

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

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-animation="".

Σήμανση

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

Μέθοδοι

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

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

.popover('show')

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

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

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

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

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

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

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

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

.popover ('καταστρέφω')

Κρύβει και καταστρέφει το popover ενός στοιχείου.

$ ( '#στοιχείο' ). popover ( «καταστρέφω» )

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

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

Χρήση

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

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

Σήμανση

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

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

Μέθοδοι

$().alert()

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

.alert('close')

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

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

Εκδηλώσεις

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

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

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

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

Πολιτειακός

Προσθήκη data-loading-text="Loading..."για χρήση μιας κατάστασης φόρτωσης σε ένα κουμπί.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Κατάσταση φόρτωσης </button>   

Μονή εναλλαγή

Προσθήκη data-toggle="button"για ενεργοποίηση εναλλαγής σε ένα μόνο κουμπί.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Μεμονωμένη εναλλαγή </button>   

Πλαίσιο ελέγχου

Προσθήκη data-toggle="buttons-checkbox"για εναλλαγή στυλ πλαισίου ελέγχου στην ομάδα btn.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Αριστερά </button>  
  <button type = "button" class = "btn btn-primary" > Μεσαία </button>  
  <button type = "button" class = "btn btn-primary" > Δεξιά </button>  
</div>

Ραδιόφωνο

Προσθήκη data-toggle="buttons-radio"για εναλλαγή στυλ ραδιοφώνου στο btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Αριστερά </button>  
  <button type = "button" class = "btn btn-primary" > Μεσαία </button>  
  <button type = "button" class = "btn btn-primary" > Δεξιά </button>  
</div>

Χρήση

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

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

Σήμανση

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

Επιλογές

Κανένας

Μέθοδοι

$().button('toggle')

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

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

$().button('loading')

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

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

$().button('reset')

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

$().button(string)

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

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

Σχετικά με

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

* Απαιτεί να συμπεριληφθεί το πρόσθετο Transitions.

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

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

<div class = "ακορντεόν" id = "ακορντεόν2" >  
  <div class = "ομάδα ακορντεόν" > 
    <div class = "ακορντεόν-επικεφαλίδα" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Πτυσσόμενο στοιχείο ομάδας #1
      </a>
    </div>
    <div id = "collapseOne" class = "συμπίεση σώματος ακορντεόν μέσα" >  
      <div class = "ακορντεόν-εσωτερικό" > 
        Κλισέ ζωγραφικής...
      </div>
    </div>
  </div>
  <div class = "ομάδα ακορντεόν" > 
    <div class = "ακορντεόν-επικεφαλίδα" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Πτυσσόμενο στοιχείο ομάδας #2
      </a>
    </div>
    <div id = "collapseTwo" class = "κατάρρευση σώματος ακορντεόν" >  
      <div class = "ακορντεόν-εσωτερικό" > 
        Κλισέ ζωγραφικής...
      </div>
    </div>
  </div>
</div>
...

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

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

Χρήση

Μέσω χαρακτηριστικών δεδομένων

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

Για να προσθέσετε διαχείριση ομάδας που μοιάζει με ακορντεόν σε ένα πτυσσόμενο στοιχείο ελέγχου, προσθέστε το χαρακτηριστικό δεδομένων data-parent="#selector". Ανατρέξτε στην επίδειξη για να το δείτε σε δράση.

Μέσω JavaScript

Ενεργοποίηση μη αυτόματα με:

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

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-parent="".

Μέθοδοι

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

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

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

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

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

.collapse ('show')

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

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

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

Εκδηλώσεις

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

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

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

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

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

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.

‹ ›

<div id = "myCarousel" class = "διαφάνεια καρουζέλ" >  
  <ol class = "καρουσέλ-δείκτες" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "ενεργό" </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" </li>  
  </ol>
  <!-- Είδη καρουζέλ -->
  <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>

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Χρησιμοποιήστε χαρακτηριστικά δεδομένων για να ελέγχετε εύκολα τη θέση του καρουζέλ. data-slideαποδέχεται τις λέξεις-κλειδιά prevή next, που αλλάζει τη θέση της διαφάνειας σε σχέση με την τρέχουσα θέση της. Εναλλακτικά, χρησιμοποιήστε data-slide-toτο για να περάσετε ένα ακατέργαστο ευρετήριο διαφάνειας στο καρουζέλ data-slide-to="2", το οποίο είναι η θέση ολίσθησης σε ένα συγκεκριμένο ευρετήριο που αρχίζει με 0.

Μέσω JavaScript

Κλήση καρουζέλ χειροκίνητα με:

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

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScriptz. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-interval="".

Μέθοδοι

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

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

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

.carousel('cycle')

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

.carousel ('παύση')

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

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

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

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

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

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

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

Εκδηλώσεις

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

Παράδειγμα

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

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

Θα θέλετε να ρυθμίσετε autocomplete="off"ώστε να αποτρέπεται η εμφάνιση των προεπιλεγμένων μενού του προγράμματος περιήγησης στο αναπτυσσόμενο μενού πληκτρολόγησης Bootstrap.

Χρήση

Μέσω χαρακτηριστικών δεδομένων

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

Μέσω JavaScript

Καλέστε τον πληκτρολόγιο χειροκίνητα με:

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

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-source="".

Μέθοδοι

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

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

Παράδειγμα

Η υποπλοήγηση στα αριστερά είναι μια ζωντανή επίδειξη του πρόσθετου affix.

Χρήση

Μέσω χαρακτηριστικών δεδομένων

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

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Μέσω JavaScript

Καλέστε την προσθήκη επιθέματος μέσω JavaScript:

$ ( '#navbar' ). επικολλώ ()

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-offset-top="200".