জাভাস্ক্রিপ্ট

আমাৰ বৈকল্পিক জাভাস্ক্রিপ্ট প্লাগইনসমূহৰ সৈতে Bootstrap ক জীৱন্ত কৰি তোলক। প্ৰতিটো প্লাগইন, আমাৰ ডাটা আৰু প্ৰগ্ৰেমেটিক API বিকল্পসমূহ, আৰু অধিক সম্পৰ্কে শিকিব।

এই পৃষ্ঠাত

ব্যক্তিগত বা সংকলিত

প্লাগিনসমূহক পৃথকে পৃথকে অন্তৰ্ভুক্ত কৰিব পাৰি (Botstrap ৰ ব্যক্তিগত ব্যৱহাৰ কৰি js/dist/*.js), বা সকলো একেলগে ব্যৱহাৰ কৰি bootstrap.jsবা সৰু কৰা bootstrap.min.js(দুয়োটা অন্তৰ্ভুক্ত নকৰিব) ।

যদি আপুনি এটা বাণ্ডলাৰ ব্যৱহাৰ কৰে (ৱেবপেক, পাৰ্চেল, Vite...), আপুনি /js/dist/*.jsনথিপত্ৰসমূহ ব্যৱহাৰ কৰিব পাৰে যি UMD প্ৰস্তুত।

জাভাস্ক্রিপ্ট কাঠামোৰ সৈতে ব্যৱহাৰ

বুটষ্ট্ৰেপ CSS যিকোনো ফ্ৰেমৱৰ্কৰ সৈতে ব্যৱহাৰ কৰিব পাৰি যদিও, বুটষ্ট্ৰেপ জাভাস্ক্রিপ্ট React, Vue, আৰু Angular ৰ দৰে জাভাস্ক্রিপ্ট ফ্ৰেমৱৰ্কসমূহৰ সৈতে সম্পূৰ্ণৰূপে সুসংগত নহয় যি DOM ৰ সম্পূৰ্ণ জ্ঞান ধৰি লয় । বুটষ্ট্ৰেপ আৰু ফ্ৰেমৱৰ্ক দুয়োটাই একেটা DOM উপাদান পৰিবৰ্তন কৰাৰ চেষ্টা কৰিব পাৰে, যাৰ ফলত ড্ৰপডাউনৰ দৰে বাগ হয় যি “মুকলি” অৱস্থানত আবদ্ধ হৈ থাকে।

এই ধৰণৰ ফ্ৰেমৱৰ্কসমূহ ব্যৱহাৰ কৰাসকলৰ বাবে এটা উন্নত বিকল্প হৈছে বুটষ্ট্ৰেপ জাভাস্ক্রিপ্টৰ পৰিবৰ্তে এটা ফ্ৰেমৱৰ্ক-নিৰ্দিষ্ট সৰঞ্জাম ব্যৱহাৰ কৰা । ইয়াত কিছুমান জনপ্ৰিয় বিকল্পৰ বিষয়ে উল্লেখ কৰা হ’ল:

প্ৰতিক্ৰিয়া: প্ৰতিক্ৰিয়া বুটষ্ট্ৰেপ
Vue: BootstrapVue (বৰ্তমানে কেৱল Vue 2 আৰু Bootstrap 4 সমৰ্থন কৰে)
কৌণিক: ng-bootstrap

বুটষ্ট্ৰেপ এটা মডিউল হিচাপে ব্যৱহাৰ কৰা

নিজেই চেষ্টা কৰক! twbs/examples ভঁৰালৰ পৰা Bootstrap এটা ES মডিউল হিচাপে ব্যৱহাৰ কৰাৰ বাবে উৎস ক'ড আৰু কাৰ্য্যকৰী ডেমো ডাউনল'ড কৰক । আপুনি উদাহৰণটো StackBlitz ত খোলিব পাৰে ।

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>

JS বাণ্ডলাৰসমূহৰ সৈতে তুলনা কৰিলে, ব্ৰাউজাৰত ESM ব্যৱহাৰ কৰাৰ বাবে আপুনি মডিউলৰ নামৰ পৰিবৰ্তে সম্পূৰ্ণ পথ আৰু নথিপত্ৰনাম ব্যৱহাৰ কৰিব লাগিব। ব্ৰাউজাৰত JS মডিউলসমূহৰ বিষয়ে অধিক পঢ়ক। সেইবাবেই আমি ওপৰৰ '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পথসমূহ সম্পূৰ্ণ কৰিবলে ইচ্ছাকৃত মডিউলৰ নামসমূহ সমাধান কৰিবলে । যদি আপোনাৰ লক্ষ্য ব্ৰাউজাৰসমূহে সমৰ্থন নকৰে importmap, আপুনি es-module-shims প্ৰকল্প ব্যৱহাৰ কৰিব লাগিব। ইয়াত ই বুটষ্ট্ৰেপ আৰু পপাৰৰ বাবে কেনেকৈ কাম কৰে:

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

নিৰ্ভৰশীলতাসমূহ

কিছুমান প্লাগ-ইন আৰু CSS উপাদান অন্য প্লাগ-ইনৰ ওপৰত নিৰ্ভৰ কৰে। যদি আপুনি প্লাগ-ইনসমূহ পৃথকে পৃথকে অন্তৰ্ভুক্ত কৰে, নথিপত্ৰসমূহত এই নিৰ্ভৰশীলতাসমূহৰ বাবে পৰীক্ষা কৰাটো নিশ্চিত কৰক ।

আমাৰ ড্ৰপডাউন, popovers, আৰু টুলটিপসমূহো Popper ৰ ওপৰত নিৰ্ভৰ কৰে ।

তথ্য বৈশিষ্ট্যসমূহ

প্ৰায় সকলো বুটষ্ট্ৰেপ প্লাগইনক কেৱল HTML ৰ যোগেদি তথ্য বৈশিষ্ট্যসমূহৰ সৈতে সামৰ্থবান আৰু বিন্যাস কৰিব পাৰি (জাভাস্ক্রিপ্ট কাৰ্য্যকৰীতা ব্যৱহাৰ কৰাৰ আমাৰ পছন্দৰ উপায়)। এটা উপাদানত কেৱল এটা তথ্য বৈশিষ্ট্যৰ গোট ব্যৱহাৰ কৰাটো নিশ্চিত কৰক (যেনে, আপুনি একেটা বুটামৰ পৰা এটা সঁজুলিটিপ আৰু মডাল ট্ৰিগাৰ কৰিব নোৱাৰে।)

যিহেতু বিকল্পসমূহক তথ্য বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি, আপুনি এটা বিকল্পৰ নাম যোগ কৰিব পাৰে data-bs-, যেনে data-bs-animation="{value}". ডাটা বৈশিষ্ট্যসমূহৰ জৰিয়তে বিকল্পসমূহ পাছ কৰাৰ সময়ত বিকল্পৰ নামৰ কেছৰ ধৰণ “ camelCase ” ৰ পৰা “ kebab-case ” লৈ সলনি কৰাটো নিশ্চিত কৰক । উদাহৰণস্বৰূপে, data-bs-custom-class="beautifier"ৰ পৰিবৰ্তে ব্যৱহাৰ কৰক data-bs-customClass="beautifier"।

Bootstrap 5.2.0 ৰ পৰা, সকলো উপাদানে এটা পৰীক্ষামূলক সংৰক্ষিত তথ্য বৈশিষ্ট্য সমৰ্থন কৰে data-bs-configযি এটা JSON স্ট্ৰিং হিচাপে সৰল অংশ বিন্যাস ৰাখিব পাৰে । যেতিয়া এটা উপাদানৰ data-bs-config='{"delay":0, "title":123}'আৰু data-bs-title="456"বৈশিষ্ট্যসমূহ থাকে, চূড়ান্ত titleমান হ'ব 456আৰু পৃথক তথ্য বৈশিষ্ট্যসমূহে ত দিয়া মানসমূহ অভাৰৰাইড কৰিব data-bs-config। ইয়াৰ উপৰিও, বৰ্ত্তমানৰ তথ্য বৈশিষ্ট্যসমূহে JSON মানসমূহ ৰ দৰে ৰাখিবলৈ সক্ষম data-bs-delay='{"show":0,"hide":150}'।

নিৰ্বাচকসকল

আমি পৰিৱেশন কাৰণত DOM উপাদানসমূহ প্ৰশ্ন কৰিবলে স্থানীয় querySelectorআৰু পদ্ধতিসমূহ ব্যৱহাৰ কৰো, গতিকে আপুনি বৈধ নিৰ্বাচকসমূহ ব্যৱহাৰ কৰিব লাগিব । যদি আপুনি বিশেষ নিৰ্বাচক ব্যৱহাৰ কৰে যেনে , নিশ্চিতভাৱে সিহঁতৰ পৰা এৰাই চলিব।querySelectorAllcollapse:Example

ইভেন্টসমূহ

বুটষ্ট্ৰেপে বেছিভাগ প্লাগইনৰ অনন্য কাৰ্য্যসমূহৰ বাবে স্বনিৰ্বাচিত ইভেন্টসমূহ প্ৰদান কৰে। সাধাৰণতে, এইবোৰ এটা অব্যৱহৃত আৰু অতীত বিভক্তি ৰূপত আহে - য'ত অব্যয় (ex. show) এটা পৰিঘটনাৰ আৰম্ভণিতে ট্ৰিগাৰ হয়, আৰু ইয়াৰ অতীত বিভক্তি ৰূপ (ex. shown) এটা কাৰ্য্য সম্পূৰ্ণ হোৱাৰ লগে লগে ট্ৰিগাৰ হয়।

সকলো অসীম পৰিঘটনাই preventDefault()কাৰ্য্যক্ষমতা প্ৰদান কৰে। ই এটা কাৰ্য্য আৰম্ভ হোৱাৰ আগতে নিষ্পাদন বন্ধ কৰাৰ ক্ষমতা প্ৰদান কৰে। এটা ইভেন্ট হেণ্ডলাৰৰ পৰা false ঘূৰাই দিলেও স্বয়ংক্ৰিয়ভাৱে কল কৰিব 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এটা DOM উপাদানৰ সৈতে জড়িত উদাহৰণ পাবলৈ ব্যৱহাৰ কৰিব পাৰি, বা এটা নতুন সৃষ্টি কৰিব পাৰি যদি ইয়াক আৰম্ভ কৰা হোৱা নাছিল।

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

যদি এটা উদাহৰণ আৰম্ভ কৰা হোৱা নাছিল, ই এটা বৈকল্পিক বিন্যাস বস্তু দ্বিতীয় যুক্তি হিচাপে গ্ৰহণ আৰু ব্যৱহাৰ কৰিব পাৰে ।

কনষ্ট্ৰাক্টৰসমূহত CSS নিৰ্বাচকসমূহ

getInstanceআৰু পদ্ধতিসমূহৰ উপৰিও getOrCreateInstance, সকলো প্লাগইন নিৰ্মাতাই এটা DOM উপাদান বা এটা বৈধ CSS নিৰ্বাচকক প্ৰথম যুক্তি হিচাপে গ্ৰহণ কৰিব পাৰে। প্লাগইন উপাদানসমূহ 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')

এচিংক্ৰ'নাছ ফাংচন আৰু ট্ৰেঞ্জিচন

সকলো প্ৰগ্ৰেমেটিক API পদ্ধতি এচিনক্ৰ'নাছ আৰু এবাৰ পৰিবৰ্তন আৰম্ভ হোৱাৰ পিছত কলাৰলৈ উভতি যায়, কিন্তু ই শেষ হোৱাৰ আগতে । পৰিৱৰ্তন সম্পূৰ্ণ হোৱাৰ পিছত এটা কাৰ্য্য এক্সিকিউট কৰিবলৈ, আপুনি সংশ্লিষ্ট ইভেন্টটো শুনিব পাৰে।

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`	এটা মৌলৰ মডাল ধ্বংস কৰে। (DOM উপাদানত সংৰক্ষিত তথ্য আঁতৰায়)
`getInstance`	স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত মডাল উদাহৰণ পাবলৈ অনুমতি দিয়ে।
`getOrCreateInstance`	স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত মডাল উদাহৰণ পাবলৈ অনুমতি দিয়ে, বা এটা নতুন সৃষ্টি কৰক যদি ইয়াক আৰম্ভ কৰা হোৱা নাছিল।

ষ্টেটিক বৈশিষ্ট্য	বিৱৰণ
`NAME`	প্লাগইনৰ নাম ঘূৰাই দিয়ে। (উদাহৰণ: `bootstrap.Tooltip.NAME`)
`VERSION`	Bootstrap ৰ প্ৰতিটো প্লাগ-ইনৰ সংস্কৰণ প্লাগ- `VERSION`ইনৰ নিৰ্মাতাৰ বৈশিষ্ট্যৰ যোগেদি অভিগম কৰিব পাৰি (উদাহৰণ: `bootstrap.Tooltip.VERSION`)

চেনিটাইজাৰ

টুলটিপছ আৰু পপ'ভাৰে HTML গ্ৰহণ কৰা বিকল্পসমূহ চেনিটাইজ কৰিবলৈ আমাৰ বিল্ট-ইন চেনিটাইজাৰ ব্যৱহাৰ কৰে।

অবিকল্পিত 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)
  }
})

বৈকল্পিকভাৱে jQuery ব্যৱহাৰ কৰি

আপুনি Bootstrap 5 ত jQuery ৰ প্ৰয়োজন নাই , কিন্তু jQuery ৰ সৈতে আমাৰ উপাদানসমূহ ব্যৱহাৰ কৰাটো তথাপিও সম্ভৱ। যদি Bootstrap এ বস্তুটোত ধৰা পেলায় jQuery, windowই jQuery ৰ প্লাগইন চিস্টেমত আমাৰ সকলো উপাদান যোগ কৰিব। ইয়াৰ দ্বাৰা আপুনি নিম্নলিখিত কামবোৰ কৰিব পাৰে:

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

আমাৰ আন উপাদানসমূহৰ ক্ষেত্ৰতো একেই কথা।

কোনো সংঘাত নাই

কেতিয়াবা অন্য UI ফ্ৰেমৱৰ্কসমূহৰ সৈতে Bootstrap প্লাগইনসমূহ ব্যৱহাৰ কৰাটো প্ৰয়োজনীয়। এই পৰিস্থিতিত নামস্থানৰ সংঘৰ্ষ মাজে মাজে হ’ব পাৰে। যদি এনেকুৱা হয়, আপুনি .noConflictমান ঘূৰাই দিব বিচৰা প্লাগ-ইনক কল কৰিব পাৰে ।

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

বুটষ্ট্ৰেপে আনুষ্ঠানিকভাৱে তৃতীয়-পক্ষ জাভাস্ক্রিপ্ট লাইব্ৰেৰীসমূহ যেনে Prototype বা jQuery UI সমৰ্থন নকৰে । সত্ত্বেও .noConflictআৰু নামস্থান দিয়া ইভেন্টসমূহ, সুসংগততা সমস্যা থাকিব পাৰে যি আপুনি নিজাববীয়াকৈ সমাধান কৰিব লাগিব।

jQuery ইভেন্টসমূহ

বুটষ্ট্ৰেপে jQuery ধৰা পেলাব যদি বস্তুত jQueryউপস্থিত থাকে windowআৰু ত কোনো data-bs-no-jqueryবৈশিষ্ট্য সংহতি কৰা হোৱা নাই <body>। যদি jQuery পোৱা যায়, Bootstrap এ jQuery ৰ ইভেন্ট চিস্টেমৰ বাবে ধন্যবাদ ইভেন্টসমূহ নিৰ্গত কৰিব। গতিকে যদি আপুনি Bootstrap ৰ ইভেন্টসমূহ শুনিব বিচাৰে, আপুনি ৰ পৰিবৰ্তে jQuery পদ্ধতিসমূহ ( .on, ) ব্যৱহাৰ কৰিব লাগিব ।.oneaddEventListener

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

জাভাস্ক্রিপ্ট নিষ্ক্ৰিয় কৰা হৈছে

বুটষ্ট্ৰেপৰ প্লাগইনসমূহৰ কোনো বিশেষ ফ'লবেক নাই যেতিয়া জাভাস্ক্রিপ্ট নিষ্ক্ৰিয় কৰা হয় । যদি আপুনি এই ক্ষেত্ৰত ব্যৱহাৰকাৰী অভিজ্ঞতাৰ প্ৰতি গুৰুত্ব দিয়ে, আপোনাৰ ব্যৱহাৰকাৰীসকলক <noscript>পৰিস্থিতি (আৰু জাভাস্ক্রিপ্ট কেনেকৈ পুনৰায় সামৰ্থবান কৰিব লাগে) ব্যাখ্যা কৰিবলে ব্যৱহাৰ কৰক, আৰু/বা আপোনাৰ নিজৰ স্বনিৰ্বাচিত ফ'লবেকসমূহ যোগ কৰক।