ޖާވާސްކްރިޕްޓް

އަޅުގަނޑުމެންގެ އިޚްތިޔާރީ ޖާވާސްކްރިޕްޓް ޕްލަގިންސްތަކާއެކު ބޫޓްސްޓްރެޕް ދިރުވާލާށެވެ. ކޮންމެ ޕްލަގިންއަކާ ބެހޭގޮތުން، އަޅުގަނޑުމެންގެ ޑޭޓާއާއި، ޕްރޮގްރާމެޓިކް އެޕީއައި އޮޕްޝަންތަކާއި، އަދިވެސް އެތައް ކަމެއް ދަސްކުރައްވާށެވެ.

މި ޞަފްޙާގައެވެ

ވަކިވަކިން ނުވަތަ އެކުލަވާލާފައި

ޕްލަގިންތައް ވަކިވަކިން ހިމަނާލެވިދާނެ (ބޫޓްސްޓްރެޕްގެ އިންޑިވިޖުއަލް ބޭނުންކޮށްގެން js/dist/*.js), ނުވަތަ ހުރިހާ އެއްޗެއް އެއްފަހަރާ ބޭނުންކޮށްގެން bootstrap.jsނުވަތަ މިނިފައިޑް bootstrap.min.js(އެދެކަންތައްވެސް ނުހިމަނާ) ހިމަނާލެވިދާނެއެވެ.

ބަންޑްލަރ (ވެބްޕެކް، ޕާރސަލް، ވައިޓް...) ބޭނުންކުރާނަމަ، /js/dist/*.jsޔޫއެމްޑީ ތައްޔާރުކޮށްފައިވާ ފައިލްތައް ބޭނުންކުރެވިދާނެއެވެ.

ޖާވާސްކްރިޕްޓް ފްރޭމްވޯކްތަކާއެކު ބޭނުންކުރުން

ބޫޓްސްޓްރެޕް ސީއެސްއެސް ކޮންމެ ފްރޭމްވޯކަކާއެކުވެސް ބޭނުންކުރެވޭއިރު، ބޫޓްސްޓްރަޕް ޖާވާސްކްރިޕްޓަކީ ޑީއޯއެމްގެ ފުރިހަމަ ޢިލްމެއް ގަބޫލުކުރާ ރިއެކްޓް، ވޫ، އަދި އެންގްއުލަރ ފަދަ ޖާވާސްކްރިޕްޓް ފްރޭމްވޯކްތަކާ ފުރިހަމައަށް ގުޅޭ އެއްޗެއް ނޫނެވެ . ބޫޓްސްޓްރެޕް އާއި ފްރޭމްވޯކް ވެސް އެއް ޑޮމް އެލިމެންޓެއް މުއުޓޭޓް ކުރަން މަސައްކަތް ކުރުމުން، އޭގެ ސަބަބުން ޑްރޮޕްޑައުން ފަދަ ބަގްތައް “ހުޅުވާފައިވާ” މަގާމުގައި ތާށިވެފައި ހުރެދާނެ އެވެ.

މި ބާވަތުގެ ފްރޭމްވޯކްތައް ބޭނުންކުރާ މީހުންނަށް ރަނގަޅު ބަދަލަކީ ބޫޓްސްޓްރެޕް ޖާވާސްކްރިޕްޓްގެ ބަދަލުގައި ފްރޭމްވޯކަށް ޚާއްޞަ ޕެކޭޖެއް ބޭނުންކުރުމެވެ. މިއީ އެންމެ މަގުބޫލު ބައެއް ގޮތްތަކެވެ.

ރިއެކްޓް: ރިއެކްޓް ބޫޓްސްޓްރެޕް
Vue: BootstrapVue (މިވަގުތު ސަޕޯޓް ކުރަނީ ހަމައެކަނި Vue 2 އަދި Bootstrap 4)
އެންގްއުލަރ: ng-bootstrap

މޮޑިއުލެއްގެ ގޮތުގައި ބޫޓްސްޓްރެޕް ބޭނުންކުރުން

އަމިއްލައަށް ޓްރައިކޮށްލައްވާ! ބޫޓްސްޓްރެޕް އީއެސް މޮޑިއުލެއްގެ ގޮތުގައި ބޭނުންކުރުމަށް ބޭނުންކުރާ ސޯސް ކޯޑާއި މަސައްކަތްކުރާ ޑެމޯ twbs/examples ރިޕޮޒިޓަރީން ޑައުންލޯޑް ކުރައްވާށެވެ . އަދި ސްޓޭކްބްލިޓްޒް އިން މިސާލު ހުޅުވާލެވިދާނެއެވެ .

ESMއަޅުގަނޑުމެން ފޯރުކޮށްދެނީ ( bootstrap.esm.jsއަދި ) ގެ ގޮތުގައި ބިނާކޮށްފައިވާ ބޫޓްސްޓްރެޕްގެ ވަރޝަނެއް ކަމަށާއި، 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>

ޖޭއެސް ބަންޑްލަރތަކާ އަޅާބަލާއިރު، ބްރައުޒާގައި އީއެސްއެމް ބޭނުންކުރުމުގައި މޮޑިއުލް ނަމުގެ ބަދަލުގައި ފުރިހަމަ މަގާއި ފައިލް ނަން ބޭނުންކުރަން ޖެހެއެވެ. ޖޭއެސް މޮޑިއުލްތަކާ ބެހޭ އިތުރު މައުލޫމާތު ބްރައުޒާއިން ކިޔައިބަލާށެވެ. މަތީގައިވާ އެއްޗެއްގެ 'bootstrap.esm.min.js'ބަދަލުގައި އަޅުގަނޑުމެން ބޭނުންކުރަނީ އެހެންވެއެވެ . 'bootstrap'ނަމަވެސް މިކަން އިތުރަށް ކޮމްޕްލިކޭޓް ވެގެން ދަނީ އަޅުގަނޑުމެންގެ ޕޮޕަރ ޑިޕެންޑެންސީގެ ސަބަބުން، މިއީ ޕޮޕަރ އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓަށް އެގޮތަށް އިމްޕޯޓް ކުރާ ކަމެކެވެ:

import * as Popper from "@popperjs/core"

މިކަން އެގޮތަށް ޓްރައިކޮށްފިނަމަ، ތިރީގައިވާ ފަދަ އެރަރ އެއް ކޮންސޯލްގައި ފެންނާނެއެވެ.

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

މިކަން ރަނގަޅު ކުރުމަށްޓަކައި، importmapމަގުތައް ފުރިހަމަ ކުރުމަށް އަމިއްލައަށް މޮޑިއުލް ނަންތައް ހައްލު ކުރުމަށް an ބޭނުން ކުރެވިދާނެއެވެ. ޓާގެޓް ކުރެވިފައިވާ ބްރައުޒަރތަކުން އަށް ސަޕޯޓް ނުކުރާނަމަ ، es-module-shims ޕްރޮޖެކްޓް importmapބޭނުން ކުރަން ޖެހޭނެއެވެ . މިއީ ބޫޓްސްޓްރެޕް އަދި ޕޮޕަރ އަށް އެކަން ކުރާ ގޮތެވެ:

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

ޑިޕެންޑެންސީތަކެވެ

ބައެއް ޕްލަގިންސް އާއި ސީއެސްއެސް ކޮމްޕޯނެންޓްތައް ބަރޯސާވެފައިވަނީ އެހެން ޕްލަގިންސް ތަކުގެ މައްޗަށެވެ. ވަކިވަކިން ޕްލަގިންސް ހިމަނާނަމަ، ޑޮކްސްގައި މި ޑިޕެންޑެންސީތައް ޗެކްކުރުން ޔަގީންކުރައްވާށެވެ.

އަޅުގަނޑުމެންގެ ޑްރޮޕްޑައުންސް، ޕޮޕޯވަރސް، އަދި ޓޫލްޓިޕްސް ވެސް ޑިޕެންޑް ކުރަނީ ޕޮޕަރ އަށް .

ޑޭޓާ އެޓްރިބިއުޓްސް

ގާތްގަނޑަކަށް ހުރިހާ ބޫޓްސްޓްރެޕް ޕްލަގިންސް އެއް އެކަނި އެޗްޓީއެމްއެލް މެދުވެރިކޮށް ޑޭޓާ އެޓްރިބިއުޓްތަކާއެކު އެނެބަލްކޮށް ކޮންފިގްރޭޓް ކުރެވޭނެ (ޖާވާސްކްރިޕްޓް ފަންކްޝަނަލިޓީ ބޭނުން ކުރުމަށް އަޅުގަނޑުމެން އިސްކަންދޭ ގޮތް) އެވެ. އެއް އެލިމެންޓެއްގައި ޑޭޓާ އެޓްރިބިއުޓްތަކުގެ އެންމެ ސެޓެއް ބޭނުންކުރުން ޔަގީންކުރައްވާ (މިސާލަކަށް، އެއް ބަޓަނަކުން ޓޫލްޓިޕް އަދި މޮޑަލް ޓްރިގަރ ނުކުރެވޭނެއެވެ.)

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ފާސްކުރެވޭތީ data-bs-، ގައިވާ ފަދައިން އޮޕްޝަން ނަމެއް އަށް އިތުރުކުރެވިދާނެއެވެ data-bs-animation="{value}". ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް އޮޕްޝަންތައް ފާސްކުރާއިރު އޮޕްޝަން ނަމުގެ ކޭސް ޓައިޕް “ camelCase ” އިން “ kebab -case ” އަށް ބަދަލުކުރުން ޔަގީންކުރައްވާށެވެ. މިސާލަކަށް data-bs-custom-class="beautifier"ގެ ބަދަލުގައި ބޭނުން ކުރާށެވެ data-bs-customClass="beautifier".

ބޫޓްސްޓްރެޕް 5.2.0 އިން ފެށިގެން، ހުރިހާ ކޮމްޕޯނެންޓްތަކުންވެސް ޖޭއެސްއޯއެން ސްޓްރިންގއެއްގެ ގޮތުގައި ސާދާ ކޮމްޕޮނެންޓް ކޮންފިގްރޭޝަން ބެހެއްޓޭނެ އެކްސްޕެރިމެންޓަލް ރިޒާވްޑް ޑޭޓާ އެޓްރިބިއުޓަކަށް ސަޕޯޓްކުރެއެވެ. data-bs-configއެލިމެންޓެއްގައި data-bs-config='{"delay":0, "title":123}'އަދި data-bs-title="456"އެޓްރިބިއުޓްސް ހުންނައިރު، ފައިނަލް titleވެލިއު ވާނީ 456އަދި ވަކި ޑޭޓާ އެޓްރިބިއުޓްސް އިން ދީފައިވާ ވެލިއުތައް އޯވަރރައިޑް ވާނެއެވެ data-bs-config. މީގެ އިތުރުން މިހާރު ހުރި ޑޭޓާ އެޓްރިބިއުޓްތަކުގައި ޖޭއެސްއޯއެން ވެލިއުތައް ބެހެއްޓޭނެއެވެ data-bs-delay='{"show":0,"hide":150}'.

ސެލެކްޓަރުން

އަޅުގަނޑުމެން ޕާފޯމަންސް ސަބަބުތަކާހުރެ ޑީއޯއެމް އެލިމެންޓްތަކާ ސުވާލުކުރުމަށް ނެޓިވް querySelectorއަދި މެތޯޑްސް ބޭނުންކުރަނީ، އެހެންކަމުން ތިބާ ބޭނުންކުރަން ޖެހޭނީ ސައްހަ ސެލެކްޓަރސް އެވެ . ފަދަ ޚާއްޞަ ސެލެކްޓަރސް ބޭނުންކުރާނަމަ އެއިން ސަލާމަތްވުން ޔަޤީންކުރައްވާށެވެ.querySelectorAllcollapse:Example

އިވެންޓްސް

ބޫޓްސްޓްރަޕް އިން ގިނަ ޕްލަގިންސްތަކުގެ ޔުނިކް އެކްޝަންތަކަށް ކަސްޓަމް އިވެންޓްތައް ފޯރުކޮށްދެއެވެ. އާންމު ގޮތެއްގައި މިކަންކަން އަންނަނީ އިންފިނިޓިވް އަދި މާޒީގެ ޕާޓިސިޕަލް ފޯމެއްގައި - މިތަނުގައި އިންފިނިޓިވް (ex. show) ހާދިސާއެއް ފެށުމުން ޓްރިގަރ ކުރެވި، އޭގެ މާޒީ ޕާޓިސިޕަލް ފޯމް (ex. shown) ޓްރިގަރ ކުރެވެނީ ޢަމަލެއް ފުރިހަމަވުމުންނެވެ.

ހުރިހާ އިންފިނިޓިވް އިވެންޓްތަކުން ވެސް preventDefault()ފަންކްޝަނަލިޓީ ފޯރުކޮށްދެއެވެ. މިއީ ޢަމަލެއް ފެށުމުގެ ކުރިން އެ ޢަމަލެއް ހިންގުން ހުއްޓުވުމުގެ ޤާބިލުކަން ލިބިގެންދާ ކަމެކެވެ. އިވެންޓް ހެންޑްލަރ އިން ފޯލްސް ރިޓަރން ކުރުމުން ވެސް އޮޓޮމެޓިކުން ގޮވާނެއެވެ preventDefault().

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

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

ޕްރޮގްރާމެޓިކް އެޕީއައި

ހުރިހާ ކޮންސްޓްރަކްޓަރުންވެސް އިޚްތިޔާރީ އޮޕްޝަންސް އޮބްޖެކްޓެއް ނުވަތަ އެއްވެސް އެއްޗެއް ބަލައިނުގަންނަ (މިއީ ޕްލަގިންއެއް އޭގެ ޑިފޯލްޓް ސުލޫކާއެކު އިނިޝިއޭޓް ކުރާ އެއްޗެއް):

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

ވަކި ޕްލަގިން އިންސްޓޭންސްއެއް ހޯދަން ބޭނުންނަމަ ކޮންމެ ޕްލަގިނަކުން ވެސް getInstanceމެތޯޑެއް ހާމަވެގެންދެއެވެ. މިސާލަކަށް، އެލިމެންޓަކުން ސީދާ އިންސްޓޭންސްއެއް ހޯދުމަށްޓަކައި:

bootstrap.Popover.getInstance(myPopoverEl)

މި މެތޯޑް ރިޓަރން ކުރާނީ nullއެދިފައިވާ އެލިމެންޓްގެ މައްޗަށް އިންސްޓޭންސްއެއް އިނިޝިއޭޓް ނުކުރެވިއްޖެނަމައެވެ.

ނުވަތަ، getOrCreateInstanceޑީއޯއެމް އެލިމެންޓަކާ ގުޅިފައިވާ އިންސްޓޭންސް ހޯދުމަށް ބޭނުންކުރެވިދާނެ، ނުވަތަ އިނިޝިއަލައިޒް ނުކުރެވުނު ހާލަތެއްގައި އާ އެއްޗެއް އުފެއްދުމަށް ބޭނުންކުރެވިދާނެއެވެ.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

އިންސްޓޭންސްއެއް އިނިޝިއަލައިޒް ނުކުރެވުނު ހާލަތުގައި، ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި އިޚްތިޔާރީ ކޮންފިގްރޭޝަން އޮބްޖެކްޓެއް ބަލައިގަނެ ބޭނުންކުރެވިދާނެއެވެ.

ކޮންސްޓްރަކްޓަރސް ގައި ސީއެސްއެސް ސެލެކްޓަރސް

getInstanceއަދި މެތޯޑްސްގެ އިތުރުން ، ހުރިހާ ޕްލަގިން ކޮންސްޓްރަކްޓަރުންނަށް ވެސް ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި getOrCreateInstanceޑީއޯއެމް އެލިމެންޓެއް ނުވަތަ ސައްހަ ސީއެސްއެސް ސެލެކްޓަރެއް ބަލައިގަނެވޭނެއެވެ. 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')

އެސިންކްރޮނަސް ފަންކްޝަންތަކާއި ޓްރާންސިޝަންސް

ހުރިހާ ޕްރޮގްރާމެޓިކް އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމަށާއި، ޓްރާންސިޝަން ފެށުމުން، އެކަމަކު ނިމުމުގެ ކުރިން ކޯލަރަށް އެނބުރި އަންނަ މެތޯޑްތަކެއް ކަމަށް ވެސް ވިދާޅުވިއެވެ . ޓްރާންސިޝަން ނިމުމުން ޢަމަލެއް އެގްޒެކެޓް ކުރުމަށްޓަކައި، އެއާ ގުޅޭ އިވެންޓެއް އަޑުއަހާލެވޭނެއެވެ.

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

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

މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާނަމަ އަޅާނުލެވޭނެއެވެ .

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`ގޮތް

disposeއަށް ފަހު ވަގުތުން އެ ގޮތް ބޭނުން ކުރުމަކީ ރަނގަޅު ކަމެއް ކަމަށް ހީވިޔަސް hide()، އޭގެ ސަބަބުން ގޯސް ނަތީޖާތަކެއް ލިބޭނެ އެވެ. މިއީ މައްސަލަ ބޭނުންކުރުމުގެ މިސާލެކެވެ:

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

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

ޑިފޯލްޓް ސެޓިންގސް

ޕްލަގިންއެއްގެ ޑިފޯލްޓް ސެޓިންގސް ބަދަލުކުރެވޭނީ ޕްލަގިންގެ Constructor.Defaultއޮބްޖެކްޓް ބަދަލުކޮށްގެންނެވެ:

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

ގޮތްތަކާއި މުދަލުތައް

ކޮންމެ ބޫޓްސްޓްރެޕް ޕްލަގިންއަކުން ތިރީގައިވާ ގޮތްތަކާއި ސްޓޭޓިކް ޕްރޮޕަޓީތައް ހާމަވެގެންދެއެވެ.

ގޮތް	ތަފްޞީލު
`dispose`	އުނިއިތުރެއްގެ މޮޑަލް ނައްތާލައެވެ. (ޑޮމް އެލިމެންޓްގައި ރައްކާކޮށްފައިވާ ޑޭޓާ ނައްތާލައެވެ)
`getInstance`	ޑޮމް އެލިމެންޓަކާ ގުޅިފައިވާ މޮޑަލް އިންސްޓޭންސް ހޯދުމަށް ފުރުސަތު ލިބޭ ސްޓޭޓިކް މެތޯޑެކެވެ.
`getOrCreateInstance`	ޑޮމް އެލިމެންޓަކާ ގުޅިފައިވާ މޮޑަލް އިންސްޓޭންސް ހޯދުމަށް، ނުވަތަ އިނިޝިއަލައިޒް ނުކުރެވުނު ހާލަތެއްގައި އާ އިންސްޓޭންސްއެއް އުފެއްދުމުގެ ފުރުސަތު ލިބޭ ސްޓޭޓިކް މެތޯޑް.

ސްޓޭޓިކް ޕްރޮޕަޓީ	ތަފްޞީލު
`NAME`	ޕްލަގިން ނަން އަނބުރާ ގެނެސްދެއެވެ. (މިސާލު: `bootstrap.Tooltip.NAME`)
`VERSION`	`VERSION`ބޫޓްސްޓްރެޕްގެ ކޮންމެ ޕްލަގިންއެއްގެ ވަރޝަނަށް ޕްލަގިންގެ ކޮންސްޓްރަކްޓަރުގެ ޕްރޮޕަޓީ މެދުވެރިކޮށް އެކްސެސް ކުރެވޭނެ (މިސާލު: `bootstrap.Tooltip.VERSION`)

ސެނިޓައިޒާ އެވެ

ޓޫލްޓިޕްސް އަދި ޕޮޕޯވަރސް އިން އަޅުގަނޑުމެންގެ ބިލްޓް-އިން ސެނިޓައިޒާ ބޭނުންކޮށްގެން އެޗްޓީއެމްއެލް ބަލައިގަންނަ އޮޕްޝަންތައް ސެނިޓައިޒް ކުރެއެވެ.

ޑިފޯލްޓް allowListވެލިއު އަކީ ތިރީގައިވާ ގޮތަށެވެ.

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

މި ޑިފޯލްޓަށް އާ އަގުތައް އިތުރުކުރަން ބޭނުންނަމަ allowListތިރީގައިވާ ކަންތައްތައް ކުރެވިދާނެއެވެ.

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)

ޚާއްޞަ ލައިބްރަރީއެއް ބޭނުން ކުރަން އިސްކަންދޭތީ އަޅުގަނޑުމެންގެ ސެނިޓައިޒާ ބައިޕާސް ކުރަން ބޭނުންނަމަ، މިސާލަކަށް DOMPurify , ތިރީގައިވާ ކަންތައްތައް ކުރަންވާނެއެވެ.

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

އިޚްތިޔާރީ ގޮތެއްގައި ޖީކުއަރީ ބޭނުންކޮށްގެންނެވެ

ބޫޓްސްޓްރެޕް 5 ގައި jQuery ބޭނުން ނުވާނެ ނަމަވެސް އަދިވެސް jQuery އާއެކު އަޅުގަނޑުމެންގެ ކޮމްޕޯނެންޓްތައް ބޭނުން ކުރެވިދާނެއެވެ. ބޫޓްސްޓްރެޕް އިން jQueryއެ windowއޮބްޖެކްޓްގައި ޑިޓެކްޓް ކޮށްފިނަމަ، އެއީ ޖޭކުއަރީގެ ޕްލަގިން ސިސްޓަމްގައި އަޅުގަނޑުމެންގެ ހުރިހާ ކޮމްޕޯނެންޓްތަކެއް އެޑް ކުރާނެ އެއްޗެކެވެ. މިކަމުގެ ސަބަބުން ތިރީގައިވާ ކަންތައްތައް ކުރެވޭނެއެވެ.

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

އަޅުގަނޑުމެންގެ އެހެން ކޮމްޕޯނެންޓްތަކަށްވެސް ހަމަ އެގޮތަށް.

އެއްވެސް ފުށުއެރުމެއް ނެތެވެ

ބައެއް ފަހަރު ބޫޓްސްޓްރެޕް ޕްލަގިންސްތައް އެހެން ޔޫއައި ފްރޭމްވޯކްތަކާއެކު ބޭނުންކުރަން ޖެހެއެވެ. މި ހާލަތްތަކުގައި ދޭތެރެ ދޭތެރެއިން ނޭމްސްޕޭސް ކޮލިޝަންތައް ދިމާވެދާނެ އެވެ. .noConflictމިހެން ދިމާވެއްޖެނަމަ، އަގު އަނބުރާ ގެންނަން ބޭނުންވާ ޕްލަގިންއަށް ގޮވާލެވިދާނެއެވެ .

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

ބޫޓްސްޓްރެޕް އިން ޕްރޮޓޯޓައިޕް ނުވަތަ ޖޭކުއަރީ ޔޫއައި ފަދަ ތިންވަނަ ފަރާތެއްގެ ޖާވާސްކްރިޕްޓް ލައިބްރަރީތަކަށް ރަސްމީކޮށް ސަޕޯޓް ނުކުރެއެވެ. ނަމަވެސް .noConflictއަދި ނަން ޖާގަ ކުރެވިފައިވާ އިވެންޓްތައް، ކޮމްޕެޓިބިލިޓީ މައްސަލަތައް ހުރެދާނެ ކަމަށާއި އެކަންކަން އަމިއްލައަށް ހައްލުކުރަން ޖެހޭ ކަމަށެވެ.

ޖީކުއަރީ އިވެންޓްސް

ބޫޓްސްޓްރެޕް އިން ޖީކުއަރީ ޑިޓެކްޓް ކުރާނީ އޮބްޖެކްޓްގައި ހުރިނަމަ jQueryއަދި 1 ގައި ސެޓްކޮށްފައިވާ އެޓްރިބިއުޓެއް windowނެތްނަމައެވެ . ޖީކުއަރީ ފެނިއްޖެނަމަ ބޫޓްސްޓްރެޕް އިން ޖޭކުއަރީގެ އިވެންޓް ސިސްޓަމްގެ ސަބަބުން އިވެންޓްތައް އެމިޓް ކުރާނެއެވެ. އެހެންކަމުން ބޫޓްސްޓްރެޕްގެ އިވެންޓްތައް އަޑުއަހަން ބޭނުންނަމަ ޖޭކުއަރީ މެތޯޑްސް ( , ) ގެ ބަދަލުގައި ބޭނުންކުރަން ޖެހޭނެއެވެ .data-bs-no-jquery<body>.on.oneaddEventListener

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

ޑިސެބިބަލް ޖާވާސްކްރިޕްޓް

ޖާވާސްކްރިޕްޓް ޑިސެބިލް ކޮށްފައި ހުންނައިރު ބޫޓްސްޓްރެޕްގެ ޕްލަގިންސްތަކުގައި ޚާއްޞަ ފޯލްބެކެއް ނެތެވެ. މި ހާލަތުގައި ޔޫޒަރ އެކްސްޕީރިއަންސްއަށް ފަރުވާތެރިވާނަމަ، ޔޫޒަރުންނަށް <noscript>ހާލަތު ބަޔާންކޮށްދިނުމަށް (އަދި ޖާވާސްކްރިޕްޓް އަލުން އެނެބަލް ކުރާނެ ގޮތް) ބޭނުންކޮށް، އަދި/ނުވަތަ އަމިއްލަ ކަސްޓަމް ފޯލްބެކްތައް އިތުރުކޮށްލާށެވެ.