JavaScript

Indywidualne lub skompilowane

Wtyczki mogą być dołączane pojedynczo (za pomocą funkcji Bootstrap's individual js/dist/*.js) lub wszystkie naraz za pomocą bootstrap.jslub zminimalizowane bootstrap.min.js(nie uwzględniaj obu).

Jeśli korzystasz z bundlera (Webpack, Rollup…), możesz użyć /js/dist/*.jsplików gotowych do UMD.

Używanie Bootstrapa jako modułu

Dostarczamy wersję Bootstrap zbudowaną jako ESM( bootstrap.esm.jsi bootstrap.esm.min.js), która pozwala na używanie Bootstrap jako modułu w przeglądarce, jeśli Twoje docelowe przeglądarki go obsługują .

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

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

Zależności

Niektóre wtyczki i komponenty CSS zależą od innych wtyczek. Jeśli dołączasz wtyczki pojedynczo, sprawdź te zależności w dokumentach.

Nasze listy rozwijane, okienka wyskakujące i podpowiedzi również zależą od Poppera .

Nadal chcesz używać jQuery? To jest możliwe!

Bootstrap 5 został zaprojektowany do użytku bez jQuery, ale nadal można używać naszych komponentów z jQuery. Jeśli Bootstrap wykryje jQueryw windowobiekcie , doda wszystkie nasze komponenty do systemu wtyczek jQuery; oznacza to, że będziesz mógł $('[data-bs-toggle="tooltip"]').tooltip()włączyć podpowiedzi. To samo dotyczy innych naszych komponentów.

Atrybuty danych

Prawie wszystkie wtyczki Bootstrap można włączyć i skonfigurować za pomocą samego HTML z atrybutami danych (nasz preferowany sposób korzystania z funkcji JavaScript). Upewnij się, że używasz tylko jednego zestawu atrybutów danych na pojedynczym elemencie (np. nie możesz wywołać podpowiedzi i modalnej z tego samego przycisku).

Wydarzenia

Bootstrap zapewnia niestandardowe zdarzenia dla większości unikalnych działań wtyczek. Ogólnie rzecz biorąc, mają one formę bezokolicznika i imiesłowu przeszłego - gdzie bezokolicznik (np. show) jest wyzwalany na początku zdarzenia, a jego forma imiesłowu przeszłego (np. shown) jest wyzwalana po zakończeniu działania.

Wszystkie zdarzenia bezokolicznikowe zapewniają preventDefault()funkcjonalność. Daje to możliwość zatrzymania wykonywania akcji przed jej rozpoczęciem. Zwrócenie false z programu obsługi zdarzeń również spowoduje automatyczne wywołanie 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...
})

Programowy interfejs API

Wszystkie konstruktory akceptują opcjonalny obiekt opcji lub nic (co inicjuje wtyczkę z jej domyślnym zachowaniem):

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

Jeśli chcesz uzyskać konkretną instancję wtyczki, każda wtyczka udostępnia getInstancemetodę. Aby pobrać go bezpośrednio z elementu, wykonaj następujące czynności: bootstrap.Popover.getInstance(myPopoverEl).

Selektory CSS w konstruktorach

Możesz również użyć selektora CSS jako pierwszego argumentu zamiast elementu DOM do zainicjowania wtyczki. Obecnie element wtyczki znajduje się za pomocą querySelectormetody, ponieważ nasze wtyczki obsługują tylko jeden element.

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

Funkcje asynchroniczne i przejścia

Wszystkie metody programistycznego interfejsu API są asynchroniczne i wracają do obiektu wywołującego po rozpoczęciu przejścia, ale przed jego zakończeniem .

Aby wykonać akcję po zakończeniu przejścia, możesz odsłuchać odpowiednie zdarzenie.

var myCollapseEl = document.getElementById('myCollapse')

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

Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .

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

Ustawienia domyślne

Możesz zmienić domyślne ustawienia wtyczki, modyfikując Constructor.Defaultobiekt wtyczki:

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

Brak konfliktu (tylko jeśli używasz jQuery)

Czasami konieczne jest użycie wtyczek Bootstrap z innymi frameworkami UI. W takich okolicznościach czasami mogą wystąpić kolizje przestrzeni nazw. Jeśli tak się stanie, możesz wywołać .noConflictwtyczkę, której wartość chcesz przywrócić.

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

Numery wersji

Dostęp do wersji każdej z wtyczek Bootstrap można uzyskać za pośrednictwem VERSIONwłaściwości konstruktora wtyczki. Na przykład dla wtyczki podpowiedzi:

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

Brak specjalnych rozwiązań awaryjnych, gdy JavaScript jest wyłączony

Wtyczki Bootstrap nie wycofują się szczególnie wdzięcznie, gdy JavaScript jest wyłączony. Jeśli zależy Ci na wrażeniach użytkownika w tym przypadku, użyj, <noscript>aby wyjaśnić sytuację (i jak ponownie włączyć JavaScript) użytkownikom i/lub dodaj własne niestandardowe rozwiązania zastępcze.

Odkażacz

Etykietki narzędzi i popovery używają naszego wbudowanego narzędzia do czyszczenia, aby oczyścić opcje, które akceptują HTML.

Wartość domyślna allowListjest następująca:

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: []
}

Jeśli chcesz dodać nowe wartości do tej wartości domyślnej allowList, możesz wykonać następujące czynności:

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)

Jeśli chcesz ominąć nasz środek odkażający, ponieważ wolisz korzystać z dedykowanej biblioteki, na przykład DOMPurify , powinieneś wykonać następujące czynności:

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