Collapse এর অর্থ .... একটি বাটন থাকবে তার উপরে কেউ যখন ক্লিক করবে তখন নিচের দিক থেকে একটি পপ আপ দেখা যাবে । বিস্তারিত জানার জন্য নিচের Button গুলো তে ক্লিক করুন ।
Photo ক্লিক করুন
আশা করছি এই বাটনে ক্লিক করার পর বুজতে পেরেছেন collapse এর অর্থ কি বা কিভাবে কাজ করে ।
Collapse নিয়ে কাজ করার সময় মনে রাখতে হবে এর দুটি পার্ট আছে একটি বাটন ও অপরটি বডি বা পপ আপ ।
প্রথমে একটি বাটন তৈরি করবেন। এর পর এই বাটন এর ভিতরে অ্যাট্রিবিউট লিখবেন data-target=""। এর ভিতরে id এর নাম লিখতে হবে যেটি দ্বিতীয় পার্টে লেখা আছে । এর পর আর একটি অ্যাট্রিবিউট লিখবেন data-toggle="collapse" ।
এই পার্টে তৈরি হবে বডি বা পপ আপ যেটি ক্লিক করার সঙ্গে সঙ্গে নিচে দেখাযাছে । এর জন্য একটি <div> ট্যাগ লিখবেন । এই div ট্যাগ এর ভিতরে একটি id লিখবেন । এর পর একটি class লিখবেন ক্লাস এর নাম দেবেন Collapse । এর ফলে যখনি কেউ বাটনে ক্লিক করবে collapse ক্লাস এর দ্বারা নিচে থেকে পপ আপ টি খুলবে । এই <div> ট্যাগে আপনি যেকোন ডকুমেন্টস রাখতে পারেন যেটা আপনি দেখাতে চায়ছেন ।
নিচের প্রজেক্ট কোড টি কপি করে এডিটরে পেস্ট করুন ।
ক্লিক করুন
.btn .btn-outline-success - বাটন তৈরি করার জন্য এই দুটি ক্লাস ব্যবহার করা হয়েছে ।বিস্তারিত জানতে এখানে ক্লিক করুন ।
data-toggle="collapse" - এই অ্যাট্রিবিউট ব্যবহার করা হয় যখন বাটনে কেউ ক্লিক করবে তখনি popup টি নিজে থেকে খুলে যাবে । বাটন ট্যাগএর ভিতরে লিখতে হয় । ।বিস্তারিত জানতে এখানে ক্লিক করুন ।
data-target="#id" -এটি একটি অ্যাট্রিবিউট । দুটি পার্টকে যুক্ত করতে ব্যবহার করা হয়েছে । এখানে id এর নাম লিখতে হবে । বিস্তারিত জানতে এখানে ক্লিক করুন ।
.collapse -এটি একটি ক্লাস । এটি <div> ট্যাগের ভিতরে লেখা হয় । div টি ও তার ভিতরে সমস্ত কনটেন্ট কে লুকিয়ে রাখতে ব্যবহার করা হয় । যখন কেউ ক্লিক করবে তখনি লুকিয়া থাকা কনটেন্ট গুলো দেখা যাবে।
| Name | Roll | Class |
|---|---|---|
| Rahul Mondal | 50 | vii |
| punit Manna | 68 | vii |
| Sunit jha | 55 | vii |
| khema Sarkar | 78 | vii |
.dropdown-toggle - বাটনে এই রকম আইকন নিয়ে আসার জন্য এই ক্লাসটি ব্যবহার করা হয় । বাটন ক্লাসএর ভিতরে লিখতে হয় ।