Bootstrap - przegląd wtyczek

Komponenty omówione w poprzednich rozdziałach pod Layout Componentsto dopiero początek. Bootstrap jest dostarczany w pakiecie z 12 wtyczkami jQuery, które rozszerzają funkcje i mogą dodać więcej interakcji do Twojej witryny. Aby rozpocząć korzystanie z wtyczek JavaScript Bootstrap, nie musisz być zaawansowanym programistą JavaScript. Wykorzystując Bootstrap Data API, większość wtyczek można uruchomić bez pisania ani jednej linii kodu.

Wtyczki Bootstrap można umieścić w witrynie w dwóch formach -

Individually- Korzystanie z indywidualnych plików * .js programu Bootstrap . Niektóre wtyczki i komponenty CSS zależą od innych wtyczek. Jeśli dołączasz wtyczki indywidualnie, upewnij się, że sprawdziłeś te zależności w dokumentacji.
Lub compiled (all at once)- Korzystanie bootstrap.js ani minified bootstrap.min.js . Nie próbuj uwzględniać obu, ponieważ zarówno bootstrap.js , jak i bootstrap.min.js zawierają wszystkie wtyczki w jednym pliku.

Wszystkie wtyczki zależą od jQuery. Dlatego jQuery musi być dołączone przed plikami wtyczek. Sprawdź bower.json, aby zobaczyć, które wersje jQuery są obsługiwane.

Atrybuty danych

Wszystkie wtyczki Bootstrap są dostępne za pomocą dołączonego interfejsu API danych. Dlatego nie musisz dołączać ani jednej linii kodu JavaScript, aby wywołać jakąkolwiek z funkcji wtyczki.
W niektórych sytuacjach może być pożądane wyłączenie tej funkcji Data API. Jeśli chcesz wyłączyć interfejs API danych, możesz usunąć powiązanie atrybutów, dodając następujący wiersz JavaScript -

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

Aby wyłączyć konkretną / pojedynczą wtyczkę, po prostu dołącz nazwę wtyczki jako przestrzeń nazw wraz z przestrzenią nazw Data-API w ten sposób -

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

Programowy interfejs API

Twórcy Bootstrap uważają, że powinieneś być w stanie używać wszystkich wtyczek wyłącznie za pośrednictwem JavaScript API. Wszystkie publiczne interfejsy API są pojedynczymi metodami, które można łączyć w łańcuchy i zwracają kolekcję wykonaną na przykład -

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

Wszystkie metody akceptują opcjonalny obiekt opcji, ciąg znaków, który jest przeznaczony dla określonej metody lub nic (co inicjuje wtyczkę z domyślnym zachowaniem), jak pokazano poniżej -

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Każda wtyczka ujawnia również swój surowy konstruktor w pliku Constructorwłaściwość: $ .fn.popover.Constructor . Jeśli chcesz pobrać konkretną instancję wtyczki, pobierz ją bezpośrednio z elementu -

$('[rel = popover]').data('popover').

Brak konfliktu

Wtyczki Bootstrap mogą być czasami używane z innymi strukturami interfejsu użytkownika. W takich okolicznościach czasami mogą wystąpić kolizje przestrzeni nazw. Aby przezwyciężyć to wezwanie.noConflict we wtyczce, dla której chcesz przywrócić wartość.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Wydarzenia

Bootstrap zapewnia niestandardowe zdarzenia dla większości unikalnych działań wtyczki. Ogólnie rzecz biorąc, te wydarzenia mają dwie formy -

Infinitive form- Jest to uruchamiane na początku wydarzenia. Np . Pokaż . Zdarzenia bezokolicznikowe zapewniają funkcjonalność disableDefault . Daje to możliwość zatrzymania wykonywania akcji przed jej rozpoczęciem.

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

Past participle form- Jest to uruchamiane po zakończeniu akcji. Np. Pokazano.