JavaScript

“Bootstrap” -y islege bagly JavaScript plaginlerimiz bilen durmuşa geçiriň. Her bir plugin, maglumatlarymyz we programma üpjünçiligi API opsiýalary we başgalar barada öwreniň.

Bu sahypada

Ş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, Parcel, Vite…) ulansaňyz /js/dist/*.js, UMD taýýar faýllary ulanyp bilersiňiz.

JavaScript çarçuwalary bilen ulanmak

Bootstrap CSS-i islendik çarçuwada ulanyp boljakdygyna garamazdan , Bootstrap JavaScript DOM-dan doly bilim alýan React, Vue we Angular ýaly JavaScript çarçuwalaryna doly laýyk gelmeýär . “Bootstrap” we çarçuwanyň ikisi-de şol bir DOM elementini üýtgetmäge synanyşyp biler, netijede “açyk” ýagdaýda saklanýan aşak gaçmalar ýaly näsazlyklar ýüze çykyp biler.

Bu görnüşli çarçuwany ulanýanlar üçin has gowy alternatiw , Bootstrap JavaScript -iň ýerine çarçuwaly aýratyn bukjany ulanmakdyr. Ine iň meşhur wariantlar:

Reaksiýa: Bootstrap-a reaksiýa beriň
Vue: BootstrapVue (häzirki wagtda diňe Vue 2 we Bootstrap 4 goldaýar)
Burç: ng-bootstrap

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

Özüňiz synap görüň! “Bootstrap” -y twbs / mysallar ammaryndan ES moduly hökmünde ulanmak üçin deslapky kody we iş demosyny göçürip alyň . Mysal üçin StackBlitz- de açyp bilersiňiz .

Maksatly brauzerleriňiz goldaýan bolsa, Bootstrap-y brauzerde 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>

JS bukjalary bilen deňeşdirilende, brauzerde ESM-i ulanmak, modulyň adynyň ýerine doly ýoly we faýl adyny ulanmagy talap edýär. JS modullary barada brauzerde has giňişleýin okaň. Şonuň üçin ýokardaky 'bootstrap.esm.min.js'ýerine derek ulanýarys . 'bootstrap'Şeýle-de bolsa, Popper-i JavaScript-ä şeýle import edýän Popper garaşlylygymyz hasam kynlaşýar:

import * as Popper from "@popperjs/core"

Muny bolşy ýaly synap görseňiz, aşakdaky ýaly konsolda ýalňyşlyk görersiňiz:

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

Muny düzetmek üçin, importmapýollary tamamlamak üçin özbaşdak modul atlaryny çözmek üçin ulanyp bilersiňiz. Maksatly brauzerleriňiz goldamaýan bolsa , es-module-shims taslamasyny importmapulanmaly bolarsyňyz . “Bootstrap” we “Popper” üçin nähili işleýär:

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

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 .

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

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Saýlaýjylar

Netijeli sebäplere görä DOM elementlerini soramak üçin ýerli querySelectorwe usullary ulanýarys, şonuň üçin dogry saýlaýjylary ulanmalysyňyz . Specialörite saýlaýjylary ulanýan bolsaňyz , olardan gaçmagy unutmaň.querySelectorAllcollapse:Example

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

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

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

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

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

Belli bir plugin mysalyny almak isleseňiz, her bir plugin getInstanceusuly açýar. Mysal üçin, bir elementden gönüden-göni mysal almak üçin:

bootstrap.Popover.getInstance(myPopoverEl)

nullTalap edilýän elementiň üstünden mysal başlamasa, bu usul gaýdyp geler .

Ativea- da bolmasa, getOrCreateInstanceDOM elementi bilen baglanyşykly mysal almak ýa-da başlamadyk ýagdaýynda täzesini döretmek üçin ulanylyp bilner.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Mysal başlamadyk bolsa, ikinji argument hökmünde goşmaça konfigurasiýa obýektini kabul edip we ulanyp biler.

Konstruktorlarda CSS saýlaýjylary

getInstanceUsullara we usullara goşmaça , ähli plugin konstruktorlary ilkinji argument hökmünde getOrCreateInstanceDOM elementini ýa-da dogry CSS saýlaýjysyny kabul edip bilerler. Plagin elementleri querySelectorusul bilen tapylýar, sebäbi pluginlerimiz diňe bir elementi goldaýar.

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

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.

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

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

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

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

disposeUsuly derrew ulanmak dogry ýaly bolup görünse-de hide(), nädogry netijelere getirer. Meseläni ulanmagyň mysaly:

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

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

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

Usullar we häsiýetler

Her Bootstrap plugin aşakdaky usullary we statiki häsiýetleri paş edýär.

Usul	Düşündiriş
`dispose`	Bir elementiň modalyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)
`getInstance`	DOM elementi bilen baglanyşykly modal mysaly almaga mümkinçilik berýän statiki usul.
`getOrCreateInstance`	DOM elementi bilen baglanyşykly modal mysaly almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.

Statik emläk	Düşündiriş
`NAME`	Plagin adyny görkezýär. (Mysal `bootstrap.Tooltip.NAME`:)
`VERSION`	`VERSION`“Bootstrap” -yň her bir plugininiň wersiýasyna plugin konstruktorynyň emlägi arkaly girip bolýar (Mysal `bootstrap.Tooltip.VERSION`:)

Arassalaýjy

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

Bellenen allowListbaha aşakdakylar:

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

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

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)

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

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

Islege görä jQuery ulanmak

Bootstrap 5-de jQuery gerek däl , ýöne jQuery bilen komponentlerimizi ulanmak mümkin. “ Bootstrap jQuery” windowobýektde ýüze çykarylsa, jQuery-iň plugin ulgamyna ähli komponentlerimizi goşar. Bu size aşakdakylary etmäge mümkinçilik berýär:

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

Beýleki komponentlerimizde-de edil şonuň ýaly.

Dawa ýok

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.

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

Bootstrap, Prototype ýa-da jQuery UI ýaly üçünji tarap JavaScript kitaphanalaryny resmi taýdan goldamaýar. Wakalara we at giňişligine garamazdan .noConflict, özbaşdak düzetmeli utgaşyklyk problemalary bolup biler.

jQuery wakalary

“Bootstrap” obýektde bar bolsa we hiç hili atribut ýok bolsa jQuery, jQuery tapar . JQuery tapylsa, Bootstrap jQuery-nyň hadysalar ulgamynyň kömegi bilen wakalary çykarar. Şonuň üçin Bootstrap wakalaryny diňlemek isleseňiz, ýerine derek jQuery usullaryny ( , ) ulanmaly bolarsyňyz .windowdata-bs-no-jquery<body>.on.oneaddEventListener

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

JavaScript ýapyk

JavaScript ýapylanda “Bootstrap” -yň pluginlerinde üýtgeşiklik ýok. 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ň.