SATT ACADEMY

New to Satt Academy? Create an account


or
Log in with Google Account

Web Development - Bootstrap3 - বুটস্ট্রাপ৩ রেফারেন্স (Bootstrap3 Reference) | NCTB BOOK

বুটস্ট্রাপ 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 ইভেন্ট গুলো ব্যবহার করুন।

Content added By
Promotion