SNDP BAG 4 YOU
কম্পিউটার প্রোগ্রামিং শিখুন


বুটস্ট্র্যাপ Collapse

Collapse এর অর্থ .... একটি বাটন থাকবে তার উপরে কেউ যখন ক্লিক করবে তখন নিচের দিক থেকে একটি পপ আপ দেখা যাবে । বিস্তারিত জানার জন্য নিচের Button গুলো তে ক্লিক করুন ।

Photo ক্লিক করুন
 bootstrap collapse image

আশা করছি এই বাটনে ক্লিক করার পর বুজতে পেরেছেন collapse এর অর্থ কি বা কিভাবে কাজ করে ।

Collapse নিয়ে কাজ করার সময় মনে রাখতে হবে এর দুটি পার্ট আছে একটি বাটন ও অপরটি বডি বা পপ আপ ।

প্রথম পার্ট :

প্রথমে একটি বাটন তৈরি করবেন। এর পর এই বাটন এর ভিতরে অ্যাট্রিবিউট লিখবেন data-target=""। এর ভিতরে id এর নাম লিখতে হবে যেটি দ্বিতীয় পার্টে লেখা আছে । এর পর আর একটি অ্যাট্রিবিউট লিখবেন data-toggle="collapse"

দ্বিতীয় পার্ট :

এই পার্টে তৈরি হবে বডি বা পপ আপ যেটি ক্লিক করার সঙ্গে সঙ্গে নিচে দেখাযাছে । এর জন্য একটি <div> ট্যাগ লিখবেন । এই div ট্যাগ এর ভিতরে একটি id লিখবেন । এর পর একটি class লিখবেন ক্লাস এর নাম দেবেন Collapse । এর ফলে যখনি কেউ বাটনে ক্লিক করবে collapse ক্লাস এর দ্বারা নিচে থেকে পপ আপ টি খুলবে । এই <div> ট্যাগে আপনি যেকোন ডকুমেন্টস রাখতে পারেন যেটা আপনি দেখাতে চায়ছেন ।

প্রোজেক্ট ও কোড :

নিচের প্রজেক্ট কোড টি কপি করে এডিটরে পেস্ট করুন ।

ক্লিক করুন
 bootstrap collapse image

.btn .btn-outline-success - বাটন তৈরি করার জন্য এই দুটি ক্লাস ব্যবহার করা হয়েছে ।বিস্তারিত জানতে এখানে ক্লিক করুন

data-toggle="collapse" - এই অ্যাট্রিবিউট ব্যবহার করা হয় যখন বাটনে কেউ ক্লিক করবে তখনি popup টি নিজে থেকে খুলে যাবে । বাটন ট্যাগএর ভিতরে লিখতে হয় । ।বিস্তারিত জানতে এখানে ক্লিক করুন

data-target="#id" -এটি একটি অ্যাট্রিবিউট । দুটি পার্টকে যুক্ত করতে ব্যবহার করা হয়েছে । এখানে id এর নাম লিখতে হবে । বিস্তারিত জানতে এখানে ক্লিক করুন

.collapse -এটি একটি ক্লাস । এটি <div> ট্যাগের ভিতরে লেখা হয় । div টি ও তার ভিতরে সমস্ত কনটেন্ট কে লুকিয়ে রাখতে ব্যবহার করা হয় । যখন কেউ ক্লিক করবে তখনি লুকিয়া থাকা কনটেন্ট গুলো দেখা যাবে।

প্রজেক্ট ও কোড :
Table
NameRollClass
Rahul Mondal50vii
punit Manna68vii
Sunit jha55vii
khema Sarkar78vii

.dropdown-toggle - বাটনে এই রকম আইকন নিয়ে আসার জন্য এই ক্লাসটি ব্যবহার করা হয় । বাটন ক্লাসএর ভিতরে লিখতে হয় ।