JavaScript

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

Multzo bat erabiltzen baduzu (Webpack, Rollup...), /js/dist/*.jsUMD prest dauden fitxategiak erabil ditzakezu.

Bootstrap modulu gisa erabiltzea

ESM( bootstrap.esm.jseta ) gisa eraikitako Bootstrap-en bertsio bat eskaintzen dugu, bootstrap.esm.min.jszure arakatzailean Bootstrap modulu gisa erabiltzeko aukera ematen dizuna, zure helburuko arakatzaileek onartzen badute .

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

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

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 .

Oraindik jQuery erabili nahi duzu? Posible da!

Bootstrap 5 jQuery gabe erabiltzeko diseinatuta dago, baina oraindik ere posible da gure osagaiak jQueryrekin erabiltzeko. Bootstrap jQuery-ek windowobjektuan detektatzen badu, gure osagai guztiak gehituko ditu jQuery-ren plugin-sisteman; $('[data-bs-toggle="tooltip"]').tooltip()horrek esan nahi du tresna-aholkuak gaitzeko egin ahal izango duzula . Gauza bera gertatzen da gure gainerako osagaiekin.

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

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().

var myModal = document.getElementById('myModal')

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

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

API programatikoa

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

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-instantzia jakin bat lortu nahi baduzu, plugin bakoitzak getInstancemetodo bat erakusten du. Elementu batetik zuzenean berreskuratzeko, egin hau: bootstrap.Popover.getInstance(myPopoverEl).

CSS hautatzaileak eraikitzaileetan

CSS hautatzailea ere erabil dezakezu lehen argumentu gisa DOM elementu baten ordez plugina hasieratzeko. Gaur egun pluginaren elementua querySelectormetodoaren bidez aurkitzen da, gure pluginek elementu bakarra onartzen baitute.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Funtzio asinkronoak eta trantsizioak

API programatikoko metodo guztiak asinkronoak dira eta deitzailearengana itzultzen dira trantsizioa hasi eta amaitu baino lehen .

Trantsizioa amaitutakoan ekintza bat exekutatzeko, dagokion gertaera entzun dezakezu.

var myCollapseEl = document.getElementById('myCollapse')

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

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

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

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

Gatazkarik ez (jQuery erabiltzen baduzu bakarrik)

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.

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

Bertsio zenbakiak

VERSIONBootstrap-en plugin bakoitzaren bertsioa pluginaren eraikitzailearen jabetzaren bidez sar daiteke . Adibidez, tooltip pluginerako:

bootstrap.Tooltip.VERSION // => "5.1.3"

Ez dago atzerabide berezirik JavaScript desgaituta dagoenean

Bootstrap-en pluginak ez dira bereziki dotoretasunez jaisten 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.

Higienizatzailea

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

Balio lehenetsia allowListhonako hau da:

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

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

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)

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

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})