JavaScript

Ożyw Bootstrap dzięki naszym opcjonalnym wtyczkom JavaScript zbudowanym na jQuery. Dowiedz się więcej o każdej wtyczce, naszych danych i opcjach programistycznych interfejsów API i nie tylko.

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.

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. Pamiętaj też, że wszystkie wtyczki zależą od jQuery (oznacza to, że jQuery musi być dołączone przed plikami wtyczek). Skonsultuj się z naszympackage.json , aby dowiedzieć się, które wersje jQuery są obsługiwane.

Nasze listy rozwijane, okienka popover i podpowiedzi również zależą od Popper.js .

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

Jednak w niektórych sytuacjach może być pożądane wyłączenie tej funkcji. Aby wyłączyć interfejs API atrybutów danych, odłącz wszystkie zdarzenia w dokumencie w przestrzeni nazw w następujący data-apisposób:

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

Alternatywnie, aby kierować reklamy na konkretną wtyczkę, po prostu uwzględnij nazwę wtyczki jako przestrzeń nazw wraz z przestrzenią nazw data-api w następujący sposób:

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

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

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

Programowy interfejs API

Uważamy również, że powinieneś być w stanie korzystać ze wszystkich wtyczek Bootstrap wyłącznie poprzez API JavaScript. Wszystkie publiczne interfejsy API są pojedynczymi metodami, które można łączyć w łańcuchy, i zwracają kolekcję, na której wykonano działanie.

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

Wszystkie metody powinny akceptować opcjonalny obiekt opcji, ciąg znaków, który wskazuje konkretną metodę, lub nic (co inicjuje wtyczkę z zachowaniem domyślnym):

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

Każda wtyczka udostępnia również swój surowy konstruktor we Constructorwłaściwości: $.fn.popover.Constructor. Jeśli chcesz pobrać konkretną instancję wtyczki, pobierz ją bezpośrednio z elementu: $('[rel="popover"]').data('popover').

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.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

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

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('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
$.fn.modal.Constructor.Default.keyboard = false

Brak konfliktu

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 jQuery można uzyskać za pośrednictwem VERSIONwłaściwości konstruktora wtyczki. Na przykład dla wtyczki podpowiedzi:

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

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.

Utyl

Wszystkie pliki JavaScript Bootstrap są zależne od util.jsi muszą być dołączone wraz z innymi plikami JavaScript. Jeśli używasz skompilowanego (lub zminimalizowanego) bootstrap.js, nie ma potrzeby dołączania tego — już tam jest.

util.jszawiera funkcje narzędziowe i podstawowy pomocnik dla transitionEndzdarzeń, a także emulator przejścia CSS. Jest używany przez inne wtyczki do sprawdzania obsługi przejść CSS i wyłapywania zawieszonych przejść.

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 whiteListjest następująca:

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', '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 whiteList, możesz wykonać następujące czynności:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.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)

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:

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