ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

ವೈಯಕ್ತಿಕ ಅಥವಾ ಸಂಕಲನ

ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸೇರಿಸಬಹುದು (ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವೈಯಕ್ತಿಕ ಬಳಸಿ js/dist/*.js), ಅಥವಾ ಎಲ್ಲವನ್ನೂ ಏಕಕಾಲದಲ್ಲಿ ಬಳಸುವುದು bootstrap.jsಅಥವಾ ಮಿನಿಫೈಡ್ bootstrap.min.js(ಎರಡನ್ನೂ ಸೇರಿಸಬೇಡಿ).

ನೀವು ಬಂಡ್ಲರ್ ಅನ್ನು ಬಳಸಿದರೆ (ವೆಬ್‌ಪ್ಯಾಕ್, ರೋಲಪ್...), ನೀವು /js/dist/*.jsUMD ಸಿದ್ಧವಾಗಿರುವ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬಳಸುವುದು

ನಿಮ್ಮ ಉದ್ದೇಶಿತ ಬ್ರೌಸರ್‌ಗಳು ಅದನ್ನು ಬೆಂಬಲಿಸಿದರೆ , ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬಳಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ 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>

ಅವಲಂಬನೆಗಳು

ಕೆಲವು ಪ್ಲಗಿನ್‌ಗಳು ಮತ್ತು CSS ಘಟಕಗಳು ಇತರ ಪ್ಲಗಿನ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿವೆ. ನೀವು ಪ್ರತ್ಯೇಕವಾಗಿ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಸೇರಿಸಿದರೆ, ಡಾಕ್ಸ್‌ನಲ್ಲಿ ಈ ಅವಲಂಬನೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ನಮ್ಮ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು, ಪಾಪೋವರ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಸಹ ಪಾಪ್ಪರ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ .

ಇನ್ನೂ jQuery ಬಳಸಲು ಬಯಸುವಿರಾ? ಅದು ಸಾಧ್ಯ!

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 5 ಅನ್ನು jQuery ಇಲ್ಲದೆ ಬಳಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿ��ೆ, ಆದರೆ ನಮ್ಮ ಘಟಕಗಳನ್ನು jQuery ಯೊಂದಿಗೆ ಬಳಸಲು ಇನ್ನೂ ಸಾಧ್ಯವಿದೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ವಸ್ತುವಿನಲ್ಲಿ ಪತ್ತೆಮಾಡಿದರೆ jQueryಅದುwindow ನಮ್ಮ ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು jQuery ನ ಪ್ಲಗಿನ್ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಸೇರಿಸುತ್ತದೆ; ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ನೀವು ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಎಂದರ್ಥ $('[data-bs-toggle="tooltip"]').tooltip(). ನಮ್ಮ ಇತರ ಘಟಕಗಳಿಗೂ ಅದೇ ಹೋಗುತ್ತದೆ.

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು

ಬಹುತೇಕ ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ HTML ಮೂಲಕ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು ಮತ್ತು ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯವನ್ನು ಬಳಸುವ ನಮ್ಮ ಆದ್ಯತೆಯ ವಿಧಾನ). ಒಂದೇ ಅಂಶದಲ್ಲಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಒಂದು ಸೆಟ್ ಅನ್ನು ಮಾತ್ರ ಬಳಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಉದಾಹರಣೆಗೆ, ನೀವು ಒಂದೇ ಬಟನ್‌ನಿಂದ ಟೂಲ್‌ಟಿಪ್ ಮತ್ತು ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.)

ಕಾರ್ಯಕ್ರಮಗಳು

ಹೆಚ್ಚಿನ ಪ್ಲಗಿನ್‌ಗಳ ವಿಶಿಷ್ಟ ಕ್ರಿಯೆಗಳಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯವಾಗಿ, ಇವುಗಳು ಇನ್ಫಿನಿಟಿವ್ ಮತ್ತು ಪಾಸ್ಟ್ ಪಾರ್ಟಿಸಿಪಲ್ ರೂಪದಲ್ಲಿ ಬರುತ್ತವೆ - ಅಲ್ಲಿ ಇನ್ಫಿನಿಟಿವ್ (ಉದಾ. show) ಈವೆಂಟ್‌ನ ಪ್ರಾರಂಭದಲ್ಲಿ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತದೆ ಮತ್ತು ಅದರ ಭೂತಕಾಲದ ರೂಪ (ಉದಾ. shown) ಕ್ರಿಯೆಯ ಪೂರ್ಣಗೊಂಡ ಮೇಲೆ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತದೆ.

ಎಲ್ಲಾ ಅನಂತ ಘಟನೆಗಳು preventDefault()ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಇದು ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ಕ್ರಿಯೆಯ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆಯನ್ನು ನಿಲ್ಲಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ನಿಂದ ತಪ್ಪು ಹಿಂತಿರುಗಿಸುವಿಕೆಯು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕರೆ ಮಾಡುತ್ತದೆ 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

ಎಲ್ಲಾ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ಗಳು ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳ ವಸ್ತು ಅಥವಾ ಯಾವುದನ್ನೂ ಸ್ವೀಕರಿಸುವುದಿಲ್ಲ (ಇದು ಅದರ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯೊಂದಿಗೆ ಪ್ಲಗಿನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ):

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

ನೀವು ನಿರ್ದಿಷ್ಟ ಪ್ಲಗಿನ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ಬಯಸಿದರೆ, ಪ್ರತಿ ಪ್ಲಗಿನ್ ಒಂದು getInstanceವಿಧಾನವನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಒಂದು ಅಂಶದಿಂದ ನೇರವಾಗಿ ಅದನ್ನು ಹಿಂಪಡೆಯಲು, ಇದನ್ನು ಮಾಡಿ: bootstrap.Popover.getInstance(myPopoverEl).

ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ಗಳಲ್ಲಿ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳು

ಪ್ಲಗಿನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ನೀವು DOM ಅಂಶದ ಬದಲಿಗೆ CSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಬಳಸಬಹುದು. querySelectorನಮ್ಮ ಪ್ಲಗಿನ್‌ಗಳು ಒಂದೇ ಅಂಶವನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುವುದರಿಂದ ಪ್ರಸ್ತುತ ಪ್ಲಗಿನ್‌ಗಾಗಿ ಅಂಶವು ವಿಧಾನದಿಂದ ಕಂಡುಬಂದಿದೆ .

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

ಅಸಮಕಾಲಿಕ ಕಾರ್ಯಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು

ಎಲ್ಲಾ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ನಂತರ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು ಕರೆ ಮಾಡುವವರಿಗೆ ಹಿಂತಿರುಗಿ .

ಪರಿವರ್ತನೆಯು ಪೂರ್ಣಗೊಂಡ ನಂತರ ಕ್ರಿಯೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು, ನೀವು ಅನುಗುಣವಾದ ಈವೆಂಟ್ ಅನ್ನು ಆಲಿಸಬಹುದು.

var myCollapseEl = document.getElementById('myCollapse')

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

ಹೆಚ್ಚುವರಿಯಾಗಿ ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .

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

ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳು

ಪ್ಲಗಿನ್‌ನ Constructor.Defaultವಸ್ತುವನ್ನು ಮಾರ್ಪಡಿಸುವ ಮೂಲಕ ನೀವು ಪ್ಲಗಿನ್‌ಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು:

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

ಯಾವುದೇ ಸಂಘರ್ಷವಿಲ್ಲ (ನೀವು jQuery ಬಳಸಿದರೆ ಮಾತ್ರ)

ಕೆಲವೊಮ್ಮೆ ಇತರ UI ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಬಳಸುವುದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೇಮ್‌ಸ್ಪೇಸ್ ಘರ್ಷಣೆಗಳು ಸಾಂದರ್ಭಿಕವಾಗಿ ಸಂಭವಿಸಬಹುದು. ಇದು ಸಂಭವಿಸಿದಲ್ಲಿ, ನೀವು .noConflictಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಲು ಬಯಸುವ ಪ್ಲಗಿನ್‌ಗೆ ನೀವು ಕರೆ ಮಾಡಬಹುದು.

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

ಆವೃತ್ತಿ ಸಂಖ್ಯೆಗಳು

VERSIONಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ರತಿಯೊಂದು ಪ್ಲಗಿನ್‌ಗಳ ಆವೃತ್ತಿಯನ್ನು ಪ್ಲಗಿನ್‌ನ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ನ ಆಸ್ತಿಯ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದು . ಉದಾಹರಣೆಗೆ, ಟೂಲ್‌ಟಿಪ್ ಪ್ಲಗಿನ್‌ಗಾಗಿ:

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

JavaScript ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದಾಗ ಯಾವುದೇ ವಿಶೇಷ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳಿಲ್ಲ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದಾಗ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ಲಗಿನ್‌ಗಳು ವಿಶೇಷವಾಗಿ ಆಕರ್ಷಕವಾಗಿ ಹಿಂತಿರುಗುವುದಿಲ್ಲ. ಈ ಸಂದರ್ಭದಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವದ ಬಗ್ಗೆ ನೀವು ಕಾಳಜಿವಹಿಸಿದರೆ, <noscript>ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಪರಿಸ್ಥಿತಿಯನ್ನು (ಮತ್ತು JavaScript ಅನ್ನು ಮರು-ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಹೇಗೆ) ವಿವರಿಸಲು ಬಳಸಿ, ಮತ್ತು/ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಸೇರಿಸಿ.

ಸ್ಯಾನಿಟೈಸರ್

ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪೋವರ್‌ಗಳು HTML ಅನ್ನು ಸ್ವೀಕರಿಸುವ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು ನಮ್ಮ ಅಂತರ್ನಿರ್ಮಿತ ಸ್ಯಾನಿಟೈಜರ್ ಅನ್ನು ಬಳಸುತ್ತವೆ.

ಡೀಫಾಲ್ಟ್ allowListಮೌಲ್ಯವು ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:

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

ಈ ಡೀಫಾಲ್ಟ್‌ಗೆ ನೀವು ಹೊಸ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಲು ಬಯಸಿದರೆ ನೀವು ಈ allowListಕೆಳಗಿನವುಗಳನ್ನು ಮಾಡಬಹುದು:

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)

ನೀವು ನಮ್ಮ ಸ್ಯಾನಿಟೈಜರ್ ಅನ್ನು ಬೈಪಾಸ್ ಮಾಡಲು ಬಯಸಿದರೆ ನೀವು ಮೀಸಲಾದ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಲು ಬಯಸುತ್ತೀರಿ, ಉದಾಹರಣೆಗೆ DOMPurify , ನೀವು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಮಾಡಬೇಕು:

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