ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

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

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

Χρησιμοποιώντας το μεταγλωττισμένο JavaScript

Και τα δύο bootstrap.jsκαι bootstrap.min.jsπεριέχουν όλα τα πρόσθετα σε ένα μόνο αρχείο. Συμπεριλάβετε μόνο ένα.

Εξαρτήσεις προσθηκών

Ορισμένα πρόσθετα και στοιχεία CSS εξαρτώνται από άλλα πρόσθετα. Εάν συμπεριλάβετε προσθήκες μεμονωμένα, φροντίστε να ελέγξετε για αυτές τις εξαρτήσεις στα έγγραφα. Σημειώστε επίσης ότι όλα τα πρόσθετα εξαρτώνται από το jQuery (αυτό σημαίνει ότι το jQuery πρέπει να περιλαμβάνεται πριν από τα αρχεία πρόσθετων). Συμβουλευτείτε μαςbower.json για να δείτε ποιες εκδόσεις του jQuery υποστηρίζονται.

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

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

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

$(document).off('.data-api')

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

$(document).off('.alert.data-api')

Μόνο ένα πρόσθετο ανά στοιχείο μέσω χαρακτηριστικών δεδομένων

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

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

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

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

Προεπιλεγμένες ρυθμίσεις

Μπορείτε να αλλάξετε τις προεπιλεγμένες ρυθμίσεις για μια προσθήκη τροποποιώντας το Constructor.DEFAULTSαντικείμενο της προσθήκης:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

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

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Εκδηλώσεις

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

Από την έκδοση 3.0.0, όλα τα συμβάντα Bootstrap έχουν χώρο ονομάτων.

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Αριθμοί έκδοσης

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

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Δεν υπάρχουν ειδικές εναλλακτικές όταν η JavaScript είναι απενεργοποιημένη

Οι προσθήκες του Bootstrap δεν παρουσιάζουν ιδιαίτερη χάρη όταν η JavaScript είναι απενεργοποιημένη. Εάν ενδιαφέρεστε για την εμπειρία χρήστη σε αυτήν την περίπτωση, χρησιμοποιήστε <noscript>το για να εξηγήσετε την κατάσταση (και πώς να ενεργοποιήσετε ξανά τη JavaScript) στους χρήστες σας ή/και να προσθέσετε τις δικές σας προσαρμοσμένες εναλλακτικές.

Βιβλιοθήκες τρίτων

Το Bootstrap δεν υποστηρίζει επίσημα βιβλιοθήκες JavaScript τρίτων όπως το Prototype ή το jQuery UI. Παρά .noConflictτα συμβάντα και τα συμβάντα ονομάτων, ενδέχεται να υπάρχουν προβλήματα συμβατότητας που πρέπει να διορθώσετε μόνοι σας.

Transitions transition.js

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

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

Τι είναι μέσα

Το Transition.js είναι ένας βασικός βοηθός για transitionEndσυμβάντα καθώς και ένας εξομοιωτής μετάβασης CSS. Χρησιμοποιείται από τα άλλα πρόσθετα για τον έλεγχο της υποστήριξης μετάβασης CSS και για τη σύλληψη μεταβάσεων που κρέμονται.

Απενεργοποίηση μεταβάσεων

Οι μεταβάσεις μπορούν να απενεργοποιηθούν καθολικά χρησιμοποιώντας το ακόλουθο απόσπασμα JavaScript, το οποίο πρέπει να έρθει μετά τη φόρτωση transition.jsbootstrap.jsή bootstrap.min.js, ανάλογα με την περίπτωση):

$.support.transition = false

Modals modal.js

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

Δεν υποστηρίζονται πολλά ανοιχτά μοντέλα

Φροντίστε να μην ανοίξετε ένα modal ενώ ένα άλλο είναι ακόμα ορατό. Η εμφάνιση περισσότερων του ενός modal κάθε φορά απαιτεί προσαρμοσμένο κωδικό.

Modal τοποθέτηση σήμανσης

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

Προειδοποιήσεις για φορητές συσκευές

Υπάρχουν ορισμένες προειδοποιήσεις σχετικά με τη χρήση modals σε κινητές συσκευές. Δείτε τα έγγραφα υποστήριξης του προγράμματος περιήγησής μας για λεπτομέρειες.

Λόγω του τρόπου με τον οποίο η HTML5 ορίζει τη σημασιολογία της, το autofocusχαρακτηριστικό HTML δεν έχει καμία επίδραση στους τρόπους εκκίνησης. Για να επιτύχετε το ίδιο αποτέλεσμα, χρησιμοποιήστε κάποια προσαρμοσμένη JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

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

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

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Κάντε τα modals προσβάσιμα

Βεβαιωθείτε ότι έχετε προσθέσει role="dialog"και aria-labelledby="...", αναφερόμενος στον τροπικό τίτλο, στο .modal, και role="document"στον .modal-dialogεαυτό του.

Επιπλέον, μπορείτε να δώσετε μια περιγραφή του τρόπου διαλόγου σας με aria-describedbyτο .modal.

Ενσωμάτωση βίντεο YouTube

Η ενσωμάτωση βίντεο YouTube σε modals απαιτεί επιπλέον JavaScript όχι σε Bootstrap για αυτόματη διακοπή της αναπαραγωγής και πολλά άλλα. Δείτε αυτήν τη χρήσιμη ανάρτηση Stack Overflow για περισσότερες πληροφορίες.

Προαιρετικά μεγέθη

Τα Modal έχουν δύο προαιρετικά μεγέθη, διαθέσιμα μέσω κατηγοριών τροποποιητών για να τοποθετηθούν σε ένα .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Κατάργηση κινούμενων εικόνων

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

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Χρησιμοποιώντας το σύστημα πλέγματος

Για να επωφεληθείτε από το σύστημα πλέγματος Bootstrap σε ένα modal, απλώς τοποθετήστε .rowτο μέσα στις .modal-bodyκαι, στη συνέχεια, χρησιμοποιήστε τις κανονικές κλάσεις συστήματος πλέγματος.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Έχετε ένα σωρό κουμπιά που ενεργοποιούν όλα το ίδιο modal, απλώς με ελαφρώς διαφορετικό περιεχόμενο; Χρησιμοποιήστε χαρακτηριστικάevent.relatedTarget και HTMLdata-* (πιθανώς μέσω jQuery ) για να διαφοροποιήσετε τα περιεχόμενα του modal ανάλογα με το κουμπί που κάνατε κλικ. Δείτε τα έγγραφα Modal Events για λεπτομέρειες σχετικά με relatedTarget,

...περισσότερα κουμπιά...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Χρήση

Το modal plugin εναλλάσσει το κρυφό περιεχόμενό σας κατά παραγγελία, μέσω χαρακτηριστικών δεδομένων ή JavaScript. Προσθέτει επίσης .modal-openστην <body>παράκαμψη της προεπιλεγμένης συμπεριφοράς κύλισης και δημιουργεί ένα .modal-backdropγια να παρέχει μια περιοχή κλικ για την παράβλεψη των εμφανιζόμενων τρόπων κατά το κλικ εκτός του τρόπου λειτουργίας.

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

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Μέσω JavaScript

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

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

Επιλογές

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

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

Αυτή η επιλογή έχει καταργηθεί από την έκδοση 3.3.0 και έχει καταργηθεί στην έκδοση 4. Συνιστούμε να χρησιμοποιήσετε πρότυπο από την πλευρά του πελάτη ή ένα πλαίσιο σύνδεσης δεδομένων ή να καλέσετε μόνοι σας το jQuery.load .

Εάν παρέχεται μια απομακρυσμένη διεύθυνση URL, το περιεχόμενο θα φορτωθεί μία φορά μέσω της μεθόδου του jQuery loadκαι θα εισαχθεί στο .modal-contentdiv. Εάν χρησιμοποιείτε το data-api, μπορείτε εναλλακτικά να χρησιμοποιήσετε το hrefχαρακτηριστικό για να καθορίσετε την απομακρυσμένη πηγή. Ένα παράδειγμα αυτού φαίνεται παρακάτω:

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

Μέθοδοι

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

$('#myModal').modal({
  keyboard: false
})

Εναλλάσσει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το modal (δηλαδή πριν συμβεί το shown.bs.modalή το hidden.bs.modalσυμβάν).

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

Ανοίγει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί στην πραγματικότητα το modal (δηλαδή πριν συμβεί το shown.bs.modalσυμβάν).

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

Χειροκίνητα κρύβει ένα modal. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του modal (δηλαδή πριν συμβεί το hidden.bs.modalσυμβάν).

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

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

Χρειάζεται μόνο όταν το ύψος του modal αλλάζει ενώ είναι ανοιχτό.

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

Εκδηλώσεις

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

Όλα τα τροπικά συμβάντα πυροδοτούνται στο ίδιο το modal (δηλαδή στο <div class="modal">).

Τύπος συμβάντος Περιγραφή
εμφανίζω.β.τροπικό Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας. Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως relatedTargetιδιότητα του συμβάντος.
φαίνεται.β.τροπικό Αυτό το συμβάν ενεργοποιείται όταν το modal έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως relatedTargetιδιότητα του συμβάντος.
απόκρυψη.β.τροπικό Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
κρυφό.β.τροπικό Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του modal από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
φορτωμένο.bs.modal Αυτό το συμβάν ενεργοποιείται όταν το modal έχει φορτώσει περιεχόμενο χρησιμοποιώντας την remoteεπιλογή.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Αναπτυσσόμενα dropdown.js

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

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

Μέσα σε χάπια

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

Σε κινητές συσκευές, το άνοιγμα ενός αναπτυσσόμενου μενού προσθέτει μια .dropdown-backdropπεριοχή ως πάτημα για το κλείσιμο των αναπτυσσόμενων μενού όταν πατάτε έξω από το μενού, μια απαίτηση για σωστή υποστήριξη iOS. Αυτό σημαίνει ότι η μετάβαση από ένα ανοιχτό αναπτυσσόμενο μενού σε ένα διαφορετικό αναπτυσσόμενο μενού απαιτεί ένα επιπλέον πάτημα στο κινητό.

Σημείωση: Το data-toggle="dropdown"χαρακτηριστικό βασίζεται για το κλείσιμο αναπτυσσόμενων μενού σε επίπεδο εφαρ��ογής, επομένως είναι καλή ιδέα να το χρησιμοποιείτε πάντα.

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Μέσω JavaScript

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

$('.dropdown-toggle').dropdown()

data-toggle="dropdown"απαιτείται ακόμη

Ανεξάρτητα από το αν καλείτε το αναπτυσσόμενο μενού μέσω JavaScript ή αντ' αυτού χρησιμοποιείτε το data-api, data-toggle="dropdown"απαιτείται πάντα να υπάρχει στο στοιχείο ενεργοποίησης του αναπτυσσόμενου μενού.

Κανένας

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

Όλα τα αναπτυσσόμενα συμβάντα ενεργοποιούνται στο .dropdown-menuγονικό στοιχείο του '.

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

Τύπος συμβάντος Περιγραφή
εμφάνιση.β.αναπτυσσόμενο Αυτό το συμβάν ενεργοποιείται αμέσως όταν καλείται η μέθοδος εμφάνισης.
εμφανίζεται.bs.αναπτυσσόμενο Αυτό το συμβάν ενεργοποιείται όταν το αναπτυσσόμενο μενού έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
απόκρυψη.bs.αναπτυσσόμενο Αυτό το συμβάν ενεργοποιείται αμέσως όταν καλείται η μέθοδος εμφάνισης απόκρυψης.
hidden.bs.dropdown Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του αναπτυσσόμενου μενού από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

Απαιτούνται επιλύσιμοι στόχοι αναγνωριστικών

Οι σύνδεσμοι της γραμμής πλοήγησης πρέπει να έχουν επιλύσιμους στόχους αναγνωριστικού. Για παράδειγμα, το <a href="#home">home</a>must αντιστοιχεί σε κάτι στο DOM όπως <div id="home"></div>.

Τα :visibleστοιχεία που δεν είναι στόχοι αγνοήθηκαν

Τα στοιχεία-στόχοι που δεν είναι :visibleσύμφωνα με το jQuery θα αγνοηθούν και τα αντίστοιχα στοιχεία πλοήγησής τους δεν θα επισημανθούν ποτέ.

Απαιτεί σχετική τοποθέτηση

Ανεξάρτητα από τη μέθοδο υλοποίησης, το scrollspy απαιτεί τη χρήση του position: relative;στοιχείου που κατασκοπεύετε. Στις περισσότερες περιπτώσεις αυτό είναι το <body>. Κατά την κύλιση σε στοιχεία εκτός από το <body>, φροντίστε να έχετε ένα heightσύνολο και να το έχετε overflow-y: scroll;εφαρμόσει.

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

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

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Μέσω JavaScript

Αφού προσθέσετε position: relative;το CSS σας, καλέστε το scrollspy μέσω JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Μέθοδοι

.scrollspy('refresh')

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Επιλογές

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

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

Εκδηλώσεις

Τύπος συμβάντος Περιγραφή
activate.bs.scrollspy Αυτό το συμβάν ενεργοποιείται κάθε φορά που ένα νέο στοιχείο ενεργοποιείται από το scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Με δυνατότητα εναλλαγής καρτελών tab.js

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

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

Ακατέργαστο τζιν που μάλλον δεν έχετε ακούσει γι 'αυτά τζιν σορτς 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.

Επεκτείνει την πλοήγηση με καρτέλες

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

Χρήση

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Σήμανση

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Εφέ εξασθένισης

Για να κάνετε τις καρτέλες να ξεθωριάζουν, προσθέστε .fadeσε κάθε .tab-pane. Το πρώτο παράθυρο καρτέλας πρέπει επίσης .inνα κάνει ορατό το αρχικό περιεχόμενο.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Μέθοδοι

$().tab

Ενεργοποιεί ένα στοιχείο καρτέλας και ένα κοντέινερ περιεχομένου. Η καρτέλα πρέπει να έχει είτε έναν data-targetείτε έναν hrefκόμβο στόχευσης κοντέινερ στο DOM. Στα παραπάνω παραδείγματα, οι καρτέλες είναι οι <a>s με data-toggle="tab"χαρακτηριστικά.

.tab('show')

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

$('#someTab').tab('show')

Εκδηλώσεις

Κατά την εμφάνιση μιας νέας καρτέλας, τα συμβάντα ενεργοποιούνται με την ακόλουθη σειρά:

  1. hide.bs.tab(στην τρέχουσα ενεργή καρτέλα)
  2. show.bs.tab(στην καρτέλα που θα εμφανιστεί)
  3. hidden.bs.tab(στην προηγο��μενη ενεργή καρτέλα, η ίδια με την hide.bs.tabεκδήλωση)
  4. shown.bs.tab(στην πρόσφατα ενεργή καρτέλα που μόλις εμφανίστηκε, η ίδια όπως και για την show.bs.tabεκδήλωση)

Εάν καμία καρτέλα δεν ήταν ήδη ενεργή, τότε τα συμβάντα hide.bs.tabκαι hidden.bs.tabδεν θα ενεργοποιηθούν.

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

Tooltips tooltip.js

Εμπνευσμένο από το εξαιρετικό πρόσθετο 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 τζιν καφέ μονής προέλευσης.

Στατική επεξήγηση εργαλείου

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

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

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Λειτουργικότητα επιλογής

Για λόγους απόδοσης, το Tooltip και το Popover data-api είναι opt-in, που σημαίνει ότι πρέπει να τα αρχικοποιήσετε μόνοι σας .

Ένας τρόπος για να αρχικοποιήσετε όλες τις συμβουλές εργαλείων σε μια σελίδα θα ήταν να τις επιλέξετε με βάση το data-toggleχαρακτηριστικό τους:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Χρήση

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

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

$('#example').tooltip(options)

Σήμανση

Η απαιτούμενη σήμανση για μια επεξήγηση εργαλείου είναι μόνο ένα dataχαρακτηριστικό και titleστο στοιχείο HTML θέλετε να έχετε μια επεξήγηση εργαλείου. Η παραγόμενη σήμανση μιας συμβουλής εργαλείου είναι μάλλον απλή, αν και απαιτεί μια θέση (από προεπιλογή, ρυθμισμένη topαπό το πρόσθετο).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Σύνδεσμοι πολλαπλών γραμμών

Μερικές φορές θέλετε να προσθέσετε μια επεξήγηση εργαλείου σε έναν υπερσύνδεσμο που αναδιπλώνει πολλές γραμμές. Η προεπιλεγμένη συμπεριφορά του πρόσθετου συμβουλής εργαλείου είναι να το κεντράρετε οριζόντια και κάθετα. Προσθέστε white-space: nowrap;στις άγκυρες σας για να το αποφύγετε.

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

Όταν χρησιμοποιείτε συμβουλές εργαλείων σε στοιχεία μέσα σε ένα .btn-groupή ένα .input-groupή σε στοιχεία που σχετίζονται με τον πίνακα ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), θα πρέπει να καθορίσετε την επιλογή container: 'body'(που τεκμηριώνεται παρακάτω) για να αποφύγετε ανεπιθύμητες παρενέργειες (όπως το στοιχείο που μεγαλώνει και/ ή να χάσει τις στρογγυλεμένες γωνίες του όταν ενεργοποιείται το άκρο εργαλείου).

Μην προσπαθήσετε να εμφανίσετε συμβουλές εργαλείων σε κρυφά στοιχεία

Η επίκληση $(...).tooltip('show')όταν είναι το στοιχείο προορισμού display: none;θα έχει ως αποτέλεσμα την εσφαλμένη τοποθέτηση της επεξήγησης εργαλείου.

Προσβάσιμες συμβουλές εργαλείων για χρήστες πληκτρολογίου και βοηθητικής τεχνολογίας

Για χρήστες που πλοηγούνται με πληκτρολόγιο, και ειδικότερα χρήστες υποστηρικτικών τεχνολογιών, θα πρέπει να προσθέτετε συμβουλές εργαλείων μόνο σε στοιχεία με δυνατότητα εστίασης στο πληκτρολόγιο, όπως συνδέσμους, στοιχεία ελέγχου φόρμας ή οποιοδήποτε αυθαίρετο στοιχείο με tabindex="0"χαρακτηριστικό.

Οι συμβουλές εργαλείων σε απενεργοποιημένα στοιχεία απαιτούν στοιχεία περιτυλίγματος

Για να προσθέσετε μια επεξήγηση εργαλείου σε ένα disabledή .disabledστοιχείο, τοποθετήστε το στοιχείο μέσα σε ένα <div>και εφαρμόστε την επεξήγηση εργαλείου σε αυτό <div>.

Επιλογές

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

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

Προσθέτει την επεξήγηση εργαλείου σε ένα συγκεκριμένο στοιχείο. Παράδειγμα: container: 'body'. Αυτή η επιλογή είναι ιδιαίτερα χρήσιμη καθώς σας επιτρέπει να τοποθετήσετε την επεξήγηση εργαλείου στη ροή του εγγράφου κοντά στο στοιχείο ενεργοποίησης - κάτι που θα εμποδίσει την επεξήγηση εργαλείου να μετακινηθεί μακριά από το στοιχείο ενεργοποίησης κατά τη διάρκεια μιας αλλαγής μεγέθους παραθύρου.

καθυστέρηση αριθμός | αντικείμενο 0

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

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

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

html boolean ψευδής Εισαγάγετε HTML στην επεξήγηση εργαλείου. Εάν είναι false, η μέθοδος του jQuery textθα χρησιμοποιηθεί για την εισαγωγή περιεχομένου στο DOM. Χρησιμοποιήστε κείμενο εάν ανησυχείτε για επιθέσεις XSS.
τοποθέτηση χορδή | λειτουργία 'μπλουζα'

Πώς να τοποθετήσετε την επεξήγηση εργαλείου - επάνω | κάτω | αριστερά | δεξιά | αυτο.
Όταν έχει καθοριστεί το "auto", θα επαναπροσανατολίσει δυναμικά την επεξήγηση εργαλείου. Για παράδειγμα, εάν η τοποθέτηση είναι "αυτόματη αριστερά", η επεξήγηση εργαλείου θα εμφανίζεται στα αριστερά όταν είναι δυνατόν, διαφορετικά θα εμφανίζεται δεξιά.

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

εκλέκτορας σειρά ψευδής Εάν παρέχεται ένας επιλογέας, τα αντικείμενα συμβουλής εργαλείου θα εκχωρηθούν στους καθορισμένους στόχους. Στην πράξη, αυτό χρησιμοποιείται για να επιτρέψει στο δυναμικό περιεχόμενο HTML να προστεθούν συμβουλές εργαλείων. Δείτε αυτό και ένα ενημερωτικό παράδειγμα .
πρότυπο σειρά '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Βάση HTML για χρήση κατά τη δημιουργία της επεξήγησης εργαλείου.

Η συμβουλή εργαλείου titleθα εγχυθεί στο .tooltip-inner.

.tooltip-arrowθα γίνει το βέλος της επεξήγησης εργαλείου.

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

τίτλος χορδή | λειτουργία ''

Προεπιλεγμένη τιμή τίτλου εάν titleτο χαρακτηριστικό δεν υπάρχει.

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

δώσει το έναυσμα για σειρά "εστίαση αιώρησης" Πώς ενεργοποιείται η συμβουλή εργαλείου - κάντε κλικ στο | αιωρούνται | εστίαση | εγχειρίδιο. Μπορείτε να περάσετε πολλαπλούς ερεθισμούς. χωρίστε τα με ένα κενό. manualδεν μπορεί να συνδυαστεί με καμία άλλη σκανδάλη.
θέαση χορδή | αντικείμενο | λειτουργία { Selector: 'body', padding: 0 }

Διατηρεί την επεξήγηση εργαλείου εντός των ορίων αυτού του στοιχείου. Παράδειγμα: viewport: '#viewport'ή{ "selector": "#viewport", "padding": 0 }

Εάν δοθεί μια συνάρτηση, καλείται με μοναδικό όρισμα τον κόμβο DOM στοιχείου ενεργοποίησης. Το thisπεριβάλλον ορίζεται στην παρουσία συμβουλής εργαλείου.

Χαρακτηριστικά δεδομένων για μεμονωμένες συμβουλές εργαλείων

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

Μέθοδοι

$().tooltip(options)

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

.tooltip('show')

Αποκαλύπτει την επεξήγηση εργαλείου ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά η συμβουλή εργαλείου (δηλαδή πριν συμβεί το shown.bs.tooltipσυμβάν). Αυτό θεωρείται ως "χειροκίνητη" ενεργοποίηση της συμβουλής εργαλείου. Επεξηγήσεις εργαλείων με τίτλους μηδενικού μήκους δεν εμφανίζονται ποτέ.

$('#element').tooltip('show')

.tooltip('hide')

Κρύβει την επεξήγηση εργαλείου ενός στοιχείου. Επιστρέφει στον καλούντα προτού η επεξήγηση εργαλείου έχει πραγματικά κρυφτεί (δηλαδή πριν συμβεί το hidden.bs.tooltipσυμβάν). Αυτό θεωρείται ως "χειροκίνητη" ενεργοποίηση της συμβουλής εργαλείου.

$('#element').tooltip('hide')

.tooltip('toggle')

Εναλλάσσει την επεξήγηση εργαλείου ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά η συμβουλή εργαλείου (δηλαδή πριν συμβεί το shown.bs.tooltipή το hidden.bs.tooltipσυμβάν). Αυτό θεωρείται ως "χειροκίνητη" ενεργοποίηση της συμβουλής εργαλείου.

$('#element').tooltip('toggle')

.tooltip('destroy')

Κρύβει και καταστρέφει την επεξήγηση εργαλείου ενός στοιχείου. Οι επεξηγήσεις εργαλείων που χρησιμοποιούν ανάθεση (οι οποίες δημιουργούνται χρησιμοποιώντας την selectorεπιλογή ) δεν μπορούν να καταστραφούν μεμονωμένα σε στοιχεία ενεργοποίησης καταγωγής.

$('#element').tooltip('destroy')

Εκδηλώσεις

Τύπος συμβάντος Περιγραφή
show.bs.tooltip Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
εμφανίζεται.bs.επεξήγηση εργαλείου Αυτό το συμβάν ενεργοποιείται όταν η επεξήγηση εργαλείου έχει γίνει ορατή στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
απόκρυψη.bs.επεξήγηση εργαλείου Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
hidden.bs.tooltip Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη της επεξήγησης εργαλείου από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
εισήχθη.bs.επεξήγηση εργαλείου Αυτό το συμβάν ενεργοποιείται μετά το show.bs.tooltipσυμβάν όταν το πρότυπο συμβουλής εργαλείου έχει προστεθεί στο DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

Εξάρτηση από πρόσθετο

Τα popovers απαιτούν να συμπεριληφθεί η προσθήκη συμβουλής εργαλείου στην έκδοση του Bootstrap που διαθέτετε.

Λειτουργικότητα επιλογής

Για λόγους απόδοσης, το Tooltip και το Popover data-api είναι opt-in, που σημαίνει ότι πρέπει να τα αρχικοποιήσετε μόνοι σας .

Ένας τρόπος για να αρχικοποιήσετε όλα τα popover σε μια σελίδα θα ήταν να τα επιλέξετε με βάση το data-toggleχαρακτηριστικό τους:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Τα popover σε ομάδες κουμπιών, ομάδες εισόδου και πίνακες απαιτούν ειδική ρύθμιση

Όταν χρησιμοποιείτε popover σε στοιχεία μέσα σε ένα .btn-groupή ένα .input-groupή σε στοιχεία που σχετίζονται με τον πίνακα ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), θα πρέπει να καθορίσετε την επιλογή container: 'body'(που τεκμηριώνεται παρακάτω) για να αποφύγετε ανεπιθύμητες παρενέργειες (όπως το στοιχείο που μεγαλώνει και/ ή χάνει τις στρογγυλεμένες γωνίες του όταν ενεργοποιείται το popover).

Μην προσπαθήσετε να εμφανίσετε popover σε κρυφά στοιχεία

Η επίκληση $(...).popover('show')όταν είναι το στοιχείο προορισμού display: none;θα προκαλέσει την εσφαλμένη τοποθέτηση του popover.

Τα popover σε απενεργοποιημένα στοιχεία απαιτούν στοιχεία περιτυλίγματος

Για να προσθέσετε ένα popover σε ένα disabledή .disabledστοιχείο, βάλτε το στοιχείο μέσα σε ένα <div>και εφαρμόστε το popover σε αυτό <div>.

Σύνδεσμοι πολλαπλών γραμμών

Μερικές φορές θέλετε να προσθέσετε ένα popover σε έναν υπερσύνδεσμο που αναδιπλώνει πολλές γραμμές. Η προεπιλεγμένη συμπεριφορά του πρόσθετου popover είναι να το κεντράρετε οριζόντια και κάθετα. Προσθέστε white-space: nowrap;στις άγκυρες σας για να το αποφύγετε.

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

Στατικό popover

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

Popover top

Αυτή η θέση είναι σε λοβό. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover δεξιά

Αυτή η θέση είναι σε λοβό. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover κάτω

Αυτή η θέση είναι σε λοβό. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Έφυγε το Popover

Αυτή η θέση είναι σε λοβό. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Παράβλεψη στο επόμενο κλικ

Χρησιμοποιήστε το focusέναυσμα για να απορρίψετε τα popover στο επόμενο κλικ που κάνει ο χρήστης.

Απαιτείται συγκεκριμένη σήμανση για την απόρριψη στο επόμενο κλικ

Για σωστή συμπεριφορά μεταξύ προγραμμάτων περιήγησης και πολλαπλών πλατφορμών, πρέπει να χρησιμοποιήσετε την <a>ετικέτα, όχι την <button>ετικέτα, και πρέπει επίσης να συμπεριλάβετε τα χαρακτηριστικά role="button"και tabindex.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Χρήση

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

$('#example').popover(options)

Επιλογές

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

Ονομα Τύπος Προκαθορισμένο Περιγραφή
κινουμένων σχεδίων boolean αληθής Εφαρμόστε μια μετάβαση εξαφάνισης CSS στο popover
δοχείο χορδή | ψευδής ψευδής

Προσθέτει το popover σε ένα συγκεκριμένο στοιχείο. Παράδειγμα: container: 'body'. Αυτή η επιλογή είναι ιδιαίτερα χρήσιμη καθώς σας επιτρέπει να τοποθετήσετε το popover στη ροή του εγγράφου κοντά στο στοιχείο ενεργοποίησης - το οποίο θα εμποδίσει το popover να μετακινηθεί μακριά από το στοιχείο ενεργοποίησης κατά τη διάρκεια μιας αλλαγής μεγέθους παραθύρου.

περιεχόμενο χορδή | λειτουργία ''

Προεπιλεγμένη τιμή περιεχομένου εάν data-contentτο χαρακτηριστικό δεν υπάρχει.

Εάν δοθεί μια συνάρτηση, θα κληθεί με το thisσύνολο αναφοράς της στο στοιχείο στο οποίο είναι συνδεδεμένο το popover.

καθυστέρηση αριθμός | αντικείμενο 0

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

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

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

html boolean ψευδής Εισαγάγετε HTML στο popover. Εάν είναι false, η μέθοδος του jQuery textθα χρησιμοποιηθεί για την εισαγωγή περιεχομένου στο DOM. Χρησιμοποιήστε κείμενο εάν ανησυχείτε για επιθέσεις XSS.
τοποθέτηση χορδή | λειτουργία 'σωστά'

Πώς να τοποθετήσετε το popover - top | κάτω | αριστερά | δεξιά | αυτο.
Όταν έχει καθοριστεί το "auto", θα επαναπροσανατολίσει δυναμικά το popover. Για παράδειγμα, εάν η τοποθέτηση είναι "αυτόματη αριστερά", το popover θα εμφανίζεται στα αριστερά όταν είναι δυνατόν, διαφορετικά θα εμφανίζεται δεξιά.

Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της τοποθέτησης, καλείται με πρώτο όρισμα τον κόμβο DOM popover και δεύτερο τον κόμβο DOM στοιχείο ενεργοποίησης. Το thisπλαίσιο ορίζεται στην περίπτωση popover.

εκλέκτορας σειρά ψευδής Εάν παρέχεται επιλογέας, τα αντικείμενα popover θα εκχωρηθούν στους καθορισμένους στόχους. Στην πράξη, αυτό χρησιμοποιείται για να επιτρέψει στο δυναμικό περιεχόμενο HTML να προστεθούν popover. Δείτε αυτό και ένα ενημερωτικό παράδειγμα .
πρότυπο σειρά '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Βάση HTML για χρήση κατά τη δημιουργία του popover.

Το popover's titleθα εγχυθεί στο .popover-title.

Το popover's contentθα εγχυθεί στο .popover-content.

.arrowθα γίνει το βέλος του popover.

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

τίτλος χορδή | λειτουργία ''

Προεπιλεγμένη τιμή τίτλου εάν titleτο χαρακτηριστικό δεν υπάρχει.

Εάν δοθεί μια συνάρτηση, θα κληθεί με το thisσύνολο αναφοράς της στο στοιχείο στο οποίο είναι συνδεδεμένο το popover.

δώσει το έναυσμα για σειρά 'Κάντε κλικ' Πώς ενεργοποιείται το popover - κάντε κλικ | αιωρούνται | εστίαση | εγχειρίδιο. Μπορείτε να περάσετε πολλαπλούς ερεθισμούς. χωρίστε τα με ένα κενό. manualδεν μπορεί να συνδυαστεί με καμία άλλη σκανδάλη.
θέαση χορδή | αντικείμενο | λειτουργία { Selector: 'body', padding: 0 }

Διατηρεί το popover εντός των ορίων αυτού του στοιχείου. Παράδειγμα:viewport: '#viewport' ή{ "selector": "#viewport", "padding": 0 }

Εάν δοθεί μια συνάρτηση, καλείται με μοναδικό όρισμα τον κόμβο DOM στοιχείου ενεργοποίησης. Το thisπλαίσιο ορίζεται στην περίπτωση popover.

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

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

Μέθοδοι

$().popover(options)

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

.popover('show')

Αποκαλύπτει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popoverσυμβάν). Αυτό θεωρείται «χειροκίνητο» έναυσμα του popover. Τα popover των οποίων τόσο ο τίτλος όσο και το περιεχόμενο είναι μηδενικού μήκους δεν εμφανίζονται ποτέ.

$('#element').popover('show')

.popover('hide')

Κρύβει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του popover (δηλαδή πριν συμβεί το hidden.bs.popoverσυμβάν). Αυτό θεωρείται «χειροκίνητο» έναυσμα του popover.

$('#element').popover('hide')

.popover('toggle')

Εναλλάσσει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popoverή το hidden.bs.popoverσυμβάν). Αυτό θεωρείται «χειροκίνητο» έναυσμα του popover.

$('#element').popover('toggle')

.popover('destroy')

Κρύβει και καταστρέφει το popover ενός στοιχείου. Τα popover που χρησιμοποιούν ανάθεση (τα οποία δημιουργούνται χρησιμοποιώντας την selectorεπιλογή ) δεν μπορούν να καταστραφούν μεμονωμένα στα στοιχεία ενεργοποίησης καταγωγής.

$('#element').popover('destroy')

Εκδηλώσεις

Τύπος συμβάντος Περιγραφή
show.bs.popover Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
δεικνύεται.βς.popover Αυτό το συμβάν ενεργοποιείται όταν το popover έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
απόκρυψη.μπς.popover Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
κρυφός.β.ποποβερ Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του popover από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
εισήχθη.μπς.popover Αυτό το συμβάν ενεργοποιείται μετά το show.bs.popoverσυμβάν όταν το πρότυπο popover έχει προστεθεί στο DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

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

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

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

Όταν χρησιμοποιείτε ένα .closeκουμπί, πρέπει να είναι το πρώτο θυγατρικό του .alert-dismissibleκαι κανένα περιεχόμενο κειμένου δεν επιτρέπεται να εμφανίζεται πριν από αυτό στη σήμανση.

Χρήση

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

Μέθοδοι

$().alert()

Κάνει μια ειδοποίηση να ακούει για συμβάντα κλικ σε στοιχεία καταγωγής που έχουν το data-dismiss="alert"χαρακτηριστικό. (Δεν είναι απαραίτητο όταν χρησιμοποιείτε την αυτόματη προετοιμασία του data-api.)

$().alert('close')

Κλείνει μια ειδοποίηση αφαιρώντας την από το DOM. Εάν υπάρχουν οι κλάσεις .fadeκαι .inστο στοιχείο, η ειδοποίηση θα εξαφανιστεί πριν αφαιρεθεί.

Εκδηλώσεις

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

Τύπος συμβάντος Περιγραφή
κλείσιμο.β.ειδοποίηση Αυτό το συμβάν ενεργοποιείται αμέσως όταν closeκαλείται η μέθοδος παρουσίας.
κλειστό.β.συναγερμός Αυτό το συμβάν ενεργοποιείται όταν η ειδοποίηση έχει κλείσει (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Κουμπιά button.js

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

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Ο Firefox διατηρείται από καταστάσεις ελέγχου (απενεργοποίηση και έλεγχος) σε όλες τις φορτώσεις σελίδων . Μια λύση για αυτό είναι να χρησιμοποιήσετε autocomplete="off". Δείτε το σφάλμα Mozilla #654072 .

Πολιτειακός

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

Αυτή η δυνατότητα έχει καταργηθεί από την έκδοση 3.3.5 και έχει καταργηθεί στην έκδοση 4.

Χρησιμοποιήστε όποια κατάσταση θέλετε!

Για χάρη αυτής της επίδειξης, χρησιμοποιούμε data-loading-textκαι $().button('loading'), αλλά αυτή δεν είναι η μόνη κατάσταση που μπορείτε να χρησιμοποιήσετε. Δείτε περισσότερα σχετικά με αυτό παρακάτω στην $().button(string)τεκμηρίωση .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

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

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

Απαιτούνται προεναλλαγές κουμπιών.active καιaria-pressed="true"

Για κουμπιά με προεναλλαγή, πρέπει να προσθέσετε την .activeκλάση και το aria-pressed="true"χαρακτηριστικό στον buttonεαυτό σας.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Πλαίσιο ελέγχου / Ραδιόφωνο

Προσθέστε data-toggle="buttons"σε ένα .btn-groupπλαίσιο ελέγχου που περιέχει ή εισόδους ραδιοφώνου για να ενεργοποιήσετε την εναλλαγή στα αντίστοιχα στυλ τους.

Απαιτούνται προεπιλεγμένες επιλογές.active

Για προεπιλεγμένες επιλογές, πρέπει να προσθέσετε μόνοι σας την .activeκλάση στην είσοδο label.

Η οπτική ελεγμένη κατάσταση ενημερώνεται μόνο με κλικ

Εάν η επιλεγμένη κατάσταση ενός κουμπιού πλαισίου ελέγχου ενημερωθεί χωρίς να ενεργοποιηθεί ένα clickσυμβάν στο κουμπί (π.χ. μέσω <input type="reset">ή μέσω ρύθμισης της checkedιδιότητας της εισόδου), θα χρειαστεί να αλλάξετε την .activeκλάση στην είσοδο labelμόνοι σας.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Μέθοδοι

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Σύμπτυξη collapse.js

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

Εξάρτηση από πρόσθετο

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

Παράδειγμα

Κάντε κλικ στα κουμπιά παρακάτω για εμφάνιση και απόκρυψη ενός άλλου στοιχείου μέσω αλλαγών κλάσης:

  • .collapseκρύβει περιεχόμενο
  • .collapsingεφαρμόζεται κατά τις μεταβάσεις
  • .collapse.inδείχνει περιεχόμενο

Μπορείτε να χρησιμοποιήσετε έναν σύνδεσμο με το hrefχαρακτηριστικό ή ένα κουμπί με το data-targetχαρακτηριστικό. Και στις δύο περιπτώσεις data-toggle="collapse"απαιτείται.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

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

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.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Είναι επίσης δυνατό να ανταλλάξετε .panel-bodys με .list-groups.

  • Bootply
  • Ένα itmus ac facilin
  • Δεύτερος έρωτας

Κάντε προσβάσιμα τα στοιχεία ελέγχου επέκτασης/σύμπτυξης

Φροντίστε να προσθέσετε aria-expandedστο στοιχείο ελέγχου. Αυτό το χαρακτηριστικό ορίζει ρητά την τρέχουσα κατάσταση του πτυσσόμενου στοιχείου σε συσκευές ανάγνωσης οθόνης και παρόμοιες υποστηρικτικές τεχνολογίες. Εάν το πτυσσόμενο στοιχείο είναι κλειστό από προεπιλογή, θα πρέπει να έχει τιμή aria-expanded="false". Εάν έχετε ρυθμίσει το πτυσσόμενο στοιχείο να είναι ανοιχτό από προεπιλογή χρησιμοποιώντας την inκλάση, ορίστε aria-expanded="true"το στο στοιχείο ελέγχου. Η προσθήκη θα αλλάξει αυτόματα αυτό το χαρακτηριστικό με βάση το εάν το πτυσσόμενο στοιχείο έχει ανοίξει ή κλείσει.

Επιπλέον, εάν το στοιχείο ελέγχου σας στοχεύει ένα μεμονωμένο πτυσσόμενο στοιχείο – δηλαδή το data-targetχαρακτηριστικό δείχνει σε έναν idεπιλογέα – μπορείτε να προσθέσετε ένα πρόσθετο aria-controlsχαρακτηριστικό στο στοιχείο ελέγχου, το οποίο να περιέχει το idστοιχείο του πτυσσόμενου στοιχείου. Οι σύγχρονες συσκευές ανάγνωσης οθόνης και παρόμοιες υποστηρικτικές τεχνολογίες χρησιμοποιούν αυτό το χαρακτηριστικό για να παρέχουν στους χρήστες πρόσθετες συντομεύσεις για την απευθείας πλοήγηση στο ίδιο το πτυσσόμενο στοιχείο.

Χρήση

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

  • .collapseκρύβει το περιεχόμενο
  • .collapse.inδείχνει το περιεχόμενο
  • .collapsingπροστίθεται όταν ξεκινά η μετάβαση και αφαιρείται όταν τελειώσει

Αυτές οι τάξεις βρίσκονται στο component-animations.less.

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

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

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

Μέσω JavaScript

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

$('.collapse').collapse()

Επιλογές

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

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

Μέθοδοι

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Εναλλάσσει ένα πτυσσόμενο στοιχείο σε εμφάνιση ή απόκρυψη. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί το πτυσσόμενο στοιχείο (δηλαδή πριν συμβεί το shown.bs.collapseή το hidden.bs.collapseσυμβάν).

.collapse('show')

Εμφανίζει ένα πτυσσόμενο στοιχείο. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το πτυσσόμενο στοιχείο (δηλαδή πριν συμβεί το shown.bs.collapseσυμβάν).

.collapse('hide')

Κρύβει ένα πτυσσόμενο στοιχείο. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του πτυσσόμενου στοιχείου (δηλαδή πριν συμβεί το hidden.bs.collapseσυμβάν).

Εκδηλώσεις

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

Τύπος συμβάντος Περιγραφή
εμφανίζω.β.κατάρρευση Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
φαίνεται.β.σύμπτυξη Αυτό το συμβάν ενεργοποιείται όταν ένα στοιχείο σύμπτυξης έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
απόκρυψη.β.κατάρρευση Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου.
κρυφός.β.σύμπτυξη Αυτό το συμβάν ενεργοποιείται όταν ένα στοιχείο σύμπτυξης έχει κρυφτεί από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

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

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Προαιρετικές λεζάντες

Προσθέστε λεζάντες στις διαφάνειές σας εύκολα με το .carousel-captionστοιχείο μέσα σε οποιοδήποτε .item. Τοποθετήστε σχεδόν οποιοδήποτε προαιρετικό HTML εκεί και θα ευθυγραμμιστεί και θα μορφοποιηθεί αυτόματα.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Πολλαπλά καρουζέλ

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

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

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

Το data-ride="carousel"χαρακτηριστικό χρησιμοποιείται για την επισήμανση ενός καρουζέλ ως κινούμενης κίνησης ξεκινώντας από τη φόρτωση της σελίδας. Δεν μπορεί να χρησιμοποιηθεί σε συνδυασμό με (περιττή και περιττή) ρητή προετοιμασία JavaScript του ίδιου καρουζέλ.

Μέσω JavaScript

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

$('.carousel').carousel()

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

Ονομα τύπος Προκαθορισμένο περιγραφή
διάστημα αριθμός 5000 Ο χρόνος καθυστέρησης μεταξύ της αυτόματης ανακύκλωσης ενός αντικειμένου. Εάν είναι false, το καρουζέλ δεν θα ανακυκλωθεί αυτόματα.
παύση χορδή | μηδενικό "φτερουγίζω" Εάν οριστεί σε "hover", διακόπτει παύση το cycling του carousel on mouseenterκαι συνεχίζει το cycling του carousel on mouseleave. Εάν οριστεί σε null, η τοποθέτηση του δείκτη του ποντικιού πάνω από το καρουζέλ δεν θα το κάνει παύση.
κάλυμμα boolean αληθής Είτε το καρουζέλ πρέπει να κινείται συνεχώς ή να έχει σκληρές στάσεις.
πληκτρολόγιο boolean αληθής Εάν το καρουζέλ πρέπει να αντιδρά σε συμβάντα πληκτρολογίου.

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

$('.carousel').carousel({
  interval: 2000
})

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

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

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

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

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

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

Και τα δύο συμβάντα έχουν τις ακόλουθες πρόσθετες ιδιότητες:

  • direction: Η κατεύθυνση προς την οποία ολισθαίνει το καρουσέλ (είτε "left"είτε "right").
  • relatedTarget: Το στοιχείο DOM που τοποθετείται στη θέση του ως ενεργό στοιχείο.

Όλα τα γεγονότα καρουσέλ πυροβολούνται στο ίδιο το καρουζέλ (δηλ. στο <div class="carousel">).

Τύπος συμβάντος Περιγραφή
τσουλήθρα.β.καρουσέλ Αυτό το συμβάν ενεργοποιείται αμέσως όταν slideγίνεται επίκληση της μεθόδου παρουσίας.
γλίστρησε.β.καρουσέλ Αυτό το συμβάν ενεργοποιείται όταν το καρουζέλ έχει ολοκληρώσει τη μετάβασή του.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Τοποθετήστε affix.js

Παράδειγμα

Η προσθήκη επιθέματος position: fixed;ενεργοποιείται και απενεργοποιείται, μιμούμενος το εφέ που βρέθηκε με το position: sticky;. Η υποπλοήγηση στα δεξιά είναι μια ζωντανή επίδειξη του πρόσθετου affix.


Χρήση

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

Σημείωση: Μην χρησιμοποιείτε την προσθήκη προσάρτησης σε ένα στοιχείο που περιέχεται σε ένα σχετικά τοποθετημένο στοιχείο, όπως μια τραβηγμένη ή ωθημένη στήλη, λόγω σφάλματος απόδοσης του Safari .

Τοποθέτηση μέσω CSS

Το πρόσθετο επιθέματος εναλλάσσεται μεταξύ τριών κλάσεων, καθεμία από τις οποίες αντιπροσωπεύει μια συγκεκριμένη κατάσταση: .affix, .affix-top, και .affix-bottom. Πρέπει να παρέχετε τα στυλ, με εξαίρεση το position: fixed;on .affix, για αυτές τις κλάσεις οι ίδιοι (ανεξάρτητα από αυτήν την προσθήκη) για να χειρίζονται τις πραγματικές θέσεις.

Δείτε πώς λειτουργεί η προσθήκη επιθέματος:

  1. Για να ξεκινήσετε, το πρόσθετο προσθέτει .affix-topγια να υποδείξει ότι το στοιχείο βρίσκεται στην υψηλότερη θέση του. Σε αυτό το σημείο δεν απαιτείται τοποθέτηση CSS.
  2. Η κύλιση πέρα ​​από το στοιχείο που θέλετε να επικολληθεί θα πρέπει να ενεργοποιήσει την πραγματική τοποθέτηση. Εδώ .affixαντικαθιστά .affix-topκαι θέτει position: fixed;(παρέχεται από το CSS του Bootstrap).
  3. Εάν έχει οριστεί μια μετατόπιση κάτω, η κύλιση πέρα ​​από αυτήν θα πρέπει να αντικατασταθεί .affixμε .affix-bottom. Δεδομένου ότι οι μετατοπίσεις είναι προαιρετικές, η ρύθμιση μίας απαιτεί να ορίσετε το κατάλληλο CSS. Σε αυτή την περίπτωση, προσθέστε position: absolute;όταν χρειάζεται. Η προσθήκη χρησιμοποιεί το χαρακτηριστικό δεδομένων ή την επιλογή JavaScript για να καθορίσει πού θα τοποθετήσει το στοιχείο από εκεί.

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

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

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

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

Μέσω JavaScript

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Επιλογές

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

Ονομα τύπος Προκαθορισμένο περιγραφή
αντισταθμίζεται αριθμός | λειτουργία | αντικείμενο 10 Pixel για μετατόπιση από την οθόνη κατά τον υπολογισμό της θέσης κύλισης. Εάν παρέχεται ένας μόνο αριθμός, η μετατόπιση θα εφαρμοστεί τόσο στην επάνω όσο και στην κάτω κατεύθυνση. Για να παρέχετε μια μοναδική, κάτω και πάνω μετατόπιση, απλώς δώστε ένα αντικείμενο offset: { top: 10 }ή offset: { top: 10, bottom: 5 }. Χρησιμοποιήστε μια συνάρτηση όταν χρειάζεται να υπολογίσετε δυναμικά μια μετατόπιση.
στόχος επιλογέας | κόμβος | στοιχείο jQuery το windowαντικείμενο Καθορίζει το στοιχείο προορισμού του επιθέματος.

Μέθοδοι

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Υπολογίζει εκ νέου την κατάσταση του προσαρτήματος με βάση τις διαστάσεις, τη θέση και τη θέση κύλισης των σχετικών στοιχείων. Οι κλάσεις .affix, .affix-top, και .affix-bottomπροστίθενται ή αφαιρούνται από το επικολλημένο περιεχόμενο σύμφωνα με τη νέα κατάσταση. Αυτή η μέθοδος πρέπει να καλείται κάθε φορά που αλλάζουν οι διαστάσεις του επικολλημένου περιεχομένου ή του στοιχείου στόχου, για να διασφαλιστεί η σωστή τοποθέτηση του επικολλημένου περιεχομένου.

$('#myAffix').affix('checkPosition')

Εκδηλώσεις

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

Τύπος συμβάντος Περιγραφή
επικολλώ.β.σ Αυτό το συμβάν ενεργοποιείται αμέσως πριν την τοποθέτηση του στοιχείου.
επικολλήθηκε.β.σ Αυτό το συμβάν ενεργοποιείται μετά την τοποθέτηση του στοιχείου.
affix-top.bs.affix Αυτό το συμβάν ενεργοποιείται αμέσως πριν το στοιχείο τοποθετηθεί στην κορυφή.
affixed-top.bs.affix Αυτό το συμβάν ενεργοποιείται αφού το στοιχείο έχει τοποθετηθεί στην κορυφή.
affix-bottom.bs.affix Αυτό το συμβάν ενεργοποιείται αμέσως πριν το στοιχείο έχει επικολληθεί στο κάτω μέρος.
affixed-bottom.bs.affix Αυτό το συμβάν ενεργοποιείται αφού το στοιχείο έχει επικολληθεί στο κάτω μέρος.