JavaScript

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

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

Εάν χρησιμοποιείτε ένα πακέτο (Webpack, Συνάθροιση…), μπορείτε να χρησιμοποιήσετε /js/dist/*.jsαρχεία που είναι έτοιμα για το UMD.

Χρησιμοποιώντας το Bootstrap ως λειτουργική μονάδα

Παρέχουμε μια έκδοση του Bootstrap που έχει κατασκευαστεί ως ESM( bootstrap.esm.jsκαι bootstrap.esm.min.js) που σας επιτρέπει να χρησιμοποιείτε το Bootstrap ως λειτουργικό στοιχείο στο πρόγραμμα περιήγησής σας, εάν το υποστηρίζουν τα στοχευμένα προγράμματα περιήγησής σας .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Εξαρτήσεις

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

Τα αναπτυσσόμενα, τα popover και οι συμβουλές εργαλείων μας εξαρτώνται επίσης από το Popper .

Θέλετε ακόμα να χρησιμοποιήσετε το jQuery; Είναι δυνατό!

Το Bootstrap 5 έχει σχεδιαστεί για χρήση χωρίς jQuery, αλλά εξακολουθεί να είναι δυνατή η χρήση των στοιχείων μας με το jQuery. Εάν το Bootstrap εντοπίσει jQueryστο windowαντικείμενο , θα προσθέσει όλα τα στοιχεία μας στο σύστημα πρόσθετων του jQuery. Αυτό σημαίνει ότι θα μπορείτε να $('[data-bs-toggle="tooltip"]').tooltip()ενεργοποιήσετε τις συμβουλές εργαλείων. Το ίδιο ισχύει και για τα άλλα εξαρτήματά μας.

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

Σχεδόν όλα τα πρόσθετα Bootstrap μπορούν να ενεργοποιηθούν και να ρυθμιστούν μόνο μέσω HTML με χαρακτηριστικά δεδομένων (ο προτιμώμενος τρόπος χρήσης της λειτουργικότητας JavaScript). Βεβαιωθείτε ότι χρησιμοποιείτε μόνο ένα σύνολο χαρακτηριστικών δεδομένων σε ένα μόνο στοιχείο (π.χ., δεν μπορείτε να ενεργοποιήσετε μια επεξήγηση εργαλείου και ένα modal από το ίδιο κουμπί.)

Εκδηλώσεις

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

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

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

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

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

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Εάν θέλετε να λάβετε μια συγκεκριμένη παρουσία προσθήκης, κάθε προσθήκη εκθέτει μια getInstanceμέθοδο. Για να το ανακτήσετε απευθείας από ένα στοιχείο, κάντε το εξής: bootstrap.Popover.getInstance(myPopoverEl).

Επιλογείς CSS σε κατασκευαστές

Μπορείτε επίσης να χρησιμοποιήσετε έναν επιλογέα CSS ως πρώτο όρισμα αντί για ένα στοιχείο DOM για την προετοιμασία της προσθήκης. Επί του παρόντος, το στοιχείο για το πρόσθετο βρίσκεται με τη querySelectorμέθοδο, καθώς οι προσθήκες μας υποστηρίζουν μόνο ένα στοιχείο.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Ασύγχρονες συναρτήσεις και μεταβάσεις

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

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

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

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

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

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

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

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Χωρίς διένεξη (μόνο εάν χρησιμοποιείτε jQuery)

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

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

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

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

bootstrap.Tooltip.VERSION // => "5.1.3"

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

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

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

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

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

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

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

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

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

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})