JavaScript ye
Aw ye Bootstrap lase ɲɛnamaya ma ni an ka JavaScript plugins ye minnu bɛ se ka sugandi. Aw ye kunnafoni sɔrɔ plugin kelen-kelen bɛɛ kan, an ka data ani porogaramu API suganditaw kan, ani fɛn wɛrɛw.
Mɔgɔ kelen-kelen walima a lajɛlen
Plugins bɛ se ka don u kelen-kelen na (ka baara kɛ ni Bootstrap ka kelen-kelen ye js/dist/*.js
), walima u bɛɛ bɛ se ka don a kɔnɔ siɲɛ kelen ka baara kɛ ni bootstrap.js
walima ka dɔgɔya bootstrap.min.js
(i kana u fila bɛɛ don a kɔnɔ).
N’i bɛ baara Kɛ ni bundler (Webpack, Rollup...) ye, i bɛ Se ka baara Kɛ ni /js/dist/*.js
filew ye minnu labɛnnen dòn UMD fɛ.
Baara kɛ ni Bootstrap ye i n’a fɔ modulu
An bɛ Bootstrap bɔko dɔ Di min jɔlen dòn i n’a fɔ ESM
( bootstrap.esm.js
ani bootstrap.esm.min.js
) min b’a To i bɛ Se ka Bootstrap Kɛ i n’a fɔ modulu i ka navigatɔrɔ kɔnɔ, n’i ka navigatɔrɔ laɲinitaw b’a Dɛmɛ .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Plugin minnu tɛ bɛn ɲɔgɔn ma
K’a sababu Kɛ navigatɔrɔn dantigɛliw ye, an ka fɛn dɔw, n’olu ye Dropdown, Tooltip ani Popover fɛnɲɛnɛmaw ye, olu tɛ Se ka baara Kɛ ni ‘ <script>
taamaʃyɛn ye ni module
suguya ye bari u bɛ Da Popper kan. Walasa ka kunnafoni wɛrɛw sɔrɔ o ko in kan , aw ye yan lajɛ .
Dependencies (Jɛkuluw).
Plugin dɔw ni CSS yɔrɔ dɔw bɛ bɔ plugins wɛrɛw de la. N’i ye plugins (dakunw) Dòn u kelen-kelen na, i k’i jija k’o dependencies (daɲɛw) ninnu Lajɛ docs (docs) kɔnɔ.
An ka dropdowns, popovers ani baarakɛminɛnw fana bɛ bɔ Popper de la .
Hali bi i b’a fɛ ka baara kɛ ni jQuery ye wa? A bɛ se ka kɛ!
Bootstrap 5 dabɔra ka baara kɛ ni jQuery tɛ, nka hali bi a bɛ se ka baara kɛ ni an ka yɔrɔw ye ni jQuery ye. Ni Bootstrap jQuery
ye window
fɛn in Sɔrɔ a bɛ an ka yɔrɔw bɛɛ Fàra jQuery ka 'plugin system kan; o kɔrɔ ye ko i bɛ se ka kɛ $('[data-bs-toggle="tooltip"]').tooltip()
walasa ka baarakɛminɛnw kɛcogo ɲɛ. O cogo kelen de bɛ kɛ an ka yɔrɔ tɔw la.
Donanw ka fɛnw
Bootstrap 'kɔnɔfɛnw bɛɛ bɛ Se ka Dabɔ ani k'u Labɛn HTML dɔrɔn fɛ ni data attributes (an ka JavaScript baarakɛcogo ɲuman ye). Aw ye aw jija ka baara kɛ ni kunnafoni-falen-falen-yɔrɔ kelen dɔrɔn ye fɛn kelen kan (misali la, aw tɛ se ka baarakɛminɛnw ni modɛli dɔ daminɛ ka bɔ butɔni kelen na.)
Sugandilikɛlaw
Sisan walasa ka DOM fɛnw ɲininka an bɛ baara Kɛ ni native fɛɛrɛw ye querySelector
ani querySelectorAll
baarakɛcogo kunw na, o la i ka kan ka baara Kɛ ni sugandilikɛlaw ye minnu bɛ Se ka Kɛ . Ni aw bɛ baara kɛ ni sugandili kɛrɛnkɛrɛnnenw ye, misali la: collapse:Example
aw ye aw jija ka boli u ɲɛ.
Ko minnu kɛra
Bootstrap bɛ ko kɛlenw di minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye, ka ɲɛsin plugins fanba ka wale kɛrɛnkɛrɛnnenw ma. A ka c’a la, ninnu bɛ Nà daɲɛ-dafalen ni daɲɛ tɛmɛnen cogo la - daɲɛ-dafalen (ex. show
) bɛ Daminɛ yɔrɔ min na ko dɔ daminɛ na, wa a daɲɛ tɛmɛnen cogoya (ex. shown
) bɛ Daminɛ wale dɔ dafalen na.
Ko minnu tɛ dantigɛ, olu bɛɛ bɛ preventDefault()
baarakɛcogo Di. O bɛ se di ka wale dɔ waleyali jɔ sani a ka daminɛ. nkalon seginni ka bɔ ko kɛlenw ɲɛnabɔbaga dɔ la , o fana bɛna wele a yɛrɛma preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
jQuery ko kɛlenw
Bootstrap bɛna jQuery dɔn ni jQuery
a bɛ window
fɛn kɔnɔ ani ni fɛn si ma data-bs-no-jquery
sigi sen kan <body>
. Ni jQuery Sɔrɔla, Bootstrap bɛna ko kɛlenw Bɔ k'a sababu Kɛ jQuery ka ko kɛlenw sitɛmu ye. O la n'i b'a fɛ ka Bootstrap ka ko kɛlenw lamɛn, i ka kan ka baara Kɛ ni jQuery fɛɛrɛw ye ( .on
, .one
) addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
API porogaramulen
Constructeurs bɛɛ bɛ sɔn options options object ma walima foyi tɛ (min bɛ plugin dɔ daminɛ n’a kɛcogo kɔrɔ ye):
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
N'i b'a fɛ ka plugin instance kɛrɛnkɛrɛnnen dɔ Sɔrɔ, plugin kelen-kelen bɛɛ bɛ getInstance
fɛɛrɛ dɔ Bɔ kɛnɛ kan. Walasa k’a sɔrɔ k’a ɲɛsin fɛn dɔ ma, aw bɛ nin kɛ: bootstrap.Popover.getInstance(myPopoverEl)
.
CSS sugandilikɛlaw bɛ dilanbagaw kɔnɔ
Aw bɛ se fana ka baara kɛ ni CSS sugandili ye i n’a fɔ argument fɔlɔ DOM yɔrɔ nɔ na walasa ka plugin daminɛ. Sisan, fɛn min bɛ Kɛ 'fɛn ye o bɛ Sɔrɔ querySelector
fɛɛrɛ fɛ bari an ka 'fɛn min bɛ 'fɛn kelen dɔrɔn de Dɛmɛ.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Baarakɛcogo minnu tɛ kelen ye ani fɛn caman tigɛli
porogaramu API fɛɛrɛw bɛɛ ye asynchrone ye wa u bɛ segin welebaga ma ni wuli daminɛna nka sanni a ka ban .
Walasa ka wale dɔ Kɛ ni 'tɛmɛsira Banna, i bɛ Se ka ko kɛlen min bɛ Bɛn o ma, i bɛ Se k'o Lamɛ.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
ka fara o kan , fɛɛrɛ weleli dɔ bɛna kɛ fɛn ye min bɛ wuli ka bɔ a nɔ na .
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 !!
Settings (Labɛnw) minnu bɛ daminɛ
Aw bɛ se ka fɛn dɔ labɛncogo kɔrɔw Changer ni aw ye fɛn dɔ sɛmɛntiya Constructor.Default
:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Kɛlɛ tɛ (dɔrɔn ni i bɛ baara kɛ ni jQuery ye)
Tuma dɔw la, a ka kan ka baara kɛ ni Bootstrap plugins ye ni UI framework wɛrɛw ye. O cogoyaw la, tɔgɔda-yɔrɔ-ko bɛ Se ka Kɛ tuma dɔw la. N'o Kɛra, i .noConflict
b'a fɛ ka plugin min nafa Lasegin, i bɛ Se k'o Weele.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Version nimɔrɔw
Bootstrap ka 'sènfɛ-sɛbɛn kelen-kelen bɛɛ 'sèn bɛ Se ka Sɔrɔ 'sènfɛ-sɛbɛnni -minɛn VERSION
in dilannikɛla ka nafolo fɛ. Misali la, baarakɛminɛnw ɲɛfɔli dakun na:
bootstrap.Tooltip.VERSION // => "5.0.2"
Fallback kɛrɛnkɛrɛnnen si tɛ yen ni JavaScript ma baara kɛ
Bootstrap ka plugins tɛ bin kɔfɛ kɛrɛnkɛrɛnnenya la gracefully ni JavaScript bɛ baara la. N’i b’i janto baarakɛlaw ka ko kɛlenw na nin ko in na, i ka baara kɛ ni <noscript>
u ye walasa ka ko in ɲɛfɔ (ani JavaScript daminɛcogo kura) i ka baarakɛlaw ye, ani/walima ka i yɛrɛ ka ladamu fallbacks fara a kan.
Mɔgɔ sabananw ka gafemarayɔrɔw
Bootstrap tɛ JavaScript gafemarayɔrɔ wɛrɛw dɛmɛ foroba la i n’a fɔ Prototype walima jQuery UI. Hali .noConflict
ni ni tɔgɔda-ko kɛlenw bɛ yen, bɛnkan gɛlɛyaw bɛ se ka sɔrɔ minnu ka kan ka ɲɛnabɔ i yɛrɛ ma.
Sanitizer ye
Baarakɛminɛnw ni Popovers bɛ baara Kɛ ni an ka saniyalan jɔlen ye walasa ka sugandiliw saniya minnu bɛ Sɔn HTML ma.
A allowList
nafa fɔlɔ ye nin ye:
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: []
}
N’i b’a fɛ ka nafa kuraw Fàra nin default in kan allowList
i bɛ Se ka nin wale ninnu Kɛ:
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)
N’aw b’a fɛ ka tɛmɛ an ka saniyalan kan bawo aw b’a fɛ ka baara kɛ ni gafemarayɔrɔ kɛrɛnkɛrɛnnen ye, misali la DOMPurify , aw ka kan ka nin wale ninnu kɛ:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})