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.