JavaScript
Mu Bootstrap wa si igbesi aye pẹlu awọn afikun JavaScript iyan wa. Kọ ẹkọ nipa itanna kọọkan, data wa ati awọn aṣayan API ti eto, ati diẹ sii.
Olukuluku tabi akopọ
Awọn afikun le wa ni ẹyọkan (lilo Bootstrap's olukuluku js/dist/*.js
), tabi gbogbo wọn ni ẹẹkan lilo bootstrap.js
tabi miniified bootstrap.min.js
(ko pẹlu mejeeji).
Ti o ba lo lapapo kan (Pack Web, Rollup…), o le lo /js/dist/*.js
awọn faili ti o ti ṣetan UMD.
Lilo Bootstrap bi module
A pese ẹya ti Bootstrap ti a ṣe bi ESM
( bootstrap.esm.js
ati bootstrap.esm.min.js
) eyiti o fun ọ laaye lati lo Bootstrap gẹgẹbi module ninu ẹrọ aṣawakiri rẹ, ti awọn aṣawakiri rẹ ti o fojusi ṣe atilẹyin .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Awọn afikun ti ko ni ibamu
Nitori awọn idiwọn aṣawakiri, diẹ ninu awọn afikun wa, eyun Dropdown, Tooltip ati awọn afikun Agbejade, ko le ṣee lo ni <script>
tag pẹlu module
iru nitori wọn dale lori Popper. Fun alaye siwaju sii nipa oro wo nibi .
Awọn igbẹkẹle
Diẹ ninu awọn afikun ati awọn paati CSS dale lori awọn afikun miiran. Ti o ba pẹlu awọn afikun ni ẹyọkan, rii daju lati ṣayẹwo fun awọn igbẹkẹle wọnyi ninu awọn docs.
Awọn ifilọlẹ wa, popovers ati awọn imọran irinṣẹ tun dale lori Popper .
Ṣe o tun fẹ lati lo jQuery? O ṣee ṣe!
Bootstrap 5 jẹ apẹrẹ lati lo laisi jQuery, ṣugbọn o tun ṣee ṣe lati lo awọn paati wa pẹlu jQuery. Ti Bootstrap ba ṣe awari jQuery
ninu window
ohun naa yoo ṣafikun gbogbo awọn paati wa ni eto itanna jQuery; eyi tumọ si pe iwọ yoo ni anfani lati ṣe $('[data-bs-toggle="tooltip"]').tooltip()
lati mu awọn itọnisọna irinṣẹ ṣiṣẹ. Kanna n lọ fun wa miiran irinše.
Awọn eroja data
O fẹrẹ to gbogbo awọn afikun Bootstrap ni a le mu ṣiṣẹ ati tunto nipasẹ HTML nikan pẹlu awọn abuda data (ọna ti o fẹ wa ti lilo iṣẹ ṣiṣe JavaScript). Rii daju pe o lo eto kan ti awọn abuda data lori ẹyọkan (fun apẹẹrẹ, o ko le ṣe okunfa ohun elo irinṣẹ ati modal lati bọtini kanna.)
Awọn yiyan
Lọwọlọwọ lati beere awọn eroja DOM a lo awọn ọna abinibi querySelector
ati querySelectorAll
fun awọn idi iṣẹ, nitorinaa o ni lati lo awọn yiyan to wulo . Ti o ba lo awọn yiyan pataki, fun apẹẹrẹ: collapse:Example
rii daju pe o sa fun wọn.
Awọn iṣẹlẹ
Bootstrap n pese awọn iṣẹlẹ aṣa fun ọpọlọpọ awọn iṣe alailẹgbẹ awọn afikun. Ni gbogbogbo, iwọnyi wa ni fọọmu ailopin ati ti o ti kọja - nibiti ailopin (fun apẹẹrẹ show
) ti jẹ okunfa ni ibẹrẹ iṣẹlẹ kan, ati fọọmu apakan apakan ti o kọja (fun apẹẹrẹ shown
) jẹ okunfa lori ipari iṣẹ kan.
Gbogbo awọn iṣẹlẹ ailopin pese preventDefault()
iṣẹ ṣiṣe. Eyi n pese agbara lati da ipaniyan iṣe ṣaaju ki o to bẹrẹ. Pada eke pada lati ọdọ oluṣakoso iṣẹlẹ yoo tun pe laifọwọyi preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
jQuery iṣẹlẹ
Bootstrap yoo ṣe awari jQuery ti o ba jQuery
wa ninu window
ohun naa ko si si data-bs-no-jquery
ẹda ti o ṣeto lori <body>
. Ti a ba rii jQuery, Bootstrap yoo gbejade awọn iṣẹlẹ ọpẹ si eto iṣẹlẹ jQuery. Nitorina ti o ba fẹ tẹtisi awọn iṣẹlẹ Bootstrap, iwọ yoo ni lati lo awọn ọna jQuery ( .on
, .one
) dipo addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
API ètò
Gbogbo awọn olupilẹṣẹ gba ohun awọn aṣayan yiyan tabi nkankan (eyiti o bẹrẹ ohun itanna kan pẹlu ihuwasi aiyipada):
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
Ti o ba fẹ lati gba apẹẹrẹ itanna kan pato, ohun itanna kọọkan ṣafihan getInstance
ọna kan. Lati le gba pada taara lati ẹya kan, ṣe eyi: bootstrap.Popover.getInstance(myPopoverEl)
.
CSS selectors ni constructors
O tun le lo oluyan CSS kan bi ariyanjiyan akọkọ dipo ipin DOM lati ṣe ipilẹṣẹ ohun itanna naa. Lọwọlọwọ eroja fun ohun itanna naa ni a rii nipasẹ querySelector
ọna nitori awọn afikun wa ṣe atilẹyin ipin kan nikan.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Awọn iṣẹ asynchronous ati awọn iyipada
Gbogbo awọn ọna API ti eto jẹ asynchronous ati pada si olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari .
Lati le ṣe iṣe ni kete ti iyipada ba ti pari, o le tẹtisi iṣẹlẹ ti o baamu.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Ni afikun ipe ọna kan lori paati iyipada yoo jẹ kọbikita .
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 !!
Awọn eto aiyipada
O le yi awọn eto aiyipada pada fun ohun itanna kan nipa yiyipada ohun itanna Constructor.Default
naa:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Ko si ija (nikan ti o ba lo jQuery)
Nigba miiran o jẹ dandan lati lo awọn afikun Bootstrap pẹlu awọn ilana UI miiran. Ni awọn ipo wọnyi, awọn ikọlu aaye orukọ le waye lẹẹkọọkan. Ti eyi ba ṣẹlẹ, o le pe .noConflict
ohun itanna ti o fẹ lati yi iye pada.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Awọn nọmba ẹya
Ẹya ti ọkọọkan awọn afikun Bootstrap ni a le wọle nipasẹ VERSION
ohun-ini ti olupilẹṣẹ ohun itanna naa. Fun apẹẹrẹ, fun ohun itanna ọpa:
bootstrap.Tooltip.VERSION // => "5.0.2"
Ko si awọn ipadasẹhin pataki nigbati JavaScript jẹ alaabo
Awọn afikun Bootstrap ko ṣubu sẹhin paapaa ni oore-ọfẹ nigbati JavaScript jẹ alaabo. Ti o ba bikita nipa iriri olumulo ninu ọran yii, lo <noscript>
lati ṣalaye ipo naa (ati bi o ṣe le tun JavaScript ṣiṣẹ) si awọn olumulo rẹ, ati/tabi ṣafikun awọn isubu aṣa tirẹ.
Awọn ile-ikawe ẹni-kẹta
Bootstrap ko ṣe atilẹyin fun awọn ile-ikawe JavaScript ẹni-kẹta gẹgẹbi Afọwọṣe tabi jQuery UI. Laibikita .noConflict
ati awọn iṣẹlẹ ti a fun lorukọ, awọn iṣoro ibamu le wa ti o nilo lati ṣatunṣe funrararẹ.
Sanitizer
Awọn imọran irinṣẹ ati Awọn agbejade lo imototo ti a ṣe sinu rẹ lati sọ awọn aṣayan di mimọ ti o gba HTML.
Iye aiyipada allowList
ni atẹle yii:
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: []
}
Ti o ba fẹ ṣafikun awọn iye tuntun si aiyipada yii allowList
o le ṣe atẹle naa:
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)
Ti o ba fẹ lati fori imototo wa nitori pe o fẹ lati lo ile-ikawe iyasọtọ, fun apẹẹrẹ DOMPurify , o yẹ ki o ṣe atẹle naa:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})