Javascript για Bootstrap

Δώστε ζωή στα στοιχεία του Bootstrap—τώρα με 12 προσαρμοσμένα πρόσθετα jQuery .

Modals

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

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

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

Scrollspy

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

Καρτέλες με δυνατότητα εναλλαγής

Χρησιμοποιήστε αυτό το πρόσθετο για να κάνετε τις καρτέλες και τα χάπια πιο χρήσιμα, επιτρέποντάς τους να εναλλάσσονται από τα παράθυρα tabbable τοπικού περιεχομένου.

Συμβουλές εργαλείων

Μια νέα άποψη για το πρόσθετο jQuery Tipsy, τα Tooltips δεν βασίζονται σε εικόνες — χρησιμοποιούν CSS3 για κινούμενα σχέδια και χαρακτηριστικά δεδομένων για τοπική αποθήκευση τίτλων.

Popovers *

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

* Απαιτείται να συμπεριληφθούν συμβουλές εργαλείων

Μηνύματα ειδοποίησης

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

Κουμπιά

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

Κατάρρευση

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

Στροβιλοδρόμιο

Δημιουργήστε μια παρτίδα οποιουδήποτε περιεχομένου θέλετε να παρέχετε μια διαδραστική παρουσίαση περιεχομένου.

πληκτρολογήστε

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

Μεταβάσεις *

Για απλά εφέ μετάβασης, συμπεριλάβετε το bootstrap-transition.js μία φορά για ολίσθηση σε modals ή εξαφάνιση ειδοποιήσεων.

* Απαιτείται για κινούμενα σχέδια σε πρόσθετα

Ψηλά το κεφάλι! Όλα τα πρόσθετα javascript απαιτούν την πιο πρόσφατη έκδοση του jQuery.

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

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

Λήψη αρχείου

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

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

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

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

Εκκινήστε το demo modal

Χρήση bootstrap-modal

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

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

Επιλογές

Ονομα τύπος Προκαθορισμένο περιγραφή
σκηνικό boolean αληθής Περιλαμβάνει ένα στοιχείο modal-backdrop. Εναλλακτικά, καθορίστε staticένα φόντο που δεν κλείνει το modal όταν κάνετε κλικ.
πληκτρολόγιο boolean αληθής Κλείνει το modal όταν πατηθεί το πλήκτρο escape
προβολή boolean αληθής Εμφανίζει το modal όταν αρχικοποιηθεί.

Σήμανση

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

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Εκκίνηση Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Modal header </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ένα ωραίο σώμα… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Κλείσιμο </a>
  11. <a href = "#" class = "btn btn-primary" > Αποθήκευση αλλαγών </a>
  12. </div>
  13. </div>
Ψηλά το κεφάλι! Εάν θέλετε το modal σας να κινείται μέσα και έξω, απλώς προσθέστε μια .fadeκλάση στο .modalστοιχείο (ανατρέξτε στην επίδειξη για να το δείτε σε δράση) και συμπεριλάβετε το bootstrap-transition.js.

Μέθοδοι

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

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

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

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

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

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

.modal('show')

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

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

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

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

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

Εκδηλώσεις

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

Εκδήλωση Περιγραφή
προβολή Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
απεικονίζεται Αυτό το συμβάν ενεργοποιείται όταν το modal έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
κρύβω Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
κρυμμένος Αυτό το συμβάν ενεργοποιείται όταν τελειώσει η απόκρυψη του modal από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
  1. $ ( '#myModal' ). on ( 'κρυφό' , συνάρτηση () {
  2. // Κάνε κάτι…
  3. })

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

Λήψη αρχείου

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

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

@Λίπος

Διαφημιστικό κολάν keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi πριν ξεπουλήσουν τα qui. Δικαιώματα ποδηλάτου Tumblr από farm-to-table ό,τι κι αν είναι. Ζακέτα Anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby πουλόβερ lomo jean σορτς, Wiliamsburg hoodie minim qui που μάλλον δεν έχετε ακούσει γι 'αυτούς και ζακέτα trust fund culpa biodiesel wes anderson αισθητική. Nihil τατουάζ accusamus, cred ειρωνεία βιοντίζελ keffiyeh artisan ullamco consequat.

@mdo

Σκέιτμπορντ με μουστάκι Veniam marfa, γένια από φουτζάτο βελούδινο. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Φαγητό φορτηγό cosby πουλόβερ με τατουάζ, βινύλιο mcsweeney's quis non freegan. Lo-fi wes anderson +1 sartorial. Carles μη αισθητική άσκηση quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

ένας

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo ποδήλατα δικαιώματα adipisicing banh mi, velit ea sunt επόμενο επίπεδο locavore καφέ μίας προέλευσης στο magna veniam. High life id βινύλιο, echo park consequat quis aliquip banh mi pitchfork. Το Vero VHS είναι αδιαπέραστο. Consectetur nisi DIY minim messenger bag. Cred ex in, βιώσιμο delectus consectetur fanny pack iphone.

δύο

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa οτιδήποτε delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica κλισέ ειρωνεία, thundercats που μάλλον δεν έχετε ακούσει γι 'αυτούς συνεπάγονται hoodie χωρίς γλουτένη lo-fi fap aliquip. Οι εργάτες προτού ξεπουληθούν, ο Terry richardson proident brunch nesciunt quis cosby πουλόβερ pariatur keffiyeh ut helvetica artisan. Ζακέτα craft beer seitan έτοιμο βελίτ. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.


Χρήση bootstrap-scrollspy.js

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

  1. $ ( '#navbar' ). scrollspy ()

Σήμανση

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

  1. <body data-spy = "scroll" > ... </body>
Ψηλά το κεφάλι! Οι σύνδεσμοι της γραμμής πλοήγησης πρέπει να έχουν επιλύσιμους στόχους αναγνωριστικού. Για παράδειγμα, το <a href="#home">home</a>must αντιστοιχεί σε κάτι στο dom όπως <div id="home"></div>.

Μέθοδοι

.scrollspy('refresh')

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

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

Επιλογές

Ονομα τύπος Προκαθορισμένο περιγραφή
αντισταθμίζεται αριθμός 10 Pixel για μετατόπιση από την κορυφή κατά τον υπολογισμό της θέσης κύλισης.

Εκδηλώσεις

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

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

Λήψη αρχείου

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

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

Ακατέργαστο τζιν που μάλλον δεν έχετε ακούσει γι 'αυτά τζιν σορτς Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Μουστάκι cliche tempor, Wiliamsburg carles vegan helvetica. Reprehenderit χασάπη ρετρό keffiyeh ονειροπαγίδα synth. Cosby πουλόβερ eu banh mi, qui irure terry richardson ex squid. Προσαρμόστε το για το iphone. Seitan aliquip quis ζακέτα αμερικανική ένδυση, κρεοπωλείο voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


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

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

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

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

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

Σήμανση

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

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

Μέθοδοι

καρτέλα $().

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

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Αρχική σελίδα </a></li>
  3. <li><a href = "#profile" > Προφίλ </a></li>
  4. <li><a href = "#messages" > Μηνύματα </a></li>
  5. <li><a href = "#settings" > Ρυθμίσεις </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane ενεργό" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <σενάριο>
  16. $ ( συνάρτηση () {
  17. $ ( '#myTab a:last' ). καρτέλα ( 'εμφάνιση' );
  18. })
  19. </script>

Εκδηλώσεις

Εκδήλωση Περιγραφή
προβολή Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών, αλλά πριν εμφανιστεί η νέα καρτέλα. Χρησιμοποιήστε event.targetκαι event.relatedTargetγια να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα.
απεικονίζεται Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών μετά την εμφάνιση μιας καρτέλας. Χρησιμοποιήστε event.targetκαι event.relatedTargetγια να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {
  2. ε . στόχος // ενεργοποιημένη καρτέλα
  3. ε . relatedTarget // προηγούμενη καρτέλα
  4. })

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

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

Λήψη αρχείου

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

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

Στενό παντελόνι επόμενου επιπέδου keffiyeh που μάλλον δεν το έχετε ακούσει. Photo booth γενειάδα ακατέργαστη τζιν letterpress vegan messenger τσάντα stumptown. Σεϊτάν από αγρόκτημα μέχρι τραπέζι, αμερικανικά ενδύματα βιώσιμης κινόα 8-bit της mcsweeney's έχουν ένα chambray βινυλίου terry richardson. Beard stumptown, ζακέτες banh mi lomo thundercats. Tofu βιοντίζελ Wiliamsburg marfa, τέσσερα loko mcsweeney's cleanse vegan chambray. Ένας πραγματικά ειρωνικός τεχνίτης , ανεξάρτητα από το keytar , σκηνικό από αγρόκτημα σε τραπέζι, με το twitter του Austin να χειρίζεται freegan cred raw τζιν καφέ μονής προέλευσης.


Χρήση bootstrap-tooltip.js

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

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

Επιλογές

Ονομα τύπος Προκαθορισμένο περιγραφή
κινουμένων σχεδίων boolean αληθής εφαρμόστε μια μετάβαση css fade στην επεξήγηση εργαλείου
τοποθέτηση συμβολοσειρά|συνάρτηση 'μπλουζα' πώς να τοποθετήσετε την επεξήγηση εργαλείου - επάνω | κάτω | αριστερά | σωστά
εκλέκτορας σειρά ψευδής Εάν παρέχεται ένας επιλογέας, τα αντικείμενα συμβουλής εργαλείου θα εκχωρηθούν στους καθορισμένους στόχους.
τίτλος χορδή | λειτουργία '' προεπιλεγμένη τιμή τίτλου εάν δεν υπάρχει η ετικέτα "τίτλος".
δώσει το έναυσμα για σειρά 'φτερουγίζω' πώς ενεργοποιείται η συμβουλή εργαλείου - τοποθετήστε το δείκτη του ποντικιού | εστίαση | εγχειρίδιο
καθυστέρηση αριθμός | αντικείμενο 0

καθυστέρηση εμφάνισης και απόκρυψης της επεξήγησης εργαλείου (ms) - δεν ισχύει για τον τύπο χειροκίνητης σκανδάλης

Εάν παρέχεται ένας αριθμός, εφαρμόζεται καθυστέρηση και για την απόκρυψη/εμφάνιση

Η δομή του αντικειμένου είναι:delay: { show: 500, hide: 100 }

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

Σήμανση

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

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

Μέθοδοι

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

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

.tooltip('show')

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

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

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

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

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

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

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

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

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

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

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

Λήψη αρχείου

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

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


Χρήση bootstrap-popover.js

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

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

Επιλογές

Ονομα τύπος Προκαθορισμένο περιγραφή
κινουμένων σχεδίων boolean αληθής εφαρμόστε μια μετάβαση css fade στην επεξήγηση εργαλείου
τοποθέτηση συμβολοσειρά|συνάρτηση 'σωστά' πώς να τοποθετήσετε το popover - top | κάτω | αριστερά | σωστά
εκλέκτορας σειρά ψευδής Εάν παρέχεται ένας επιλογέας, τα αντικείμενα συμβουλής εργαλείου θα εκχωρηθούν στους καθορισμένους στόχους
δώσει το έναυσμα για σειρά 'φτερουγίζω' πώς ενεργοποιείται η συμβουλή εργαλείου - τοποθετήστε το δείκτη του ποντικιού | εστίαση | εγχειρίδιο
τίτλος χορδή | λειτουργία '' προεπιλεγμένη τ��μή τίτλου εάν το χαρακτηριστικό «title» δεν υπάρχει
περιεχόμενο χορδή | λειτουργία '' προεπιλεγμένη τιμή περιεχομένου εάν το χαρακτηριστικό "data-content" δεν υπάρχει
καθυστέρηση αριθμός | αντικείμενο 0

καθυστέρηση εμφάνισης και απόκρυψης του popover (ms) - δεν ισχύει για τον τύπο χειροκίνητης σκανδάλης

Εάν παρέχεται ένας αριθμός, εφαρμόζεται καθυστέρηση και για την απόκρυψη/εμφάνιση

Η δομή του αντικειμένου είναι:delay: { show: 500, hide: 100 }

Ψηλά το κεφάλι! Οι επιλογές για μεμονωμένα popovers μπορούν εναλλακτικά να καθοριστούν μέσω της χρήσης των χαρακτηριστικών δεδομένων.

Σήμανση

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

Μέθοδοι

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

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

.popover('show')

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

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

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

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

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

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

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

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

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

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

Κατεβάστε

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

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

Ιερό γουακαμόλε! Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.

Ω snap! Έχετε ένα σφάλμα!

Αλλάξτε αυτό και αυτό και δοκιμάστε ξανά. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Κάντε αυτήν την ενέργεια Ή κάντε αυτό


Χρήση bootstrap-alert.js

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

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

Σήμανση

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

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

Μέθοδοι

$().alert()

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

.alert('close')

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

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

Εκδηλώσεις

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

Εκδήλωση Περιγραφή
Κλείσε Αυτό το συμβάν ενεργοποιείται αμέσως όταν closeκαλείται η μέθοδος παρουσίας.
κλειστό Αυτό το συμβάν ενεργοποιείται όταν η ειδοποίηση έχει κλείσει (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
  1. $ ( '#my-alert' ). bind ( 'κλειστό' , συνάρτηση () {
  2. // Κάνε κάτι…
  3. })

Σχετικά με

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

Λήψη αρχείου

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

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

Πολιτειακός
Μονή εναλλαγή
Πλαίσιο ελέγχου
Ραδιόφωνο

Χρήση bootstrap-button.js

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

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

Σήμανση

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

  1. <!-- Προσθήκη data-toggle="button" για να ενεργοποιήσετε την εναλλαγή σε ένα μόνο κουμπί -->
  2. <button class = "btn" data-toggle = "button" > Μεμονωμένη εναλλαγή </button>
  3.  
  4. <!-- Προσθήκη data-toggle="buttons-checkbox" για εναλλαγή στυλ πλαισίου ελέγχου στο btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Αριστερά </button>
  7. <button class = "btn" > Μεσαία </button>
  8. <button class = "btn" > Δεξιά </button>
  9. </div>
  10.  
  11. <!-- Προσθήκη data-toggle="buttons-radio" για εναλλαγή στυλ ραδιοφώνου στο btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Αριστερά </button>
  14. <button class = "btn" > Μεσαία </button>
  15. <button class = "btn" > Δεξιά </button>
  16. </div>

Μέθοδοι

$().button('toggle')

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

Ψηλά το κεφάλι! Μπορείτε να ενεργοποιήσετε την αυτόματη εναλλαγή ενός κουμπιού χρησιμοποιώντας το data-toggleχαρακτηριστικό.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('loading')

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

  1. <button class = "btn" data-loading-text = "φόρτωση υλικού..." > ... </button>
Ψηλά το κεφάλι! Ο Firefox διατηρεί την κατάσταση απενεργοποιημένης κατά τη φόρτωση σελίδων . Μια λύση για αυτό είναι να χρησιμοποιήσετε autocomplete="off".

$().button('reset')

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

$().button(string)

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

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

Σχετικά με

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

Λήψη αρχείου

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

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

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Φορτηγό τροφίμων quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua βάλε ένα πουλί πάνω του καλαμάρι μονής προέλευσης καφέ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur χασάπης vice lomo. Κολάν occaecat craft μπύρα από φάρμα σε τραπέζι, ακατέργαστο τζιν αισθητικής synth nesciunt που μάλλον δεν έχετε ακούσει για αυτά accusamus labore βιώσιμη VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Φορτηγό τροφίμων quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua βάλε ένα πουλί πάνω του καλαμάρι μονής προέλευσης καφέ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur χασάπης vice lomo. Κολάν occaecat craft μπύρα από φάρμα σε τραπέζι, ακατέργαστο τζιν αισθητικής synth nesciunt που μάλλον δεν έχετε ακούσει για αυτά accusamus labore βιώσιμη VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Φορτηγό τροφίμων quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua βάλε ένα πουλί πάνω του καλαμάρι μονής προέλευσης καφέ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur χασάπης vice lomo. Κολάν occaecat craft μπύρα από φάρμα σε τραπέζι, ακατέργαστο τζιν αισθητικής synth nesciunt που μάλλον δεν έχετε ακούσει για αυτά accusamus labore βιώσιμη VHS.

Χρήση bootstrap-collapse.js

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

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

Επιλογές

Ονομα τύπος Προκαθορισμένο περιγραφή
μητρική εταιρεία εκλέκτορας ψευδής Εάν ο επιλογέας, τότε όλα τα πτυσσόμενα στοιχεία κάτω από τον καθορισμένο γονέα θα κλείσουν όταν εμφανιστεί αυτό το πτυσσόμενο στοιχείο. (παρόμοια με την παραδοσιακή συμπεριφορά ακορντεόν)
μεταβάλλω boolean αληθής Εναλλάσσει το πτυσσόμενο στοιχείο κατά την επίκληση

Σήμανση

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

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. απλό πτυσσόμενο
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Ψηλά το κεφάλι! Για να προσθέσετε διαχείριση ομάδας που μοιάζει με ακορντεόν σε ένα πτυσσόμενο στοιχείο ελέγχου, προσθέστε το χαρακτηριστικό δεδομένων data-parent="#selector". Ανατρέξτε στην επίδειξη για να το δείτε σε δράση.

Μέθοδοι

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

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

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

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

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

.collapse ('show')

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

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

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

Εκδηλώσεις

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

Εκδήλωση Περιγραφή
προβολή Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
απεικονίζεται Αυτό το συμβάν ενεργοποιείται όταν ένα στοιχείο σύμπτυξης έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
κρύβω Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου.
κρυμμένος Αυτό το συμβάν ενεργοποιείται όταν ένα στοιχείο σύμπτυξης έχει κρυφτεί από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
  1. $ ( '#myCollapsible' ). on ( 'κρυφό' , συνάρτηση () {
  2. // Κάνε κάτι…
  3. })

Σχετικά με

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

Λήψη αρχείου

Παράδειγμα

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


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

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

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

Επιλογές

Ονομα τύπος Προκαθορισμένο περιγραφή
πηγή πίνακας [ ] Η προέλευση δεδομένων προς αναζήτηση.
είδη αριθμός 8 Ο μέγιστος αριθμός στοιχείων προς εμφάνιση στο αναπτυσσόμενο μενού.
ταίριασμα λειτουργία χωρίς διάκριση πεζών-κεφαλαίων Η μέθοδος που χρησιμοποιείται για να προσδιοριστεί εάν ένα ερώτημα ταιριάζει με ένα στοιχείο. Δέχεται ένα μεμονωμένο όρισμα, itemέναντι του οποίου θα ελεγχθεί το ερώτημα. Πρόσβαση στο τρέχον ερώτημα με this.query. Επιστρέψτε ένα boolean trueεάν το ερώτημα ταιριάζει.
ταξινομών λειτουργία ακριβής αντιστοίχιση, διάκριση πεζών-κεφαλαίων
,
διάκριση πεζών-κεφαλαίων
Μέθοδος που χρησιμοποιείται για την ταξινόμηση των αποτελεσμάτων αυτόματης συμπλήρωσης. Αποδέχεται ένα μεμονωμένο όρισμα itemsκαι έχει το εύρος του στιγμιότυπου πληκτρολογίου. Αναφέρετε το τρέχον ερώτημα με this.query.
highlighter λειτουργία επισημαίνει όλες τις προεπιλεγμένες αντιστοιχίσεις Μέθοδος που χρησιμοποιείται για την επισήμανση των αποτελεσμάτων αυτόματης συμπλήρωσης. Αποδέχεται ένα μεμονωμένο όρισμα itemκαι έχει το εύρος του στιγμιότυπου πληκτρολογίου. Θα πρέπει να επιστρέψει html.

Σήμανση

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

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

Μέθοδοι

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

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