জাভাস্ক্রিপ্ট
jQuery-এ নির্মিত আমাদের ঐচ্ছিক জাভাস্ক্রিপ্ট প্লাগইনগুলির সাহায্যে বুটস্ট্র্যাপকে প্রাণবন্ত করুন। প্রতিটি প্লাগইন, আমাদের ডেটা এবং প্রোগ্রাম্যাটিক API বিকল্পগুলি এবং আরও অনেক কিছু সম্পর্কে জানুন৷
প্লাগইনগুলি পৃথকভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপের ব্যক্তিগত ব্যবহার করে js/dist/*.js), বা সবগুলি একবারে ব্যবহার করে bootstrap.jsবা ছোট করা bootstrap.min.js(উভয়টি অন্তর্ভুক্ত করবেন না)।
আপনি যদি একটি বান্ডলার ব্যবহার করেন (ওয়েবপ্যাক, রোলআপ…), আপনি /js/dist/*.jsফাইলগুলি ব্যবহার করতে পারেন যা ইউএমডি প্রস্তুত।
কিছু প্লাগইন এবং CSS উপাদান অন্যান্য প্লাগইনের উপর নির্ভর করে। আপনি যদি পৃথকভাবে প্লাগইনগুলি অন্তর্ভুক্ত করেন, তাহলে ডক্সে এই নির্ভরতাগুলি পরীক্ষা করা নিশ্চিত করুন৷ এছাড়াও মনে রাখবেন যে সমস্ত প্লাগইন jQuery এর উপর নির্ভর করে ( এর মানে প্লাগইন ফাইলের আগে jQuery অন্তর্ভুক্ত করা আবশ্যক )। jQuery এর কোন সংস্করণগুলি সমর্থিত তা দেখতে আমাদের সাথে যোগাযোগ করুন৷package.json
আমাদের ড্রপডাউন, পপোভার এবং টুলটিপগুলিও Popper.js- এর উপর নির্ভর করে ।
প্রায় সব বুটস্ট্র্যাপ প্লাগইন শুধুমাত্র এইচটিএমএল-এর মাধ্যমে ডেটা অ্যাট্রিবিউট (জাভাস্ক্রিপ্ট কার্যকারিতা ব্যবহার করার আমাদের পছন্দের উপায়) দিয়ে সক্ষম এবং কনফিগার করা যেতে পারে। একটি একক উপাদানে শুধুমাত্র এক সেট ডেটা অ্যাট্রিবিউট ব্যবহার করতে ভুলবেন না (যেমন, আপনি একই বোতাম থেকে টুলটিপ এবং মডেল ট্রিগার করতে পারবেন না।)
যাইহোক, কিছু পরিস্থিতিতে এই কার্যকারিতা অক্ষম করা বাঞ্ছনীয় হতে পারে। ডেটা অ্যাট্রিবিউট এপিআই নিষ্ক্রিয় করতে, নথির নামস্থানে সমস্ত ইভেন্টকে এইভাবে আনবাইন্ড করুন data-api:
$(document).off('.data-api')বিকল্পভাবে, একটি নির্দিষ্ট প্লাগইনকে টার্গেট করতে, শুধু প্লাগইনের নামটি একটি নামস্থান হিসাবে অন্তর্ভুক্ত করুন এবং ডেটা-এপিআই নামস্থানের সাথে এইভাবে:
$(document).off('.alert.data-api')পালানো নির্বাচকরা
আপনি যদি বিশেষ নির্বাচক ব্যবহার করেন, উদাহরণস্বরূপ: collapse:Example, সেগুলি এড়িয়ে যেতে ভুলবেন না, কারণ সেগুলি jQuery এর মাধ্যমে পাস করা হবে৷
বুটস্ট্র্যাপ বেশিরভাগ প্লাগইনের অনন্য কর্মের জন্য কাস্টম ইভেন্ট প্রদান করে। সাধারণত, এগুলি একটি অসীম এবং অতীত কণা আকারে আসে - যেখানে showএকটি ইভেন্টের শুরুতে ইনফিনিটিভ (উদাহরণস্বরূপ ) shownট্রিগার করা হয় এবং একটি ক্রিয়া সম্পূর্ণ হওয়ার সময় এর অতীত কণা রূপ (উদাহরণস্বরূপ) ট্রিগার হয়।
সমস্ত অসীম ইভেন্ট preventDefault()কার্যকারিতা প্রদান করে। এটি শুরু হওয়ার আগে একটি ক্রিয়া সম্পাদন বন্ধ করার ক্ষমতা প্রদান করে। একটি ইভেন্ট হ্যান্ডলার থেকে মিথ্যা রিটার্ন করা স্বয়ংক্রিয়ভাবে কল করবে preventDefault()।
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.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 (e) {
// Action to execute once the collapsible area is expanded
})উপরন্তু একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে ।
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('#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আপনি প্লাগইনের অবজেক্ট পরিবর্তন করে একটি প্লাগইনের জন্য ডিফল্ট সেটিংস পরিবর্তন করতে পারেন :
$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to falseকখনও কখনও অন্যান্য UI ফ্রেমওয়ার্কের সাথে বুটস্ট্র্যাপ প্লাগইনগুলি ব্যবহার করা প্রয়োজন। এই পরিস্থিতিতে, নামস্থানের সংঘর্ষ মাঝে মাঝে ঘটতে পারে। যদি এটি ঘটে, আপনি .noConflictযে প্লাগইনটির মান ফিরিয়ে আনতে চান সেটিকে কল করতে পারেন।
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionalityবুটস্ট্র্যাপের jQuery প্লাগইনগুলির প্রতিটির সংস্করণ VERSIONপ্লাগইনের কনস্ট্রাক্টরের সম্পত্তির মাধ্যমে অ্যাক্সেস করা যেতে পারে। উদাহরণস্বরূপ, টুলটিপ প্লাগইনের জন্য:
$.fn.tooltip.Constructor.VERSION // => "4.1.3"বুটস্ট্র্যাপের প্লাগইনগুলি জাভাস্ক্রিপ্ট অক্ষম করা হলে বিশেষভাবে সুন্দরভাবে ফিরে আসে না। আপনি যদি এই ক্ষেত্রে ব্যবহারকারীর অভিজ্ঞতার বিষয়ে যত্নশীল হন, তাহলে আপনার ব্যবহারকারীদের <noscript>পরিস্থিতি (এবং কীভাবে জাভাস্ক্রিপ্ট পুনরায় সক্ষম করবেন) ব্যাখ্যা করতে এবং/অথবা আপনার নিজস্ব কাস্টম ফলব্যাক যোগ করুন।
তৃতীয় পক্ষের লাইব্রেরি
বুটস্ট্র্যাপ আনুষ্ঠানিকভাবে প্রোটোটাইপ বা jQuery UI এর মতো তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি সমর্থন করে না । ইভেন্ট এবং নেমস্পেস থাকা সত্ত্বেও .noConflict, সামঞ্জস্যপূর্ণ সমস্যা থাকতে পারে যা আপনাকে নিজেরাই ঠিক করতে হবে।
সমস্ত বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট ফাইল নির্ভর করে util.jsএবং এটি অন্যান্য জাভাস্ক্রিপ্ট ফাইলগুলির সাথে অন্তর্ভুক্ত করতে হবে। আপনি যদি কম্পাইল করা (বা মিনিফাইড) ব্যবহার করেন bootstrap.js, তাহলে এটিকে অন্তর্ভুক্ত করার দরকার নেই—এটি ইতিমধ্যেই আছে।
util.jsইউটিলিটি ফাংশন এবং ইভেন্টের জন্য একটি মৌলিক সাহায্যকারীর transitionEndপাশাপাশি একটি CSS ট্রানজিশন এমুলেটর অন্তর্ভুক্ত করে। এটি অন্যান্য প্লাগইন দ্বারা CSS ট্রানজিশন সমর্থন পরীক্ষা করতে এবং ঝুলন্ত ট্রানজিশন ধরার জন্য ব্যবহার করা হয়।