ଜାଭାସ୍କ୍ରିପ୍ଟ |
ଆମର ବ Java କଳ୍ପିକ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଣ | ପ୍ରତ୍ୟେକ ପ୍ଲଗଇନ୍, ଆମର ତଥ୍ୟ ଏବଂ ପ୍ରୋଗ୍ରାମେଟିକ୍ API ବିକଳ୍ପ, ଏବଂ ଅଧିକ ବିଷୟରେ ଶିଖନ୍ତୁ |
ବ୍ୟକ୍ତିଗତ କିମ୍ବା ସଂକଳିତ |
ପ୍ଲଗଇନଗୁଡିକ ପୃଥକ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରେ (ବୁଟଷ୍ଟ୍ରାପ୍ ର ବ୍ୟକ୍ତିଗତ ବ୍ୟବହାର କରି js/dist/*.js
), କିମ୍ବା ଏକାଥରେ ବ୍ୟବହାର bootstrap.js
କିମ୍ବା ମାଇନିଫାଏଡ୍ bootstrap.min.js
(ଉଭୟ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ ନାହିଁ) |
ଯଦି ଆପଣ ଏକ ବଣ୍ଡଲର୍ (ୱେବପ୍ୟାକ୍, ରୋଲଅପ୍…) ବ୍ୟବହାର କରନ୍ତି, ତେବେ ଆପଣ /js/dist/*.js
UMD ପ୍ରସ୍ତୁତ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରିପାରିବେ |
ଏକ ମଡ୍ୟୁଲ୍ ଭାବରେ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରିବା |
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>
ଅସଙ୍ଗତ ପ୍ଲଗଇନ୍ |
<script>
ବ୍ରାଉଜର୍ ସୀମାବଦ୍ଧତା ହେତୁ, ଆମର କିଛି ପ୍ଲଗଇନ୍ ଯଥା ଡ୍ରପଡାଉନ୍, ଟୁଲ୍ଟିପ୍ ଏବଂ ପପୋଭର ପ୍ଲଗଇନ୍, ଟାଇପ୍ ସହିତ ଟ୍ୟାଗରେ ବ୍ୟବହାର କରାଯାଇପାରିବ ନାହିଁ module
କାରଣ ସେମାନେ ପପର୍ ଉପରେ ନିର୍ଭର କରନ୍ତି | ସମସ୍ୟା ବିଷୟରେ ଅଧିକ ସୂଚନା ପାଇଁ ଏଠାରେ ଦେଖନ୍ତୁ |
ନିର୍ଭରଶୀଳତା |
କିଛି ପ୍ଲଗଇନ୍ ଏବଂ CSS ଉପାଦାନ ଅନ୍ୟ ପ୍ଲଗଇନ୍ ଉପରେ ନିର୍ଭର କରେ | ଯଦି ଆପଣ ପୃଥକ ଭାବରେ ପ୍ଲଗଇନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତି, ଡକସ୍ ରେ ଏହି ନିର୍ଭରଶୀଳତା ଯାଞ୍ଚ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ |
ଆମର ଡ୍ରପ୍ ଡାଉନ୍, ପପୋଭର ଏବଂ ଟୁଲ୍ ଟିପ୍ସ ମଧ୍ୟ ପପର୍ ଉପରେ ନିର୍ଭର କରେ |
ତଥାପି jQuery ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଛନ୍ତି କି? ଏହା ସମ୍ଭବ!
ବୁକଷ୍ଟ୍ରାପ୍ j jQuery ବିନା ବ୍ୟବହାର କରିବାକୁ ଡିଜାଇନ୍ ହୋଇଛି, କିନ୍ତୁ jQuery ସହିତ ଆମର ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରିବା ଏପର୍ଯ୍ୟନ୍ତ ସମ୍ଭବ | ଯଦି ବୁଟଷ୍ଟ୍ରାପ୍ ବସ୍ତୁରେ ଚିହ୍ନଟ jQuery
କରେwindow
ଏହା jQuery ର ପ୍ଲଗଇନ୍ ସିଷ୍ଟମରେ ଆମର ସମସ୍ତ ଉପାଦାନ ଯୋଗ କରିବ | ଏହାର ଅର୍ଥ ଆପଣ $('[data-bs-toggle="tooltip"]').tooltip()
ଟୁଲ୍ ଟିପ୍ସ ସକ୍ଷମ କରିବାକୁ ସକ୍ଷମ ହେବେ | ଆମର ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ମଧ୍ୟ ସମାନ |
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍
ପ୍ରାୟ ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ଗୁଡିକ କେବଳ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ HTML ମାଧ୍ୟମରେ ସକ୍ଷମ ଏବଂ ବିନ୍ୟାସ କରାଯାଇପାରିବ (ଜାଭାସ୍କ୍ରିପ୍ଟ କାର୍ଯ୍ୟକାରିତା ବ୍ୟବହାର କରିବାର ଆମର ପସନ୍ଦିତ ଉପାୟ) | ଗୋଟିଏ ଉପାଦାନରେ କେବଳ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ର ଏକ ସେଟ୍ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ (ଉଦାହରଣ ସ୍ୱରୂପ, ଆପଣ ସମାନ ବଟନ୍ ରୁ ଏକ ଟୁଲ୍ ଟିପ୍ ଏବଂ ମୋଡାଲ୍ ଟ୍ରିଗର କରିପାରିବେ ନାହିଁ |)
ଚୟନକର୍ତ୍ତା |
ସମ୍ପ୍ରତି DOM ଉପାଦାନଗୁଡିକୁ ପ୍ରଶ୍ନ କରିବା ପାଇଁ ଆମେ ଦେଶୀ ପଦ୍ଧତି querySelector
ଏବଂ querySelectorAll
କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ବ୍ୟବହାର କରୁ, ତେଣୁ ଆପଣଙ୍କୁ ବ valid ଧ ଚୟନକର୍ତ୍ତା ବ୍ୟବହାର କରିବାକୁ ପଡିବ | ଯଦି ଆପଣ ସ୍ୱତନ୍ତ୍ର ଚୟନକର୍ତ୍ତା ବ୍ୟବହାର କରନ୍ତି, ଉଦାହରଣ ସ୍ୱରୂପ: collapse:Example
ସେଗୁଡିକରୁ ରକ୍ଷା ପାଇବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
ଘଟଣା
ଅଧିକାଂଶ ପ୍ଲଗଇନ୍ ର ଅନନ୍ୟ କାର୍ଯ୍ୟ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କଷ୍ଟମ୍ ଇଭେଣ୍ଟ ପ୍ରଦାନ କରେ | ସାଧାରଣତ ,, ଏଗୁଡିକ ଏକ ଅସୀମ ଏବଂ ଅତୀତର ଅଂଶଗ୍ରହଣ ଫର୍ମରେ ଆସିଥାଏ - ଯେଉଁଠାରେ 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
}
})
jQuery ଘଟଣା |
jQuery
ଯଦି ବସ୍ତୁରେ ଉପସ୍ଥିତ ଥାଏ window
ଏବଂ କ attrib ଣସି data-bs-no-jquery
ଆଟ୍ରିବ୍ୟୁଟ୍ ସେଟ୍ ହୋଇନଥାଏ ତେବେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ jQuery ଚିହ୍ନଟ କରିବ <body>
| ଯଦି jQuery ମିଳିବ, ବୁଟଷ୍ଟ୍ରାପ୍ jQuery ର ଇଭେଣ୍ଟ ସିଷ୍ଟମ ଯୋଗୁଁ ଇଭେଣ୍ଟଗୁଡିକ ନିର୍ଗତ କରିବ | ତେଣୁ ଯଦି ଆପଣ ବୁଟଷ୍ଟ୍ରାପର ଇଭେଣ୍ଟଗୁଡିକ ଶୁଣିବାକୁ ଚାହାଁନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ଏହା ବଦଳରେ jQuery ପଦ୍ଧତି ( .on
, .one
) ବ୍ୟବହାର କରିବାକୁ ପଡିବ addEventListener
|
$('#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.0.2"
ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ କ special ଣସି ବିଶେଷ ତ୍ରୁଟି ନାହିଁ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ ବୁଟଷ୍ଟ୍ରାପର ପ୍ଲଗଇନଗୁଡ଼ିକ ବିଶେଷ ଭାବରେ ଅନୁଗ୍ରହରେ ଫେରି ନଥାଏ | ଯଦି ଆପଣ ଏହି କ୍ଷେତ୍ରରେ ଉପଭୋକ୍ତା ଅଭିଜ୍ଞତା ବିଷୟରେ ଚିନ୍ତା କରନ୍ତି, ତେବେ ଆପଣଙ୍କର ଉପଭୋକ୍ତାମାନଙ୍କୁ <noscript>
ପରିସ୍ଥିତି (ଏବଂ କିପରି ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ପୁନ - ସକ୍ଷମ କରିବେ) ବୁ explain ାଇବାକୁ ବ୍ୟବହାର କରନ୍ତୁ, ଏବଂ / କିମ୍ବା ଆପଣଙ୍କର ନିଜସ୍ୱ କଷ୍ଟମ୍ ଫଲବ୍ୟାକ୍ ଯୋଡନ୍ତୁ |
ତୃତୀୟ-ପକ୍ଷ ଲାଇବ୍ରେରୀଗୁଡ଼ିକ |
ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରୋଟୋଟାଇପ୍ କିମ୍ବା jQuery UI ପରି ତୃତୀୟ-ପକ୍ଷ ଜାଭାସ୍କ୍ରିପ୍ଟ ଲାଇବ୍ରେରୀଗୁଡ଼ିକୁ ଆନୁଷ୍ଠାନିକ ଭାବରେ ସମର୍ଥନ କରେନାହିଁ | ଇଭେଣ୍ଟସମୂହ .noConflict
ଏବଂ ନାମ ସ୍ଥାନିତ ଇଭେଣ୍ଟଗୁଡିକ ସତ୍ତ୍, େ, ସୁସଙ୍ଗତତା ସମସ୍ୟା ହୋଇପାରେ ଯାହାକୁ ଆପଣ ନିଜେ ଠିକ୍ କରିବାକୁ ଆବଶ୍ୟକ କରନ୍ତି |
ସାନିଟାଇଜର
ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର୍ସ ଆମର ବିଲ୍ଟ-ଇନ୍ ସାନିଟାଇଜର୍ ବ୍ୟବହାର କରେ ଯାହା 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)
}
})