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

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

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

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

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

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

কিছুমান প্লাগ-ইন আৰু CSS উপাদান অন্য প্লাগ-ইনৰ ওপৰত নিৰ্ভৰ কৰে। যদি আপুনি প্লাগ-ইনসমূহ পৃথকে পৃথকে অন্তৰ্ভুক্ত কৰে, নথিপত্ৰসমূহত এই নিৰ্ভৰশীলতাসমূহৰ বাবে পৰীক্ষা কৰাটো নিশ্চিত কৰক । লগতে মন কৰিব যে সকলো প্লাগ-ইন jQuery ৰ ওপৰত নিৰ্ভৰ কৰে (ইয়াৰ অৰ্থ হৈছে jQuery প্লাগইন নথিপত্ৰসমূহৰ আগতে অন্তৰ্ভুক্ত কৰিব লাগিব )। jQuery ৰ কোনবোৰ সংস্কৰণ সমৰ্থিত চাবলৈ আমাৰ পৰামৰ্শ লওক ।package.json

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

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

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

কিন্তু কিছুমান পৰিস্থিতিত এই কাৰ্য্যকৰীতা নিষ্ক্ৰিয় কৰাটো বাঞ্ছনীয় হ'ব পাৰে। ডাটা বৈশিষ্ট্য API নিষ্ক্ৰিয় কৰিবলে, দস্তাবেজৰ নামস্থানত সকলো ইভেন্ট আনবাইণ্ড কৰক data-api:

$(document).off('.data-api')

বৈকল্পিকভাৱে, এটা নিৰ্দিষ্ট প্লাগইনক লক্ষ্য কৰিবলে, মাত্ৰ প্লাগইনৰ নাম এটা নামস্থান হিচাপে ডাটা-এপিই নামস্থানৰ সৈতে এনেদৰে অন্তৰ্ভুক্ত কৰক:

$(document).off('.alert.data-api')

ইভেন্টসমূহ

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

সকলো অসীম পৰিঘটনাই preventDefault()কাৰ্য্যক্ষমতা প্ৰদান কৰে। ই এটা কাৰ্য্য আৰম্ভ হোৱাৰ আগতে নিষ্পাদন বন্ধ কৰাৰ ক্ষমতা প্ৰদান কৰে। এটা ইভেন্ট হেণ্ডলাৰৰ পৰা false ঘূৰাই দিলেও স্বয়ংক্ৰিয়ভাৱে কল কৰিব preventDefault()।

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

প্ৰগ্ৰেমেটিক এপিআই

আমি এইটোও বিশ্বাস কৰোঁ যে আপুনি সকলো বুটষ্ট্ৰেপ প্লাগ-ইনসমূহ কেৱল জাভাস্ক্রিপ্ট API ৰ যোগেদি ব্যৱহাৰ কৰিব পাৰিব লাগে। সকলো ৰাজহুৱা API একক, শৃংখলাবদ্ধ পদ্ধতি, আৰু কাৰ্য্য কৰা সংগ্ৰহ ঘূৰাই দিয়ে।

$('.btn.danger').button('toggle').addClass('fat')

সকলো পদ্ধতিয়ে এটা বৈকল্পিক বিকল্প বস্তু, এটা স্ট্ৰিং যি এটা নিৰ্দিষ্ট পদ্ধতিক লক্ষ্য কৰে, বা একোৱেই গ্ৰহণ নকৰে (যি অবিকল্পিত আচৰণৰ সৈতে এটা প্লাগ-ইন আৰম্ভ কৰে):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

প্ৰতিটো প্লাগ-ইনে ইয়াৰ কেঁচা নিৰ্মাতাকো এটা Constructorবৈশিষ্ট্যত উন্মোচন কৰে: $.fn.popover.Constructor. যদি আপুনি এটা নিৰ্দিষ্ট প্লাগ-ইন উদাহৰণ পাব বিচাৰে, ইয়াক এটা উপাদানৰ পৰা পোনপটীয়াকৈ উদ্ধাৰ কৰক: $('[rel="popover"]').data('popover')।

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

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

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

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

ইয়াৰ উপৰিও এটা পৰিৱৰ্তনশীল উপাদানত এটা পদ্ধতি কল আওকাণ কৰা হ'ব ।

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('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
$.fn.modal.Constructor.Default.keyboard = false

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

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

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

সংস্কৰণ নম্বৰ

Bootstrap ৰ প্ৰতিটো jQuery প্লাগইনৰ সংস্কৰণ প্লাগইনৰ VERSIONনিৰ্মাতাৰ বৈশিষ্ট্যৰ যোগেদি অভিগম কৰিব পাৰি । উদাহৰণস্বৰূপ, সঁজুলিটিপ প্লাগইনৰ বাবে:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

জাভাস্ক্রিপ্ট নিষ্ক্ৰিয় কৰাৰ সময়ত কোনো বিশেষ ফ'লবেক নহয়

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

Util

সকলো Bootstrap ৰ JavaScript নথিপত্ৰসমূহৰ ওপৰত নিৰ্ভৰ কৰে util.jsআৰু ইয়াক অন্য JavaScript নথিপত্ৰসমূহৰ সৈতে অন্তৰ্ভুক্ত কৰিব লাগিব । যদি আপুনি কম্পাইল কৰা (বা সৰু কৰা) ব্যৱহাৰ কৰিছে bootstrap.js, ইয়াক অন্তৰ্ভুক্ত কৰাৰ প্ৰয়োজন নাই—ই ইতিমধ্যে আছে।

util.jsসঁজুলি ফলনসমূহ আৰু transitionEndইভেন্টসমূহৰ বাবে এটা মূল সহায়ক লগতে এটা CSS পৰিবৰ্তন ইমুলেটৰ অন্তৰ্ভুক্ত কৰে। ইয়াক অন্য প্লাগইনসমূহে CSS পৰিৱৰ্তন সমৰ্থনৰ বাবে পৰীক্ষা কৰিবলে আৰু হেংগিং পৰিবৰ্তনসমূহ ধৰিবলে ব্যৱহাৰ কৰে।

চেনিটাইজাৰ

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

অবিকল্পিত whiteListমান নিম্নলিখিত:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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: []
}

যদি আপুনি এই অবিকল্পিতত নতুন মান যোগ কৰিব বিচাৰে whiteListআপুনি নিম্নলিখিত কৰিব পাৰে:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

যদি আপুনি আমাৰ চেনিটাইজাৰ বাইপাছ কৰিব বিচাৰে কাৰণ আপুনি এটা নিৰ্দিষ্ট লাইব্ৰেৰী ব্যৱহাৰ কৰিব বিচাৰে, যেনে DOMPurify , আপুনি নিম্নলিখিত কৰিব লাগে:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})