স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

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

আমাদের ঐচ্ছিক জাভাস্ক্রিপ্ট প্লাগইনগুলির সাথে বুটস্ট্র্যাপকে প্রাণবন্ত করে তুলুন৷ প্রতিটি প্লাগইন, আমাদের ডেটা এবং প্রোগ্রাম্যাটিক API বিকল্পগুলি এবং আরও অনেক কিছু সম্পর্কে জানুন৷

এই পৃষ্ঠায়

স্বতন্ত্র বা সংকলিত

প্লাগইনগুলি পৃথকভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপের ব্যক্তিগত ব্যবহার করে js/dist/*.js), বা সবগুলি একবারে ব্যবহার করে bootstrap.jsবা ছোট করা bootstrap.min.js(উভয়টি অন্তর্ভুক্ত করবেন না)।

আপনি যদি একটি বান্ডলার ব্যবহার করেন (ওয়েবপ্যাক, পার্সেল, ভিটে…), আপনি /js/dist/*.jsফাইলগুলি ব্যবহার করতে পারেন যা ইউএমডি প্রস্তুত।

জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সাথে ব্যবহার

যদিও বুটস্ট্র্যাপ সিএসএস যেকোন ফ্রেমওয়ার্কের সাথে ব্যবহার করা যেতে পারে, বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সাথে পুরোপুরি সামঞ্জস্যপূর্ণ নয় যেমন রিঅ্যাক্ট, ভিউ এবং অ্যাঙ্গুলার যা DOM সম্পর্কে সম্পূর্ণ জ্ঞান গ্রহণ করে। বুটস্ট্র্যাপ এবং ফ্রেমওয়ার্ক উভয়ই একই DOM উপাদানকে পরিবর্তন করার চেষ্টা করতে পারে, যার ফলে ড্রপডাউনের মতো বাগগুলি "ওপেন" অবস্থানে আটকে থাকে।

যারা এই ধরনের ফ্রেমওয়ার্ক ব্যবহার করেন তাদের জন্য একটি ভালো বিকল্প হল বুটস্ট্র্যাপ জাভাস্ক্রিপ্টের পরিবর্তে একটি ফ্রেমওয়ার্ক-নির্দিষ্ট প্যাকেজ ব্যবহার করা। এখানে সবচেয়ে জনপ্রিয় বিকল্প কিছু আছে:

একটি মডিউল হিসাবে বুটস্ট্র্যাপ ব্যবহার করে

এটি নিজে চেষ্টা করো! twbs/examples repository থেকে 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 ব্যবহার করার জন্য আপনাকে মডিউল নামের পরিবর্তে সম্পূর্ণ পাথ এবং ফাইলের নাম ব্যবহার করতে হবে। ব্রাউজারে জেএস মডিউল সম্পর্কে আরও পড়ুন। তাই আমরা উপরের '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 উপাদান অন্যান্য প্লাগইনের উপর নির্ভর করে। আপনি যদি পৃথকভাবে প্লাগইনগুলি অন্তর্ভুক্ত করেন, তাহলে ডক্সে এই নির্ভরতাগুলি পরীক্ষা করা নিশ্চিত করুন৷

আমাদের ড্রপডাউন, পপোভার, এবং টুলটিপগুলিও পপারের উপর নির্ভর করে ।

ডেটা বৈশিষ্ট্য

প্রায় সব বুটস্ট্র্যাপ প্লাগইন শুধুমাত্র এইচটিএমএল-এর মাধ্যমে ডেটা অ্যাট্রিবিউট (জাভাস্ক্রিপ্ট কার্যকারিতা ব্যবহার করার আমাদের পছন্দের উপায়) দিয়ে সক্ষম এবং কনফিগার করা যেতে পারে। একটি একক উপাদানে শুধুমাত্র এক সেট ডেটা অ্যাট্রিবিউট ব্যবহার করতে ভুলবেন না (যেমন, আপনি একই বোতাম থেকে টুলটিপ এবং মডেল ট্রিগার করতে পারবেন না।)

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

বুটস্ট্র্যাপ 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

ঘটনা

বুটস্ট্র্যাপ বেশিরভাগ প্লাগইনের অনন্য কর্মের জন্য কাস্টম ইভেন্ট প্রদান করে। সাধারণত, এগুলি একটি অসীম এবং অতীত কণা আকারে আসে - যেখানে showএকটি ইভেন্টের শুরুতে ইনফিনিটিভ (উদাহরণস্বরূপ ) shownট্রিগার করা হয় এবং একটি ক্রিয়া সম্পূর্ণ হওয়ার সময় এর অতীত কণা রূপ (উদাহরণস্বরূপ) ট্রিগার হয়।

সমস্ত অসীম ইভেন্ট preventDefault()কার্যকারিতা প্রদান করে। এটি শুরু হওয়ার আগে একটি ক্রিয়া সম্পাদন বন্ধ করার ক্ষমতা প্রদান করে। একটি ইভেন্ট হ্যান্ডলার থেকে মিথ্যা রিটার্ন করা স্বয়ংক্রিয়ভাবে কল করবে preventDefault()।

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

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

প্রোগ্রাম্যাটিক API

সমস্ত কনস্ট্রাক্টর একটি ঐচ্ছিক বিকল্প বস্তু বা কিছুই গ্রহণ করে (যা তার ডিফল্ট আচরণ সহ একটি প্লাগইন শুরু করে):

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 বুটস্ট্র্যাপের প্রতিটি প্লাগইনের সংস্করণ 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 ব্যবহার করে

বুটস্ট্র্যাপ 5 এ আপনার jQuery এর প্রয়োজন নেই , তবে jQuery এর সাথে আমাদের উপাদানগুলি ব্যবহার করা এখনও সম্ভব। যদি বুটস্ট্র্যাপ বস্তুর 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 ফ্রেমওয়ার্কের সাথে বুটস্ট্র্যাপ প্লাগইনগুলি ব্যবহার করা প্রয়োজন। এই পরিস্থিতিতে, নামস্থানের সংঘর্ষ মাঝে মাঝে ঘটতে পারে। যদি এটি ঘটে, আপনি .noConflictযে প্লাগইনটির মান ফিরিয়ে আনতে চান সেটিকে কল করতে পারেন।

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

বুটস্ট্র্যাপ আনুষ্ঠানিকভাবে প্রোটোটাইপ বা jQuery UI এর মতো তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি সমর্থন করে না। ইভেন্ট এবং নেমস্পেস থাকা সত্ত্বেও .noConflict, সামঞ্জস্যপূর্ণ সমস্যা থাকতে পারে যা আপনাকে নিজেরাই ঠিক করতে হবে।

jQuery ইভেন্ট

বুটস্ট্র্যাপ jQuery সনাক্ত করবে যদি অবজেক্টে jQueryউপস্থিত থাকে windowএবং কোন data-bs-no-jqueryঅ্যাট্রিবিউট সেট না থাকে <body>। jQuery পাওয়া গেলে, বুটস্ট্র্যাপ ইভেন্ট নির্গত করবে jQuery এর ইভেন্ট সিস্টেমের জন্য ধন্যবাদ। সুতরাং আপনি যদি বুটস্ট্র্যাপের ইভেন্টগুলি শুনতে চান তবে আপনাকে jQuery পদ্ধতিগুলি ( .on, .one) এর পরিবর্তে ব্যবহার করতে হবে addEventListener।

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

নিষ্ক্রিয় জাভাস্ক্রিপ্ট

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