JavaScript

Eman Bootstrap-i gure aukerako JavaScript pluginekin. Lortu informazio gehiago plugin bakoitzari, gure datuei eta API programatikoen aukerei eta gehiago.

Orrialde honetan

Banaka edo konpilatua

Pluginak banaka sar daitezke (Bootstrap-en banakoa erabiliz js/dist/*.js), edo aldi berean bootstrap.jsedo txikituta bootstrap.min.js(ez sartu biak).

/js/dist/*.jsBundler bat erabiltzen baduzu (Webpack, Parcel, Vite...), UMD prest dauden fitxategiak erabil ditzakezu.

JavaScript esparruekin erabiltzea

Bootstrap CSS edozein esparrurekin erabil daitekeen arren, Bootstrap JavaScript ez da guztiz bateragarria React, Vue eta Angular bezalako JavaScript esparruekin, DOM-en ezagutza osoa hartzen baitute. Bootstrap-ek eta esparruak DOM elementu bera mutatzen saia daitezke, eta ondorioz, "ireki" posizioan itsatsita dauden goitibeherako akatsak sor daitezke.

Mota honetako esparruak erabiltzen dituztenentzako alternatiba hobe bat marko-pakete espezifiko bat erabiltzea da Bootstrap JavaScript - en ordez . Hona hemen aukera ezagunenetako batzuk:

Erreakzionatu: Bootstrap erreakzionatu
Vue: BootstrapVue (gaur egun Vue 2 eta Bootstrap 4 bakarrik onartzen ditu)
Angular: ng-bootstrap

Bootstrap modulu gisa erabiltzea

Probatu zeure burua! Deskargatu iturburu kodea eta laneko demoa Bootstrap ES modulu gisa erabiltzeko twbs/examples biltegitik . Adibidea StackBlitz-en ere ireki dezakezu .

ESM( bootstrap.esm.jseta ) gisa eraikitako Bootstrap-en bertsio bat eskaintzen dugu, eta bootstrap.esm.min.jshorrek Bootstrap arakatzailean modulu gisa erabiltzeko aukera ematen dizu, zure xede-arakatzaileek onartzen badute .

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

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

JS bundler-ekin alderatuta, ESM arakatzailean erabiltzeak moduluaren izenaren ordez bide osoa eta fitxategi-izena erabiltzea eskatzen du. Irakurri gehiago JS moduluei buruz arakatzailean. Horregatik erabiltzen dugu goikoaren 'bootstrap.esm.min.js'ordez 'bootstrap'. Hala ere, hau gehiago zaildu egiten da gure Popperren menpekotasuna, Popper gure JavaScript-era inportatzen duena honela:

import * as Popper from "@popperjs/core"

Hau horrela saiatzen bazara, honelako errore bat ikusiko duzu kontsolan:

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

Hau konpontzeko, importmapbideak osatzeko modulu-izenak ebazteko erabil dezakezu. Zure helburuko arakatzaileek ez badute onartzen importmap, es-module-shims proiektua erabili beharko duzu. Hona hemen nola funtzionatzen duen Bootstrap eta Popper-en:

<!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>

Mendekotasunak

Plugin eta CSS osagai batzuk beste plugin batzuen araberakoak dira. Pluginak banan-banan sartzen badituzu, ziurtatu mendekotasun horiek egiaztatzea dokumentuetan.

Gure goitibeherako zerrendak, popover-ak eta tresna-aholkuak ere Popperren araberakoak dira .

Datu-atributuak

Bootstrap-eko plugin ia guztiak HTML bidez soilik gaitu eta konfigura daitezke datu-atributuekin (JavaScript funtzionalitatea erabiltzeko gure modurik hobetsia). Ziurtatu datu-atributu multzo bakarra erabiltzen duzula elementu bakarrean (adibidez, ezin duzu tresna-informaziorik eta modal bat botoi beretik abiarazi).

Aukerak datu-atributuen edo JavaScript bidez pasa daitezkeenez, aukera-izen bat gehi diezaiokezu data-bs-, honela data-bs-animation="{value}". Ziurtatu aukera-izenaren kasu-mota " camelCase "-tik " kebab-case "-ra aldatzen duzula aukerak datu-atributuen bidez pasatzen dituzunean. Adibidez, erabili data-bs-custom-class="beautifier"ordez data-bs-customClass="beautifier".

Bootstrap 5.2.0-tik aurrera, osagai guztiek erreserbatutako datu-atributu esperimentaldata-bs-config bat onartzen dute , osagaien konfigurazio sinplea JSON kate gisa gorde dezakeena. Elementu batek data-bs-config='{"delay":0, "title":123}'eta data-bs-title="456"atributuak dituenean, azken titlebalioa izango da 456eta bereizitako datu-atributuek gailuan emandako balioak gainidatziko dituzte data-bs-config. Gainera, lehendik dauden datu-atributuek JSON balioak gorde ditzakete data-bs-delay='{"show":0,"hide":150}'.

Hautatzaileak

Jatorrizkoak querySelectoreta querySelectorAllmetodoak erabiltzen ditugu DOM elementuak kontsultatzeko errendimendu arrazoiengatik, beraz, baliozko hautatzaileak erabili behar dituzu . bezalako hautatzaile bereziak erabiltzen badituzu collapse:Example, ziurtatu ihes egiten duzula.

Gertaerak

Bootstrap-ek plugin gehienen ekintza berezietarako gertaera pertsonalizatuak eskaintzen ditu. Orokorrean, mugagabea eta iraganeko partizipio formakoak dira, non infinitiboa (adib. show) gertaera baten hasieran abiarazten den eta bere iraganeko partizipioaren forma (adib. shown) ekintza bat amaitzean abiarazten den.

Infinitiboko gertaera guztiek preventDefault()funtzionaltasuna ematen dute. Horrek ekintza baten exekuzioa hasi baino lehen gelditzeko gaitasuna ematen du. Gertaeren kudeatzaile batetik faltsua itzultzeak automatikoki deituko du preventDefault().

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

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

API programatikoa

Eraikitzaile guztiek aukerako aukerako objektu bat edo ezer onartzen dute (plugin bat abiarazten duena bere portaera lehenetsiarekin):

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

Plugin-instantzia jakin bat lortu nahi baduzu, plugin bakoitzak getInstancemetodo bat erakusten du. Adibidez, instantzia bat elementu batetik zuzenean berreskuratzeko:

bootstrap.Popover.getInstance(myPopoverEl)

Metodo hau itzuliko nullda eskatutako elementuaren gainean instantzia bat abiarazten ez bada.

Bestela, getOrCreateInstanceDOM elementu batekin erlazionatutako instantzia lortzeko erabil daiteke, edo berri bat sortu hasieratu ez bazen.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Instantzia bat hasieratu ez bada, aukerako konfigurazio-objektu bat onartu eta erabil dezake bigarren argumentu gisa.

CSS hautatzaileak eraikitzaileetan

getInstanceeta metodoez gain , plugin-eraikitzaile guztiek DOM elementu bat edo baliozko CSS hautatzailegetOrCreateInstance bat onar dezakete lehen argumentu gisa. Plugin elementuak metodoarekin aurkitzen dira, gure pluginek elementu bakarra onartzen baitute.querySelector

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')

Funtzio asinkronoak eta trantsizioak

API programatikoko metodo guztiak asinkronoak dira eta trantsizioa hasitakoan deitzen duenarengana itzultzen dira, baina amaitu baino lehen . Trantsizioa amaitutakoan ekintza bat exekutatzeko, dagokion gertaera entzun dezakezu.

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

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

Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

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`metodoa

disposeMetodoa berehala erabiltzeak zuzena dirudien arren, hide()emaitza okerrak ekarriko ditu. Hona hemen arazoaren erabileraren adibide bat:

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

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

Ezarpen lehenetsiak

Plugin baten ezarpen lehenetsiak alda ditzakezu pluginaren Constructor.Defaultobjektua aldatuz:

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

Metodoak eta propietateak

Bootstrap plugin bakoitzak metodo eta propietate estatiko hauek erakusten ditu.

Metodoa	Deskribapena
`dispose`	Elementu baten modala suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu)
`getInstance`	Metodo estatikoa DOM elementu batekin lotutako instantzia modala lortzeko aukera ematen duena.
`getOrCreateInstance`	Metodo estatikoa DOM elementu bati lotutako instantzia modala lortzeko edo berri bat sortzeko aukera ematen duena, hasieratu ez bazen.

Jabetza estatikoa	Deskribapena
`NAME`	Pluginaren izena ematen du. (Adibidez: `bootstrap.Tooltip.NAME`)
`VERSION`	`VERSION`Bootstrap-en plugin bakoitzaren bertsioa pluginaren eraikitzailearen propietatearen bidez sar daiteke (Adibidea: `bootstrap.Tooltip.VERSION`)

Higienizatzailea

Tooltips eta Popovers-ek gure integratutako desinfektatzailea erabiltzen dute HTML onartzen duten aukerak desinfektatzeko.

Balio lehenetsia allowListhonako hau da:

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: []
}

Lehenetsi honi balio berriak gehitu nahi badituzu allowList, hau egin dezakezu:

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)

Gure desinfektatzailea saihestu nahi baduzu liburutegi dedikatu bat erabiltzea nahiago duzulako, adibidez DOMPurify , honako hau egin beharko zenuke:

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

Aukeran jQuery erabiliz

Ez duzu jQuery behar Bootstrap 5 -en, baina oraindik ere posible da gure osagaiak jQuery-rekin erabiltzea. Bootstrap jQuery-ek windowobjektuan detektatzen badu, gure osagai guztiak gehituko ditu jQuery-ren plugin-sisteman. Honek honako hau egiteko aukera ematen dizu:

$('[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

Gauza bera gertatzen da gure gainerako osagaiekin.

Gatazkarik ez

Batzuetan beharrezkoa da Bootstrap pluginak beste UI esparru batzuekin erabiltzea. Egoera horietan, noizean behin izen-espazioen talkak gerta daitezke. Hori gertatzen bada, .noConflictbalioa berreskuratu nahi duzun pluginera dei dezakezu.

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

Bootstrap-ek ez ditu ofizialki onartzen Prototype edo jQuery UI bezalako hirugarrenen JavaScript liburutegiak. Gertaerak tartekatuta egon arren .noConflict, zure kabuz konpondu behar dituzun bateragarritasun-arazoak egon daitezke.

jQuery gertaerak

Bootstrap-ek jQuery detektatuko jQuerydu objektuan badago eta atributurik windowez badago . jQuery aurkitzen bada, Bootstrap-ek gertaerak igorriko ditu jQuery-ren gertaeren sistemari esker. Beraz, Bootstrap-en gertaerak entzun nahi badituzu, jQuery metodoak ( , ) erabili beharko dituzu ordez .data-bs-no-jquery<body>.on.oneaddEventListener

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

JavaScript desgaituta dago

Bootstrap-en pluginek ez dute atzerabide berezirik JavaScript desgaituta dagoenean. Kasu honetan erabiltzailearen esperientzia axola bazaizu, erabili <noscript>egoera azaltzeko (eta JavaScript berriro nola gaitu) zure erabiltzaileei eta/edo gehitzeko zure ordezko pertsonalizatuak.