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

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

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

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

Μπορείτε να χρησιμοποιήσετε όλα τα πρόσθετα 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
})

Απολυμαντικό

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

Η προεπιλεγμένη whiteListτιμή είναι η εξής:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

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

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Εάν θέλετε να παρακάμψετε το απολυμαντικό μας επειδή προτιμάτε να χρησιμοποιήσετε μια αποκλειστική βιβλιοθήκη, για παράδειγμα DOMPurify , θα πρέπει να κάνετε τα εξής:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

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

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

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

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

Transitions transition.js

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

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

Τι είναι μέσα

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

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

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

$.support.transition = false

Modals modal.js

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

Λόγω του τρόπου με τον οποίο η 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>

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

Τα 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" 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" 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="".

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

Μέθοδοι

.modal(options)

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

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

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

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

Εκδηλώσεις

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

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

$('#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()

Επιλογές

Κανένας

Μέθοδοι

$().dropdown('toggle')

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

Εκδηλώσεις

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

Χρήση

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

Ανεξάρτητα από τη μέθοδο υλοποίησης, το 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="".

Εκδηλώσεις

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

Χρήση

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

$('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 για κινούμενα σχέδια και χαρακτηριστικά δεδομένων για τοπική αποθήκευση τίτλων.

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

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

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

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

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

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

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

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

Επιλογές

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

Μέθοδοι

$().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')

Εκδηλώσεις

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

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

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

Στατικό popover

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

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

<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 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="".

Μέθοδοι

$().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')

Εκδηλώσεις

$('#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 εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα ειδοποίησης.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Κουμπιά button.js

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

Πολιτειακός

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

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

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

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

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

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

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

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

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

Μέθοδοι

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

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

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

Σύμπτυξη collapse.js

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

Παράδειγμα

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

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

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

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

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

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

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

Χρήση

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

• .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="".

Μέθοδοι

.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 εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα κατάρρευσης.

$('#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 εκεί και θα ευθυγραμμιστεί και θα μορφοποιηθεί αυτόματα.

Ετικέτα πρώτης διαφάνειας

Nulla vitae elit libero, a pharetra augue mollis interdum.

Ετικέτα δεύτερης διαφάνειας

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ετικέτα τρίτης διαφάνειας

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

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

<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="".

Μέθοδοι

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

Εκδηλώσεις

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

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

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

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

$('#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".

Μέθοδοι

.affix(options)

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

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

.affix('checkPosition')

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

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

Εκδηλώσεις

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