JavaScript

Şahsy ýa-da düzülen

Pluginleri aýratynlykda (Bootstrap-yň şahsyýetini ulanyp js/dist/*.js) ýa-da birbada ulanyp bootstrap.jsýa-da kiçeldip bolýar bootstrap.min.js(ikisini hem goşmaň).

Baglaýjy (Webpack, Rollup…) ulansaňyz /js/dist/*.js, UMD taýýar faýllary ulanyp bilersiňiz.

“Bootstrap” -y modul hökmünde ulanmak

Maksatly brauzerleriňiz goldasa , Bootstrap-y brauzeriňizde modul hökmünde ulanmaga mümkinçilik berýän ESM( bootstrap.esm.jswe ) görnüşinde gurlan Bootstrap wersiýasyny hödürleýäris .bootstrap.esm.min.js

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

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

Baglylyklar

Käbir pluginler we CSS komponentleri beýleki pluginlere baglydyr. Plaginleri aýratynlykda goşsaňyz, resminamalarda bu baglylyklary barlaň.

Açylýan ýerlerimiz, açýan ýerlerimiz we gurallarymyz Popper -e baglydyr .

Entegem jQuery ulanmak isleýärsiňizmi? Bu mümkin!

“Bootstrap 5” jQuery bolmazdan ulanmak üçin niýetlenendir, emma jQuery bilen komponentlerimizi ulanmak mümkin. “ Bootstrap jQuery” windowobýektde tapsa, jQuery-iň plugin ulgamyna ähli komponentlerimizi goşar; $('[data-bs-toggle="tooltip"]').tooltip()bu gural gurallaryny işletmek üçin edip biljekdigiňizi aňladýar . Beýleki komponentlerimizde-de edil şonuň ýaly.

Maglumat atributlary

“Bootstrap” pluginleriniň hemmesini diýen ýaly diňe HTML atributlary (JavaScript funksiýasyny ulanmagyň ileri tutulýan usuly) bilen işledip we düzüp bolýar. Diňe bir elementde maglumat atributlarynyň diňe bir toplumyny ulanmagy unutmaň (mysal üçin, şol bir düwmeden gurallar we modal döredip bilmersiňiz.)

Wakalar

“Bootstrap”, pluginleriň özboluşly hereketleri üçin ýörite wakalary üpjün edýär. Umuman aýdylanda, bular infinitif we geçmiş gatnaşygy görnüşinde gelýär - bu ýerde showbir hadysanyň başynda infinitif (mysal üçin shown) ýüze çykýar we bir iş gutarandan soň öňki gatnaşygy görnüşi (mysal üçin) ýüze çykýar.

Infhli infinitif hadysalar preventDefault()işlemegi üpjün edýär. Bu, hereketiň başlamazdan ozal ýerine ýetirilmegini togtatmak ukybyny üpjün edýär. Waka işleýjisinden ýalan yzyna gaýtarmak hem awtomatiki jaň eder 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...
})

Programmatiki API

Constrhli konstruktorlar goşmaça opsiýa obýektini ýa-da hiç zady kabul etmeýärler (bu, adaty hereketi bilen bir plugin açýar):

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

Belli bir plugin mysalyny almak isleseňiz, her bir plugin getInstanceusuly açýar. Göni bir elementden almak üçin muny ýerine ýetiriň : bootstrap.Popover.getInstance(myPopoverEl).

Konstruktorlarda CSS saýlaýjylary

Şeýle hem, plagini işe girizmek üçin DOM elementiniň ýerine ilkinji argument hökmünde CSS saýlaýjysyny ulanyp bilersiňiz. Häzirki wagtda plugin üçin element querySelectorusul bilen tapylýar, sebäbi pluginlerimiz diňe bir elementi goldaýar.

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

Asynkron funksiýalar we geçişler

Programhli programma API usullary asynkron bolup, geçiş başlansoň, ýöne gutarmanka jaň edijä gaýdyp gelýär .

Geçiş tamamlanandan soň bir işi ýerine ýetirmek üçin degişli wakany diňläp bilersiňiz.

var myCollapseEl = document.getElementById('myCollapse')

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

Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

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

Bellenen sazlamalar

Bir plugin üçin deslapky sazlamalary üýtgedip bilersiňiz Constructor.Default:

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

Dawa ýok (diňe jQuery ulansaňyz)

Käwagt beýleki UI çarçuwalary bilen Bootstrap plaginlerini ulanmaly bolýar. Bu ýagdaýlarda at giňişliginde wagtal-wagtal çaknyşyklar bolup biler. .noConflictŞeýle ýagdaý ýüze çyksa, bahasyny yzyna öwürmek isleýän pluginiňize jaň edip bilersiňiz.

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

Wersiýa belgileri

VERSION“Bootstrap” -yň her bir plugininiň wersiýasyna plugin konstruktorynyň eýeçiligi arkaly girip bolýar . Mysal üçin, gurallar üçin plugin üçin:

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

JavaScript ýapylanda aýratyn ýalňyşlyklar ýok

JavaScript ýapylanda “Bootstrap” -yň pluginleri aýratyn yza çekilmeýär. Bu ýagdaýda ulanyjynyň tejribesi barada alada edýän bolsaňyz, ulanyjylaryňyza <noscript>ýagdaýy (we JavaScript-i nädip täzeden işletmelidigini) düşündirmek we / ýa-da öz ýalňyşlaryňyzy goşmak üçin ulanyň.

Arassalaýjy

Gurallar we popovers, HTML-ni kabul edýän wariantlary arassalamak üçin gurlan sanitizatorymyzy ulanýarlar.

Bellenen allowListbaha aşakdakylar:

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

Bu başlangyç üçin täze bahalar goşmak isleseňiz allowList, aşakdakylary edip bilersiňiz:

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)

Sanitizatorymyzdan aýlanyp geçmek isleseňiz, aýratyn kitaphanany, mysal üçin DOMPurify ulanmagy makul bilýän bolsaňyz, aşakdakylary etmeli:

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