বুটস্ট্র্যাপ ক্যারসল দিয়ে ট্যাব, বিরাট উপকারী।

সে অনেক অনেক দিন আগের কথা, যখন আমি নিয়মিত আমার সাইটে টিপস এন্ড ট্রিক্স শেয়ার করতাম।

 

ফ্রান্স এন্ড প্যারিস এন্ড ঘানা এন্ড উগান্ডা এন্ড অল! সময় পাই না তো, এই জন্য এই অবস্থা। আজকেও যে অনেক কিছু লিখবো তাও না। আজকে জাস্ট ডেমোটা শেয়ার করবো। তোমরা নিজ দায়িত্বে কোড বুইঝা নিবা। সহজ জিনিস, না বোঝার কিছু নাই। আর কিছু জিজ্ঞেস করতে চাইলে কমেন্ট সেকশান তো আছেই, ধুমায়া কমেন্ট করবা, আমি বুঝায় দেবো।

ওকে, মূল পয়েন্ট হইল- বুটস্ট্র্যাপের ক্যারসল দিয়ে আমরা ট্যাব বানাবো। প্রশ্ন হইল- কেন?

কেন এর উত্তর হইল এমনিই, বিশেষ কোন কারণ নাই। মনে করেন, যদি দরকার লাগে আর কি। মনে করা যাক অনেকগুলা ট্যাব, ডেস্কটপ ভিউতে ট্যাবের বাটনগুলা সব ঠিক থাকে, কিন্তু মোবাইল ভিউতে গেলে আউলায় যায়, আউলায় মানে বিরাট আউলায় যায়, উপ্রে নিচে, ডাইনে বামে, আর দেখতেও খারাপ লাগে, কারণ ট্যাব অনেকগুলা। তো এই জন্য ভাবলাম যে, ডেস্কটপ ভিউতে ট্যাবের বাটনগুলা থাকুক, আর ছোট ডিভাইসের জন্য বাটনগুলারে হাইড করে দিয়ে দুইটা নেক্সট-প্রিভিয়াস বাটন এড করা যায় কি না।

তো এইটা করতে গেলে বুটস্ট্র্যাপের ক্যারসল বেস্ট অপশন মনে হইল। ডেস্কটপ ভিউতে বুটস্ট্র্যাপের ক্যারসল এর যে ইন্ডিকেটরগুলা (carousel-indicators, pagination of Bootstrap carousel) আছে,  সেগুলারে কাস্টমাইজ করে ট্যাবের বাটনের মত করে ফেলবো, আর বুটস্ট্র্যাপের ক্যারসলের যে নেক্সট-প্রিভিয়াস বাটন আছে সেগুলারে ডেক্সটপ ভিউতে হাইড করে দেবো, আর ছোট ডিভাইসে গেলে ইন্ডিকেটরগুলা -যেগুলারে ট্যাবের বাটনের মত করছিলাম- সেগুলারে হাইড করবো আর নেক্সট-প্রিভিয়াস বাটন ভিযিবল করে দেবো, এই হইল কাহিনী।

 

তো, নিচে যে ডেমোটা দেবো, সেটাতে শুধু ডেস্কটপ ভিউতে ইন্ডিকেটরগুলারে ট্যাবের বাটনের মত বানানো হইছে, ছোট ডিভাইসের কাজগুলা করা হয় নাই। পোস্টখানা বুঝলে সেটা নিজেরাই করে নিতে পারবেন আশা করি। ভাল থাকেন। আল্লাহ হাফেজ।

মন্তব্য

মন্তব্য