JavaScript
Buhayin ang Bootstrap gamit ang aming mga opsyonal na plugin ng JavaScript. Matuto tungkol sa bawat plugin, aming data at mga opsyon sa programmatic na API, at higit pa.
Indibidwal o pinagsama-sama
Maaaring isama ang mga plugin nang isa-isa (gamit ang indibidwal na Bootstrap js/dist/*.js
), o sabay-sabay gamit bootstrap.js
o ang minified bootstrap.min.js
(huwag isama ang pareho).
Kung gumagamit ka ng isang bundler (Webpack, Rollup...), maaari kang gumamit ng /js/dist/*.js
mga file na nakahanda sa UMD.
Paggamit ng Bootstrap bilang isang module
Nagbibigay kami ng bersyon ng Bootstrap na binuo bilang ESM
( bootstrap.esm.js
at bootstrap.esm.min.js
) na nagbibigay-daan sa iyong gamitin ang Bootstrap bilang module sa iyong browser, kung sinusuportahan ito ng iyong mga naka-target na browser .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Mga hindi tugmang plugin
Dahil sa mga limitasyon ng browser, ang ilan sa aming mga plugin, katulad ng Dropdown, Tooltip at Popover plugin, ay hindi magagamit sa isang <script>
tag na may module
uri dahil nakadepende ang mga ito sa Popper. Para sa karagdagang impormasyon tungkol sa isyu tingnan dito .
Dependencies
Ang ilang mga plugin at mga bahagi ng CSS ay nakasalalay sa iba pang mga plugin. Kung isa-isa kang magsasama ng mga plugin, tiyaking suriin ang mga dependency na ito sa mga doc.
Ang aming mga dropdown, popover at tooltip ay nakadepende rin sa Popper .
Gusto pa ring gumamit ng jQuery? Posible!
Ang Bootstrap 5 ay idinisenyo upang magamit nang walang jQuery, ngunit posible pa ring gamitin ang aming mga bahagi sa jQuery. Kung nakita ng Bootstrap jQuery
sa window
object , idaragdag nito ang lahat ng aming mga bahagi sa sistema ng plugin ng jQuery; nangangahulugan ito na magagawa mo $('[data-bs-toggle="tooltip"]').tooltip()
upang paganahin ang mga tooltip. Ang parehong napupunta para sa aming iba pang mga bahagi.
Mga katangian ng data
Halos lahat ng mga plugin ng Bootstrap ay maaaring paganahin at i-configure sa pamamagitan ng HTML lamang na may mga katangian ng data (ang aming gustong paraan ng paggamit ng paggana ng JavaScript). Tiyaking gumamit lamang ng isang hanay ng mga katangian ng data sa isang elemento (hal., hindi ka makakapag-trigger ng tooltip at modal mula sa parehong button.)
Mga pumipili
Sa kasalukuyan upang mag-query ng mga elemento ng DOM ay ginagamit namin ang mga katutubong pamamaraan querySelector
at querySelectorAll
para sa mga dahilan ng pagganap, kaya kailangan mong gumamit ng mga wastong tagapili . Kung gumagamit ka ng mga espesyal na tagapili, halimbawa: collapse:Example
tiyaking takasan ang mga ito.
Mga kaganapan
Nagbibigay ang Bootstrap ng mga custom na kaganapan para sa mga natatanging pagkilos ng karamihan sa mga plugin. Sa pangkalahatan, ang mga ito ay dumating sa isang infinitive at past participle form - kung saan ang infinitive (hal. show
) ay na-trigger sa simula ng isang kaganapan, at ang past participle form nito (hal. shown
) ay na-trigger sa pagkumpleto ng isang aksyon.
Ang lahat ng infinitive na kaganapan ay nagbibigay ng preventDefault()
functionality. Nagbibigay ito ng kakayahang ihinto ang pagpapatupad ng isang aksyon bago ito magsimula. Ang pagbabalik ng false mula sa isang event handler ay awtomatikong tatawag preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
mga kaganapan sa jQuery
Makikita ng Bootstrap ang jQuery kung jQuery
naroroon sa window
object at walang data-bs-no-jquery
attribute na nakatakda sa <body>
. Kung natagpuan ang jQuery, ang Bootstrap ay maglalabas ng mga kaganapan salamat sa sistema ng kaganapan ng jQuery. Kaya kung gusto mong makinig sa mga kaganapan ng Bootstrap, kakailanganin mong gamitin ang mga pamamaraan ng jQuery ( .on
, .one
) sa halip na addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
Programmatic API
Lahat ng mga konstruktor ay tumatanggap ng opsyonal na bagay na opsyon o wala (na nagpasimula ng isang plugin na may default na gawi nito):
var myModalEl = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
Kung gusto mong makakuha ng partikular na instance ng plugin, ang bawat plugin ay naglalantad ng getInstance
paraan. Upang makuha ito nang direkta mula sa isang elemento, gawin ito: bootstrap.Popover.getInstance(myPopoverEl)
.
Mga tagapili ng CSS sa mga konstruktor
Maaari ka ring gumamit ng CSS selector bilang unang argumento sa halip na isang elemento ng DOM upang simulan ang plugin. Sa kasalukuyan, ang elemento para sa plugin ay matatagpuan sa querySelector
pamamaraan dahil ang aming mga plugin ay sumusuporta sa isang elemento lamang.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Mga asynchronous na function at transition
Ang lahat ng mga pamamaraan ng programmatic API ay asynchronous at bumalik sa tumatawag kapag nagsimula ang paglipat ngunit bago ito matapos .
Upang maisagawa ang isang aksyon kapag nakumpleto na ang paglipat, maaari kang makinig sa kaukulang kaganapan.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Bilang karagdagan, ang isang tawag sa pamamaraan sa isang bahagi ng paglipat ay hindi papansinin .
var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
Mga default na setting
Maaari mong baguhin ang mga default na setting para sa isang plugin sa pamamagitan ng pagbabago sa Constructor.Default
object ng plugin:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Walang salungatan (kung gumagamit ka lang ng jQuery)
Minsan kinakailangan na gumamit ng mga plugin ng Bootstrap kasama ng iba pang mga framework ng UI. Sa mga sitwasyong ito, maaaring mangyari paminsan-minsan ang mga banggaan ng namespace. Kung mangyari ito, maaari kang tumawag .noConflict
sa plugin na nais mong ibalik ang halaga.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Mga numero ng bersyon
Ang bersyon ng bawat plugin ng Bootstrap ay maaaring ma-access sa pamamagitan ng pag- VERSION
aari ng constructor ng plugin. Halimbawa, para sa tooltip plugin:
bootstrap.Tooltip.VERSION // => "5.0.2"
Walang mga espesyal na fallback kapag hindi pinagana ang JavaScript
Ang mga plugin ng Bootstrap ay hindi bumabalik lalo na nang maganda kapag ang JavaScript ay hindi pinagana. Kung nagmamalasakit ka sa karanasan ng user sa kasong ito, gamitin <noscript>
upang ipaliwanag ang sitwasyon (at kung paano muling paganahin ang JavaScript) sa iyong mga user, at/o magdagdag ng sarili mong mga custom na fallback.
Mga aklatan ng third-party
Hindi opisyal na sinusuportahan ng Bootstrap ang mga third-party na JavaScript library tulad ng Prototype o jQuery UI. Sa kabila .noConflict
at namespaced na mga kaganapan, maaaring may mga problema sa compatibility na kailangan mong ayusin nang mag-isa.
Sanitizer
Ginagamit ng Tooltips at Popovers ang aming built-in na sanitizer para i-sanitize ang mga opsyon na tumatanggap ng HTML.
Ang default allowList
na halaga ay ang sumusunod:
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
// 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: []
}
Kung gusto mong magdagdag ng mga bagong value sa default na ito allowList
maaari mong gawin ang sumusunod:
var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
// To allow table elements
myDefaultAllowList.table = []
// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)
Kung gusto mong i-bypass ang aming sanitizer dahil mas gusto mong gumamit ng dedikadong library, halimbawa DOMPuify , dapat mong gawin ang sumusunod:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})