JavaScript

Bi pêvekên me yên bijarte yên JavaScript-ê Bootstrap-ê bidin jiyîn. Li ser her pêvek, daneyên me û vebijarkên API-ya bernamekirî, û bêtir fêr bibin.

Li ser vê rûpelê

Kesane an berhevkirî

Pêvek dikarin bi rengek ferdî (bi ferdî ya Bootstrap bikar bînin js/dist/*.js), an hemî bi yekcarî bikar bînin bootstrap.jsan jî kêm bikin bootstrap.min.js(herduyan tê de nekin).

Ger hûn bundlerek bikar bînin (Webpack, Parcel, Vite…), hûn dikarin /js/dist/*.jspelên ku UMD amade ne bikar bînin.

Bi çarçoveyên JavaScript re bikar bînin

Digel ku Bootstrap CSS dikare bi her çarçoveyek were bikar anîn, Bootstrap JavaScript bi tevahî çarçoveyên JavaScript-ê yên mîna React, Vue, û Angular -ê ku zanîna tevahî ya DOM-ê dihesibînin re ne hevaheng e. Hem Bootstrap û hem jî çarçove dibe ku hewl bidin ku heman hêmana DOM-ê biguhezînin, û di encamê de xeletiyên mîna dakêşanên ku di pozîsyona "vekirî" de asê mane çêbibin.

Alternatîfek çêtir ji bo kesên ku vî rengî çarçove bikar tînin ev e ku li şûna Bootstrap JavaScript pakêtek çarçoveyek taybetî bikar bînin. Li vir çend vebijarkên herî populer hene:

Reaksîyon: React Bootstrap
Vue: BootstrapVue (niha tenê Vue 2 û Bootstrap 4 piştgirî dike)
Angular: ng-bootstrap

Bikaranîna Bootstrap wekî modulek

Bi xwe biceribîne! Ji bo bikaranîna Bootstrap-ê wekî modulek ES-ê ji depoya twbs/nimûneyan koda çavkanî û demo-ya xebatê dakêşin . Her weha hûn dikarin nimûneyê li StackBlitz vekin .

Em guhertoyek Bootstrap-ê ku wekî ESM( bootstrap.esm.jsû bootstrap.esm.min.js) hatî çêkirin peyda dikin, ku dihêle hûn Bootstrap-ê wekî modulek di gerokê de bikar bînin, ger gerokên we yên armanckirî piştgirî bikin .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Bi berhevokên JS-ê re, bi karanîna ESM-ê di gerokê de hewce dike ku hûn li şûna navê modulê riya tevahî û navê pelê bikar bînin. Di gerokê de li ser modulên JS-ê bêtir bixwînin. Ji ber vê yekê em 'bootstrap.esm.min.js'li şûna ya 'bootstrap'jorîn bikar tînin. Lêbelê, ev ji hêla pêwendiya meya Popper-ê ve, ku Popper-ê di JavaScript-a me de wiha vedigire, bêtir tevlihev e:

import * as Popper from "@popperjs/core"

Ger hûn vê yekê wekî-ê biceribînin, hûn ê di konsolê de xeletiyek mîna jêrîn bibînin:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Ji bo rastkirina vê, hûn dikarin an bikar bînin da importmapku navên modulên keyfî çareser bikin da ku riyan temam bikin. Ger gerokên we yên armanckirî piştgirî nakin importmap, hûn ê hewce bikin ku projeya es-module-shims bikar bînin . Li vir e ku ew ji bo Bootstrap û Popper çawa dixebite:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

Dependencies

Hin pêvek û hêmanên CSS bi pêvekên din ve girêdayî ne. Ger hûn pêvekên kesane bi nav bikin, pê ewle bin ku hûn van girêdanan di belgeyan de kontrol bikin.

Daxistina me, popover, û serişteyên amûran jî bi Popper ve girêdayî ne.

Taybetmendiyên daneyê

Hema hema hemî pêvekên Bootstrap dikarin tenê bi navgîniya HTML-ê ve bi taybetmendiyên daneyê ve werin çalak kirin û mîheng kirin (rêya meya bijarte ya karanîna fonksiyona JavaScriptê). Bawer bikin ku hûn tenê komek taybetmendiyên daneyê li ser hêmanek yekane bikar bînin (mînak, hûn nekarin ji heman bişkokê şîretek amûrek û modalek derxînin.)

Ji ber ku vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin, hûn dikarin navek vebijarkê lê zêde bikin data-bs-, wekî di data-bs-animation="{value}". Dema ku vebijarkan bi taybetmendiyên daneyê re derbas bikin, pê ewle bin ku hûn celebê doza navê vebijarkê ji " camelCase " veguherînin " kebab-case ". Mînakî, data-bs-custom-class="beautifier"li şûna bikar bînin data-bs-customClass="beautifier".

Ji Bootstrap 5.2.0-ê, hemî pêkhate taybetmendiyek daneya veqetandî ya ceribandinêdata-bs-config piştgirî dikin ku dikare veavakirina hêmanek hêsan wekî rêzek JSON bihewîne. Dema ku hêmanek hebe data-bs-config='{"delay":0, "title":123}'û data-bs-title="456"taybetmendî hebe, nirxa paşîn titledê bibe 456û taybetmendiyên daneya veqetandî dê nirxên ku li ser hatine dayîn derbas bikin data-bs-config. Digel vê yekê, taybetmendiyên daneya heyî dikarin nirxên JSON ên mîna data-bs-delay='{"show":0,"hide":150}'.

Hilbijêr

Em xwemalî querySelectorû querySelectorAllrêbazan bikar tînin da ku hêmanên DOM-ê ji ber sedemên performansê bipirsin, ji ber vê yekê divê hûn hilbijêrên derbasdar bikar bînin . Ger hûn hilbijêrên taybetî yên mîna bikar bînin collapse:Example, pê ewle bin ku hûn ji wan birevin.

Events

Bootstrap ji bo çalakiyên yekta yên piraniya pêvekan bûyerên xwerû peyda dike. Bi gelemperî, ev bi rengek nebinavkirî û paşverû têne - ku di destpêka bûyerekê de nefsbiçûk (mînak. show) di destpêka bûyerekê de, û forma wê ya dema borî (mînak. shown) bi qedandina kirdeyekê tê derxistin.

Hemî bûyerên bêdawî preventDefault()fonksiyonê peyda dikin. Ev şiyana rawestandina pêkanîna çalakiyek berî ku ew dest pê bike peyda dike. Vegerandina derewîn ji rêvekerek bûyerê dê bixweber jî bang preventDefault()bike.

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

API bername

Hemî çêker hêmanek vebijarkî an tiştek qebûl dikin (ya ku pêvekek bi tevgera xweya xwerû dest pê dike):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Heke hûn dixwazin mînakek pêvekek taybetî bistînin, her pêvek getInstancerêbazek eşkere dike. Mînakî, ji bo wergirtina mînakek rasterast ji hêmanek:

bootstrap.Popover.getInstance(myPopoverEl)

nullHeke mînakek li ser hêmana daxwazkirî neyê destpêkirin dê ev rêbaz vegere .

Alternatîf, getOrCreateInstancedikare were bikar anîn da ku mînakek bi hêmanek DOM-ê ve girêdayî ye bigire, an heke ew nehatibe destpêkirin yek nû biafirîne.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Ger mînakek nehatibe destpêkirin, dikare wekî argumana duyemîn tiştek veavakirina vebijarkî qebûl bike û bikar bîne.

Hilbijêrên CSS di çêkeran de

Ji bilî rêbaz getInstanceû getOrCreateInstancerêbazan, hemî çêkerên pêvekê dikarin hêmanek DOM an hilbijêrek CSS- ya derbasdar wekî argumana yekem qebûl bikin. Hêmanên pêvekê bi querySelectorrêbazê têne dîtin ji ber ku pêvekên me tenê yek elementek piştgirî dikin.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Fonksiyonên Asynchronous û veguherînan

Hemî rêbazên API-ya bernamesaz asînkron in û piştî ku veguhêz dest pê kir, vedigerin bangker, lê berî ku ew biqede . Ji bo ku hûn gava veguheztinê qediya çalakiyek pêk bînin, hûn dikarin bûyera têkildar guhdarî bikin.

const myCollapseEl = document.querySelector('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', event => {
  // Action to execute once the collapsible area is expanded
})

Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`awa

Digel ku ew rast xuya dike ku meriv vê disposerêbazê tavilê piştî bikar bîne hide(), ew ê bibe sedema encamên nerast. Li vir mînakek karanîna pirsgirêkê ye:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

Mîhengên xwerû

Hûn dikarin mîhengên xwerû ji bo pêvekê bi guheztina Constructor.Defaulttiştê pêvekê biguhezînin:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Rêbaz û taybetmendiyên

Her pêveka Bootstrap rêbazên jêrîn û taybetmendiyên statîk eşkere dike.

Awa	Terîf
`dispose`	Modala hêmanekê hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike)
`getInstance`	Rêbaza statîk ku dihêle hûn mînaka modal a ku bi hêmanek DOM-ê ve girêdayî ye bistînin.
`getOrCreateInstance`	Rêbaza statîk a ku dihêle hûn mînakek modal a ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an heke ew nehatibe destpêkirin yek nû biafirînin.

Taybetmendiya statîk	Terîf
`NAME`	Navê pêvekê vedigerîne. (Nimûne `bootstrap.Tooltip.NAME`:)
`VERSION`	Guhertoya her yek ji pêvekên Bootstrap dikare bi navgîniya avakerê `VERSION`pêvekê ve were gihîştin (Mînak: `bootstrap.Tooltip.VERSION`)

Sanitizer

Tooltips û Popovers paqijkera me ya çêkirî bikar tînin da ku vebijarkên ku HTML-ê qebûl dikin paqij bikin.

Nirxa allowListxwerû ev e:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const 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: []
}

Heke hûn dixwazin nirxên nû li vê xwerû allowListzêde bikin, hûn dikarin jêrîn bikin:

const 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
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Heke hûn dixwazin paqijkerê me derbas bikin ji ber ku hûn tercîh dikin ku pirtûkxaneyek taybetî bikar bînin, mînakî DOMPurify , divê hûn jêrîn bikin:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Bi bijartî jQuery bikar tînin

Di Bootstrap 5-ê de hûn ne hewceyê jQuery-yê ne , lê dîsa jî gengaz e ku hûn hêmanên me bi jQuery re bikar bînin. Ger Bootstrap di objektê jQueryde bibîne window, ew ê hemî hêmanên me di pergala pêveka jQuery de zêde bike. Ev destûrê dide te ku hûn karên jêrîn bikin:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Heman tişt ji bo pêkhateyên me yên din jî derbas dibe.

Nakokî tune

Carinan hewce ye ku pêvekên Bootstrap bi çarçoveyên UI yên din re bikar bînin. Di van şertan de, car caran dibe ku pevçûnên navan çêbibin. Ger ev diqewime, hûn dikarin gazî .noConflictpêveka ku hûn dixwazin nirxa wê vegerînin bikin.

const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Bootstrap bi fermî pirtûkxaneyên JavaScript-ê yên wekî Prototype an jQuery UI piştgirî nake. Tevî .noConflictbûyer û navan, dibe ku pirsgirêkên lihevhatinê hebin ku hûn hewce ne ku bi serê xwe rast bikin.

bûyerên jQuery

Bootstrap dê jQuery-yê teşhîs bike heke jQuerydi windowobjektê de hebe û li ser taybetmendiyek nehatiye data-bs-no-jquerydanîn <body>. Ger jQuery were dîtin, Bootstrap dê bi saya pergala bûyera jQuery bûyeran derxe. Ji ber vê yekê heke hûn dixwazin guh bidin bûyerên Bootstrap, hûn neçar in ku li şûna jQuery rêbazên ( .on, .one) bikar bînin addEventListener.

$('#myTab a').on('shown.bs.tab', () => {
  // do something...
})

JavaScript neçalak

Pêvekên Bootstrap dema ku JavaScript neçalak be paşveçûnek taybetî tune. Heke hûn di vê rewşê de ji ezmûna bikarhêner eleqedar dibin, bikar bînin <noscript>ku rewşê (û çawa JavaScript-ê ji nû ve çalak bikin) ji bikarhênerên xwe re rave bikin, û/an jî paşverûyên xweyên xwerû lê zêde bikin.