বুটস্ট্রাপ বেসিক কলাপ্সিবল
বড় কোনো কন্টেন্টকে লুকিয়ে রেখে টোগল করে দেখোনোর জন্য বুটস্ট্রাপ "কলাপ্স" ব্যবহার করা হয়। নিচের উদাহরণে একটি বেসিক কলাপ্সিবল তৈরি করা দেখানো হলোঃ
kt_satt_skill_example_id=1105
উদাহরণের ব্যাখ্যা
.collapse ক্লাসের মাধ্যমে একটি কলাপ্সিবল এলিমেন্টকে বুঝানো হয়েছে। বাটনে ক্লিক করার সাথে সাথে কন্টেন্ট টি দেখা যায় আর ক্লিক করলে তা চলে যায়।
কলাপ্সিবল কন্টেন্টকে নিয়ন্ত্রন(দেখানো/লুকানো) করার জন্য, < a > অথবা < button > এলিমেন্টের মধ্যে data-toggle="collapse" এট্রিবিউট যুক্ত করুন।
তারপর বাটন বা লিংকের সাথে কলাপ্সিবল কন্টেন্টকে (< div id="collapse" >) সংযুক্ত করার জন্য করার জন্য data-target="#idName" এট্রিবিউট যুক্ত করুন।
নোটঃ < a > এলিমেন্টে data-target এট্রিবিউটের পরিবর্তে href এট্রিবিউট ব্যবহার করা যায়ঃ
kt_satt_skill_example_id=1106
ডিফল্টভাবে, কলাপ্সিবল কন্টেন্ট লুকানো অবস্থায় থাকে। ডিফল্টভাবে কন্টেন্টকে প্রদর্শিত অবস্থায় রাখার জন্য .in ক্লাস যুক্ত করতে হবেঃ
kt_satt_skill_example_id=1107
কলাপ্সিবল প্যানেল
নিচের উদাহরণে কিভাবে কলাপ্সিবল প্যানেল তৈরি করা যায় তা দেখানো হলোঃ
kt_satt_skill_example_id=1108
কলাপ্সিবল লিষ্ট গ্রুপ
নিচের উদাহরণে লিস্ট গ্রুপ সহ একটি কলাপ্সিবল প্যানেল তৈরি করা দেখানো হলোঃ
kt_satt_skill_example_id=1109
একরডিওন
নোটঃ কলাপ্সিবল আইটেমটি প্রদর্শিত হওয়ার সাথে সাথে পেরেন্ট এলিমেন্টের অন্য সব কলাপ্সিবল এলিমেন্ট ক্লোজ করে দেওয়ার জন্য data-parent এট্রিবিউট ব্যবহার করতে হবে।
kt_satt_skill_example_id=1110
বুটস্ট্রাপ কলাপ্সের সম্পূর্ণ রেফারেন্স
বুটস্ট্রাপ কলাপ্স অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS কলাপ্স রেফারেন্স পেজে ভিজিট করুন।
Read more
