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.js
lub zminimalizowane bootstrap.min.js
(nie uwzględniaj obu).
Jeśli korzystasz z bundlera (Webpack, Rollup…), możesz użyć /js/dist/*.js
plikó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-api
sposó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')
Selektory
Obecnie do odpytywania elementów DOM używamy metod natywnych querySelector
i querySelectorAll
ze względu na wydajność, więc musisz używać prawidłowych selektorów . Jeśli używasz specjalnych selektorów, na przykład: collapse:Example
pamiętaj, aby je zmienić.
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 (event) {
if (!data) {
return event.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 Constructor
wł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 (event) {
// 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 (event) {
$('#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.Default
obiekt 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ć .noConflict
wtyczkę, 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 VERSION
właściwości konstruktora wtyczki. Na przykład dla wtyczki podpowiedzi:
$.fn.tooltip.Constructor.VERSION // => "4.6.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.
Biblioteki zewnętrzne
Bootstrap oficjalnie nie obsługuje bibliotek JavaScript innych firm, takich jak Prototype lub jQuery UI. Pomimo .noConflict
zdarzeń w przestrzeni nazw mogą występować problemy ze zgodnością, które trzeba naprawić samodzielnie.
Utyl
Wszystkie pliki JavaScript Bootstrap są zależne od util.js
i 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.js
zawiera funkcje narzędziowe i podstawowy pomocnik dla transitionEnd
zdarzeń, 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 whiteList
jest 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)
}
})