ଜାଭାସ୍କ୍ରିପ୍ଟ |

ବ୍ୟକ୍ତିଗତ କିମ୍ବା ସଂକଳିତ |

ପ୍ଲଗଇନଗୁଡିକ ପୃଥକ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରେ (ବୁଟଷ୍ଟ୍ରାପ୍ ର ବ୍ୟକ୍ତିଗତ ବ୍ୟବହାର କରି 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 ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଛନ୍ତି କି? ଏହା ସମ୍ଭବ!

ବୁକଷ୍ଟ୍ରାପ୍ j 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

କ conflict ଣସି ବିବାଦ ନାହିଁ (କେବଳ ଯଦି ଆପଣ jQuery ବ୍ୟବହାର କରନ୍ତି)

ବେଳେବେଳେ ଅନ୍ୟ UI framework ାଞ୍ଚା ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବା ଆବଶ୍ୟକ | ଏହି ପରିସ୍ଥିତିରେ, ନାମପେସ୍ ଧକ୍କା ବେଳେବେଳେ ହୋଇପାରେ | .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"

ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ କ special ଣସି ବିଶେଷ ତ୍ରୁଟି ନାହିଁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ ବୁଟଷ୍ଟ୍ରାପର ପ୍ଲଗଇନଗୁଡ଼ିକ ବିଶେଷ ଭାବରେ ଅନୁଗ୍ରହରେ ଫେରି ନଥାଏ | ଯଦି ଆପଣ ଏହି କ୍ଷେତ୍ରରେ ଉପଭୋକ୍ତା ଅଭିଜ୍ଞତା ବିଷୟରେ ଚିନ୍ତା କରନ୍ତି, ତେବେ ଆପଣଙ୍କର ଉପଭୋକ୍ତାମାନଙ୍କୁ <noscript>ପରିସ୍ଥିତି (ଏବଂ କିପରି ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ପୁନ - ସକ୍ଷମ କରିବେ) ବୁ explain ାଇବାକୁ ବ୍ୟବହାର କରନ୍ତୁ, ଏବଂ / କିମ୍ବା ଆପଣଙ୍କର ନିଜସ୍ୱ କଷ୍ଟମ୍ ଫଲବ୍ୟାକ୍ ଯୋଡନ୍ତୁ |

ସାନିଟାଇଜର

ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର୍ସ ଆମର ବିଲ୍ଟ-ଇନ୍ ସାନିଟାଇଜର ବ୍ୟବହାର କରେ ଯାହା 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)
  }
})