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 (używając funkcji Bootstrap's individual js/dist/*.js) lub wszystkie na raz używając bootstrap.jslub zminifikowane 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 jest skierowany do konkretnej metody 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:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.1.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ść.