JavaScript
Կյանքի կոչեք Bootstrap-ը մեր կամընտիր JavaScript հավելվածների միջոցով: Իմացեք յուրաքանչյուր հավելվածի, մեր տվյալների և ծրագրային API-ի ընտրանքների և ավելին:
Անհատական կամ կազմված
Փլագինները կարող են ներառվել առանձին (օգտագործելով Bootstrap-ի անհատականությունը js/dist/*.js
), կամ միանգամից՝ օգտագործելով bootstrap.js
կամ փոքրացված bootstrap.min.js
(մի՛ ներառեք երկուսն էլ):
Եթե դուք օգտագործում եք փաթեթ (Webpack, Rollup…), կարող եք օգտագործել /js/dist/*.js
ֆայլեր, որոնք պատրաստ են UMD-ին:
Օգտագործելով Bootstrap որպես մոդուլ
Մենք տրամադրում ենք Bootstrap-ի տարբերակը, որը կառուցված է որպես ESM
( bootstrap.esm.js
և bootstrap.esm.min.js
), որը թույլ է տալիս օգտագործել Bootstrap-ը որպես մոդուլ ձեր բրաուզերում, եթե ձեր թիրախավորված բրաուզերներն այն աջակցում են :
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Անհամատեղելի հավելումներ
Բրաուզերի սահմանափակումների պատճառով մեր որոշ պլագիններ, մասնավորապես՝ Dropdown, Tooltip և Popover պլագինները, չեն կարող օգտագործվել <script>
պիտակի մեջ, module
քանի որ դրանք կախված են Popper-ից: Խնդրի մասին լրացուցիչ տեղեկությունների համար տե՛ս այստեղ :
Կախվածություններ
Որոշ պլագիններ և CSS բաղադրիչներ կախված են այլ պլագիններից: Եթե դուք ներառում եք պլագիններ առանձին-առանձին, համոզվեք, որ ստուգեք այս կախվածությունները փաստաթղթերում:
Մեր բացվող պատուհանները, փոփ-փոփերը և գործիքների հուշումները նույնպես կախված են Popper- ից :
Դեռ ցանկանում եք օգտագործել jQuery: Դա հնարավոր է!
Bootstrap 5-ը նախատեսված է առանց jQuery-ի օգտագործման համար, բայց դեռ հնարավոր է օգտագործել մեր բաղադրիչները jQuery-ի հետ: Եթե Bootstrap- jQuery
ը հայտնաբերի window
օբյեկտում , այն կավելացնի մեր բոլոր բաղադրիչները jQuery-ի plugin համակարգում; սա նշանակում է, որ դուք կկարողանաք $('[data-bs-toggle="tooltip"]').tooltip()
միացնել գործիքի հուշումները: Նույնը վերաբերում է մեր մյուս բաղադրիչներին:
Տվյալների հատկանիշներ
Գրեթե բոլոր Bootstrap հավելվածները կարող են միացված լինել և կազմաձևվել միայն HTML-ի միջոցով տվյալների ատրիբուտներով (JavaScript-ի ֆունկցիոնալությունը օգտագործելու մեր նախընտրելի եղանակը): Համոզվեք, որ միայն մեկ տարրի վրա օգտագործեք տվյալների ատրիբուտների միայն մեկ հավաքածու (օրինակ, դուք չեք կարող գործարկել գործիքի հուշում և մոդալ նույն կոճակից):
Ընտրիչներ
Ներկայումս DOM տարրերը հարցումներ կատարելու համար մենք օգտագործում ենք բնօրինակ մեթոդներ querySelector
և querySelectorAll
կատարողակ��նի նկատառումներով, այնպես որ դուք պետք է օգտագործեք վավեր ընտրիչներ : Եթե դուք օգտագործում եք հատուկ ընտրիչներ, օրինակ՝ collapse:Example
համոզվեք, որ խուսափեք դրանցից:
Իրադարձություններ
Bootstrap-ն ապահովում է հարմարեցված իրադարձություններ փլագինների մեծ մասի եզակի գործողությունների համար: Ընդհանրապես, դրանք գալիս են ինֆինիտիվ և անցյալ մասնակցային ձևով, որտեղ ինֆինիտիվը (նախ. show
) գործարկվում է իրադարձության սկզբում, իսկ նրա անցյալ մասնակցային ձևը ( նախ. shown
) գործարկվում է գործողության ավարտից հետո:
Բոլոր անվերջ իրադարձությունները ապահովում են preventDefault()
ֆունկցիոնալություն: Սա հնարավորություն է տալիս դադարեցնել գործողությունների կատարումը նախքան այն սկսելը: Իրադարձությունների մշակիչից false վերադարձնելու դեպքում նաև ավտոմատ կերպով կկանչվի preventDefault()
:
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
jQuery իրադարձություններ
Bootstrap-ը կհայտնաբերի jQuery-ն, եթե jQuery
առկա է window
օբյեկտում և դրա data-bs-no-jquery
վրա դրված հատկանիշ չկա <body>
: Եթե jQuery գտնվի, Bootstrap-ը իրադարձություններ կթողարկի jQuery-ի իրադարձությունների համակարգի շնորհիվ: Այսպիսով, եթե ցանկանում եք լսել Bootstrap-ի իրադարձությունները, ապա պետք է օգտագործեք jQuery մեթոդները ( .on
, .one
)-ի փոխարեն addEventListener
:
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
Ծրագրային API
Բոլոր կոնստրուկտորներն ընդունում են կամընտիր ընտրանքների օբյեկտ կամ ոչինչ (որը սկսում է plugin իր լռելյայն վարքով).
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
Եթե ցանկանում եք ստանալ հատուկ plugin-ի օրինակ, յուրաքանչյուր փլագին բացահայտում է մի getInstance
մեթոդ: Այն ուղղակիորեն տարրից վերցնելու համար կատարեք հետևյալը bootstrap.Popover.getInstance(myPopoverEl)
.
CSS ընտրիչներ կոնստրուկտորներում
Կարող եք նաև օգտագործել CSS ընտրիչը որպես առաջին արգումենտ DOM տարրի փոխարեն՝ plugin-ը սկզբնավորելու համար: Ներկայումս plugin-ի տարրը հայտնաբերվում է querySelector
մեթոդով, քանի որ մեր պլագիններն աջակցում են միայն մեկ տարր:
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Ասինխրոն գործառույթներ և անցումներ
Բոլոր ծրագրային API մեթոդներն ասինխրոն են և վերադառնում են զանգահարողին, երբ անցումը սկսվում է, բայց մինչև այն ավարտվի :
Անցումը ավարտվելուց հետո գործողություն կատարելու համար կարող եք լսել համապատասխան իրադարձությունը:
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :
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 !!
Կանխադրված կարգավորումներ
Դուք կարող եք փոխել plugin-ի լռելյայն կարգավորումները՝ փոփոխելով plugin-ի Constructor.Default
օբյեկտը.
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Ոչ մի կոնֆլիկտ (միայն եթե օգտագործում եք jQuery)
Երբեմն անհրաժեշտ է լինում օգտագործել Bootstrap պլագիններ այլ UI շրջանակների հետ: Այս հանգամանքներում երբեմն կարող են տեղի ունենալ անունների տարածության բախումներ: Եթե դա տեղի ունենա, դուք կարող եք զանգահարել .noConflict
այն պլագինին, որի արժեքը ցանկանում եք վերադարձնել:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Տարբերակների համարները
Bootstrap-ի պլագիններից յուրաքանչյուրի տարբերակը հասանելի VERSION
է plugin-ի կոնստրուկտորի սեփականության միջոցով: Օրինակ, Tooltip plugin-ի համար.
bootstrap.Tooltip.VERSION // => "5.0.2"
Հատուկ հետադարձ կապ չկա, երբ JavaScript-ն անջատված է
Bootstrap-ի պլագինները առանձնապես նրբագեղորեն չեն զիջում, երբ JavaScript-ն անջատված է: Եթե այս դեպքում ձեզ հետաքրքրում է օգտատերերի փորձը, օգտագործեք <noscript>
ձեր օգտատերերին իրավիճակը (և ինչպես կրկին ակտիվացնել JavaScript-ը) բացատրելու համար և/կամ ավելացրեք ձեր սեփական հետադարձ կապերը:
Երրորդ կողմի գրադարաններ
Bootstrap-ը պաշտոնապես չի աջակցում երրորդ կողմի JavaScript գրադարաններին , ինչպիսիք են Prototype-ը կամ jQuery UI-ը: Չնայած .noConflict
անվանատարածք ունեցող իրադարձություններին, կարող են լինել համատեղելիության խնդիրներ, որոնք դուք պետք է ինքնուրույն շտկեք:
Սանիտարական միջոց
Tooltips-ը և Popovers-ը օգտագործում են մեր ներկառուցված ախտահանիչը՝ HTML-ն ընդունող տարբերակները մաքրելու համար:
Լռելյայն allowList
արժեքը հետևյալն է.
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: []
}
Եթե ցանկանում եք այս լռելյայն նոր արժեքներ ավելացնել, allowList
կարող եք անել հետևյալը.
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)
Եթե ցանկանում եք շրջանցել մեր ախտահանիչը, քանի որ նախընտրում եք օգտագործել հատուկ գրադարան, օրինակ ՝ DOMPurify , դուք պետք է անեք հետևյալը.
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})