JaavaScript

Bootstrap gara jireenyaatti fidaa filannoo JavaScript plugins keenyaan. Waa'ee tokkoon tokkoo pilaaginii, filannoowwan API deetaa fi sagantaa keenyaa fi kkf baradhu.

Fuula kana irratti

Dhuunfaa ykn qindaa’ee

Plugins dhuunfaan hammatamuu danda'u (Bootstrap's individual fayyadamuun js/dist/*.js), ykn hunda yeroo tokkotti fayyadamuun bootstrap.jsykn xiqqaate bootstrap.min.js(lamaanuu hin dabaliin).

Yoo bundler fayyadamte (Webpack, Parcel, Vite...), /js/dist/*.jsfaayiloota kanneen UMD qophaa'an fayyadamuu dandeessa.

Fayyadama unkaalee JaavaScript waliin

Bootstrap CSS framework kamiinuu fayyadamuun kan danda'amu yoo ta'u, Bootstrap JavaScript frameworks JavaScript akka React, Vue, fi Angular kanneen beekumsa guutuu DOM fudhatan waliin guutummaatti wal hin simne. Bootstrap fi framework lamaan isaanii elementii DOM walfakkaataa jijjiiruuf yaalu danda'u, bu'aan isaas dogongora akka dropdowns kan bakka “banaa” keessatti maxxanan fida.

Filannoon fooyya'aan warra gosa unkaalee kana fayyadamaniif bakka JaavaScript Bootstrap fayyadamuun paakeejii unkaa addaa fayyadamuudha . Filannoowwan baay'ee jaallataman keessaa muraasni kunooti:

Deebi'i: Bootstrap deebi'i
Vue: BootstrapVue (yeroo ammaa Vue 2 fi Bootstrap 4 qofa deeggara)
Kofa: ng-bootstrap jedhamuun beekama

Bootstrap akka moojuuliitti fayyadamuu

Ofii keetii yaalaa! Koodii madda fi demoo hojii Bootstrap akka moojuulii ES fayyadamuuf kuusaa twbs/examples irraa buufadhu . Akkasumas fakkeenya StackBlitz keessatti banuun ni danda'ama .

ESMBootstrap akka ( bootstrap.esm.jsfi ) tti ijaarame bootstrap.esm.min.jskan Bootstrap akka moojuulii biraawzariitti akka fayyadamtu si dandeessisu ni kennina, yoo biraawzaroota kee irratti xiyyeeffatte deeggaran .

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

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

JS bundlers wajjin wal bira qabamee yoo ilaalamu, ESM browser keessatti fayyadamuun maqaa moojulii osoo hin taane daandii guutuu fi maqaa faayilii fayyadamuu si gaafata. Waa'ee moojuulota JS biraawzari keessatti bal'inaan dubbisi. Kanaafidha 'bootstrap.esm.min.js'bakka 'bootstrap'olitti fayyadamnu. Haa ta'u malee, kun hirkattummaa Popper keenyaan daran walxaxaa ta'a, kunis Popper gara JavaScript keenyaatti akkasitti galcha:

import * as Popper from "@popperjs/core"

Yoo kana akkuma jirutti yaaltan, dogongora konsolii keessatti akka armaan gadii ni argita:

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

Kana sirreessuuf, importmapmaqaawwan moojuulii fedhiidhaan karaalee xumuruuf furuuf an fayyadamuu dandeessa. Yoo biraawzaroota kee irratti xiyyeeffatte hin deeggarre , pirojektii es-module-shimsimportmap fayyadamuu si barbaachisa . Bootstrap fi Popper'f akkamitti akka hojjetu kunooti:

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

Hirkatummaa

Plugins fi qaamolee CSS tokko tokko plugins biroo irratti hundaa'u. Yoo dhuunfaan ifteessitoota hammatte, hirkattummaa kana docs keessatti ilaaluu mirkaneessi.

Dropdowns, popovers, fi tooltipps keenyas Popper irratti hundaa'u .

Amaloota deetaa

Ijaarsiin Bootstrap hundi jechuun ni danda'ama karaa HTML qofa amaloota deetaa waliin dandeessisuun fi qindaa'uu danda'u (akkaataa keenya filatamaan hojii JavaScript fayyadamuu). Tuuta amaloota deetaa tokko qofa qaama tokko irratti fayyadamuu kee mirkaneessi (fkn, gorsa meeshaa fi moodaalii qaree walfakkaataa irraa kakaasuu hin dandeessu.)

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Filattoota

Qaamolee DOM sababa raawwiidhaaf gaafachuuf dhalootaa querySelectorfi mala fayyadamna, kanaaf filattoota sirriiquerySelectorAll fayyadamuu qabda . Yoo filannoowwan addaa akka , fayyadamte, isaan jalaa miliquu kee mirkaneessi.collapse:Example

Taateewwan

Bootstrap taateewwan amala gochoota addaa plugins baay'eedhaaf kenna. Walumaagalatti, kunniin bifa xumura hin qabnee fi gocha darbeen dhufu - bakka xumura hin qabne (fkn show) jalqaba taatee tokkoo irratti kaka’u, fi bifa gocha isaa darbe (fk. shown) xumura gocha tokkoo irratti kaka’u.

Taateewwan dhuma hin qabne hundi preventDefault()dalagaa ni kennu. Kunis dandeettii raawwii gocha tokkoo osoo hin jalqabin dhaabuu kenna. Qabduu taatee irraa soba deebisuun ofumaan ni waama preventDefault().

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

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

API sagantaa

Ijaarsitoonni hundi wanta filannoo filannoo ykn homaa hin fudhatu (kan amala durtii isaatiin ifteessituu jalqaba):

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

Yoo fakkeenya ifteessaa murtaa'e argachuu barbaadde, tokkoon tokkoon ifteessaa getInstancemala tokko saaxila. Fakkeenyaaf, fakkeenya kallattiin elementii irraa fudhachuuf:

bootstrap.Popover.getInstance(myPopoverEl)

Malli kun nullyoo fakkeenyi qaama gaafatame irratti hin jalqabne ni deebi'a.

Akka filannootti, getOrCreateInstancefakkeenya qaama DOM waliin walqabate argachuuf fayyadamuu ni danda'ama, ykn yoo hin jalqabne haaraa uumuuf.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Yoo fakkeenyi tokko hin jalqabne, wanta qindeessaa filannoo akka falmii lammaffaatti fudhachuu fi fayyadamuu danda'a.

Filattoota CSS ijaarsitoota keessatti

getInstanceMalawwan fi dabalatee getOrCreateInstance, ijaarsitoonni ifteessaa hundi qaama DOM ykn filannoo CSS sirrii akka murfii jalqabaatti fudhachuu danda'u. Qaamonni ifteessaa querySelectormala waliin argamu erga ifteessitoonni keenya elementii tokko qofa waan deeggaraniif.

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

Faankishiniiwwanii fi ce'umsawwan wal hin simne

Malleen API sagantaa hundi wal hin simne yoo ta'u, erga ce'umsi jalqabame booda gara waamichaatti deebi'u, garuu osoo hin xumuramin dura . Erga ce'umsi xumuramee booda gocha tokko raawwachuuf, taatee walgitu dhaggeeffachuu dandeessa.

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

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

Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .

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

dispose, booda battalumatti mala fayyadamuun sirrii fakkaachuu danda’us hide(), bu’aa sirrii hin taane argamsiisa. Fakkeenyi itti fayyadama rakkoo kunooti:

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

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

Sajoo durtii

Sajoo durtii ifteessaa jijjiiruu dandeessa Constructor.Defaultwanta ifteessaa fooyyessuudhaan:

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

Malaa fi amaloota

Ijaartuu Bootstrap hunduu malawwan armaan gadii fi amaloota istaatiksii saaxila.

Mala	Ibsa
`dispose`	Moodaalii elementii tokkoo ni balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
`getInstance`	Mala istaatiksii kan fakkeenya moodaalii elementii DOM waliin walqabate argachuuf si dandeessisu.
`getOrCreateInstance`	Mala istaatiksii kan fakkeenya moodaalii elementii DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu.

Qabeentaa istaatiksii	Ibsa
`NAME`	Maqaa ifteessaa deebisa. (Fakkeenya: `bootstrap.Tooltip.NAME`) .
`VERSION`	`VERSION`Vershiniin tokkoon tokkoo pilaaginii Bootstrap karaa qabeentaa ijaarsa ifteessaa argachuun ni danda'ama (Fakkeenya: `bootstrap.Tooltip.VERSION`) .

Saanitaayizarii

Tooltips fi Popovers filannoowwan HTML fudhatan qulqulleessuuf sanitizer keenya ijaarame fayyadamu.

Gatiin durtii allowListkan armaan gadiiti:

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

Yoo gatiiwwan haaraa durtii kana irratti dabaluu barbaadde allowListkanneen armaan gadii gochuu dandeessa:

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)

Yoo sanitizer keenya bira darbuu barbaadde sababiin isaas mana kitaabaa addaa fayyadamuu filatte, fakkeenyaaf DOMPurify , kanneen armaan gadii gochuu qabda:

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

Filannoodhaan jQuery fayyadamuun

Bootstrap 5 keessatti jQuery si hin barbaachisu , garuu ammallee jQuery waliin qaamolee keenya fayyadamuun ni danda'ama. Yoo Bootstrap wanta jQuerykeessatti arge window, qaamolee keenya hunda sirna plugin jQuery keessatti dabalata. Kunis wantoota armaan gadii akka hojjettu si dandeessisa:

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

Qaamolee keenya kanneen biroonis akkasuma.

Waldhabdee hin qabu

Yeroo tokko tokko Bootstrap plugins UI frameworks biroo wajjin fayyadamuun barbaachisaadha. Haalota kanneen keessatti, walitti bu'iinsi iddoo maqaa darbee darbee uumamuu danda'a. Yoo kun ta'e, .noConflictpilaaginii gatii isaa deebisuu barbaaddu waamu dandeessa.

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

Bootstrap mana kitaabaa JaavaScript qaama sadaffaa akka Prototype ykn jQuery UI ifatti hin deeggaru. Taateewwan jiraatanis .noConflictfi maqaa addaan baafaman, rakkoon walsimsiisaa kan ofii keetiin sirreessuu qabdu jiraachuu danda'a.

jTaateewwan gaaffii

Bootstrap jQuery yoo wanta jQuerykeessatti argamee fi amalli . Yoo jQuery argame, Bootstrap taateewwan galata sirna taatee jQuery'f ni baafata. Kanaafuu yoo taateewwan Bootstrap dhaggeeffachuu barbaadde, maloota jQuery ( , ) osoo hin taane fayyadamuu qabda .windowdata-bs-no-jquery<body>.on.oneaddEventListener

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

JaavaScript hojii irraa oolche

Pilaginoonni Bootstrap yeroo JaavaScript hanqifamu fallback addaa hin qaban. Yoo waa'ee muuxannoo fayyadamaa haala kana keessatti dhimmamte, <noscript>haala (fi akkaataa JaavaScript irra deebitee dandeessiftu) fayyadamtoota keetiif ibsuuf fayyadami, fi/ykn kufaatii amala mataa keetii itti dabali.