বুটস্ট্রাপ JS ট্যাব (tab.js)
একটি কন্টেন্টকে বিভিন্ন অংশে ভাগ করতে ট্যাব ব্যবহার করা হয় যেখানে প্রত্যেকটি অংশের যেকোন একটি অংশই একবারে দেখা যাবে।
বুটস্ট্রাপ ট্যাব সর্ম্পকিত টিউটরিয়ালের জন্য আমাদের বুটস্ট্রাপ ট্যাব/পিল টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ ট্যাব প্লাগইন ক্লাসসমূহ
| ক্লাস | বর্ণনা |
|---|---|
.nav nav-tabs | ন্যাভিগেশন ট্যাব তৈরী করে। |
.nav-justified | যখন স্ক্রীন 768px থেকে বড় থাকে,ন্যাভিগেশন ট্যাব/পিল কে তাদের পেরেন্টের দৈঘ্যের সমান রাখে। আর ছোট স্ক্রীনের ক্ষেত্রে, ন্যাভিগেশন ট্যাব গুলো stack আকারে থাকে। |
.tab-content | .tab-pane ক্লাস এবং data-toggle="tab" এট্রিবিউট একত্রে ট্যাবকে টোগলেবল করে। |
.tab-pane | .tab-content ক্লাস এবং data-toggle="tab" এট্রিবিউটের সাহায্যে একত্রে টোগলেবল করে। |
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
ট্যাবের মধ্যে data-toggle="tab" এট্রিবিউট যুক্ত করুন এবং প্রত্যেকটি ট্যাব আইটেমের মধ্যে ইউনিক আইডি সহ .tab-pane ক্লাস যুক্ত করুন তারপর পুরোটাকে .tab-content ক্লাসের আওতায় অন্তর্ভূক্ত করুন।
kt_satt_skill_example_id=1300
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়ালি সক্রিয় করার জন্যঃ
kt_satt_skill_example_id=1301
kt_satt_skill_example_id=1302
বুটস্ট্রাপ ট্যাব মেথড
ট্যাব মেথড নিচের টেবিলে দেখানো হলো।
| মেথড | বর্ণনা | উদাহরণ |
|---|---|---|
.tab("show") | ট্যাব প্রদর্শন করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ ট্যাব ইভেন্ট
ট্যাব ইভেন্ট নিম্নোক্ত টেবিল দেখানো হলো।
| ইভেন্ট | বর্ণনা | উদাহরণ |
|---|---|---|
show.bs.tab | যখন ট্যাব প্রদর্শন করা হয় তখন সম্পন্ন হয়। | উদাহরণ দেখুন |
shown.bs.tab | যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় হয় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। | উদাহরণ দেখুন |
hide.bs.tab | যখন ট্যাব হাইড করা হয় তখন ঘটে। | উদাহরণ দেখুন |
hidden.bs.tab | যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। | উদাহরণ দেখুন |
টিপসঃ একটিভ ট্যাব এবং পূর্ববর্তী একটিভ ট্যাব পেতে জেকুয়েরির event.target এবং event.relatedTarget ইভেন্ট গুলো ব্যবহার করুন।
Read more