বুটস্ট্রাপ মোডাল প্লাগ-ইন

বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো ডায়ালগ বক্স/পপ-আপ উইন্ডো যা বর্তমান পেজের উপরে প্রদর্শিত হয়ঃ

 ওপেন করতে মডাল এ ক্লিক করুন 

কিভাবে মোডাল তৈরি করবেন?

কিভাবে একটি বেসিক মোডাল তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=1167

উদাহরণের ব্যাখ্যা

"ট্রিগার" পার্টঃ

মোডাল উইন্ডোকে ট্রিগার করার জন্য, আপনাকে অবশ্যই একটি বাটন বা লিংক ব্যবহার করতে হবে।

তারপর বাটন বা লিংকের মধ্যে নিম্নলিখিত দুটি data-* এট্রিবিউট অন্তর্ভুক্ত করুনঃ

• data-toggle="modal" এটি মোডাল উইন্ডো ওপেন করে
• data-target="#myModal" এটির মাধ্যমে মোডালের আইডিকে লক্ষ্য করা হয়

"মোডাল" পার্টঃ

মোডালের পেরেন্ট < div > এ অবশ্যই একটি আইডি থাকতে হবে এবং এর ভ্যালু অবশ্যই data-target এট্রিবিউটের মতো হবে, যেটি মোডালকে ট্রিগার করার জন্য ব্যবহার করা হয় ("myModal")।

.modal ক্লাস < div > এলিমেন্টের কন্টেন্টকে মোডাল হিসেবে আইডেন্টিফাই করে এবং এর মধ্যে ফোকাস তৈরি করে।

.fade ক্লাসের মাধ্যমে মোডালে ট্রানজিশন এফেক্ট যুক্ত করা হয়েছে। আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।

role="dialog" এট্রিবিউটটি ব্যবহার করা হয় স্ক্রিন রিডারদের এক্সেসিবিলিটি ইম্প্রুভ করার জন্য।

.modal-dialog ক্লাসের মাধ্যমে মোডালের জন্য যথাযথ প্রস্থ এবং মার্জিন নিশ্চিত করা হয়।

"মোডাল কন্টেন্ট" পার্টঃ

class="modal-content" যুক্ত < div > এলিমেন্ট মোডালকে স্টাইল (border, background-color, etc.) করে। এই < div > এলিমেন্টের মধ্যেই মোডাল হেডার, মোডাল বডি এবং মোডাল ফুটার যুক্ত করতে হবে।

মোডালের হেডারকে স্টাইল করার জন্য .modal-header ক্লাস ব্যবহার করা হয়। হেডারের < button > এলিমেন্টের মধ্যে data-dismiss="modal" এট্রিবিউট থাকে যেটিতে ক্লিক করে মোডালটি ক্লোজ করা যায়। .close ক্লাসটি ক্লোজ বাটনকে স্টাইল করে এবং .modal-title ক্লাসটি মোডাল হেডারকে যথাযথ লাইন উচ্চতাসহকারে স্টাইল করে।

মোডালের বডিকে স্টাইল করার জন্য .modal-body ক্লাস ব্যবহার করা হয়। হেডারের মধ্যে আপনার প্রয়োজন মতো এইচটিএমএল মার্কআপ ট্যাগ ব্যবহার করতে পারেবেন। যেমন; প্যারাগ্রাফ, ইমেজ, ভিডিও ইত্যাদি।

মোডালের ফুটারকে স্টাইল করার জন্য .modal-footer ক্লাস ব্যবহার করা হয়। মনে রাখবেন এই অংশটি ডিফল্টভাবে ডানে এ্যালাইন অবস্থায় থাকে।

মোডালের আকার

ছোট আকারের মোডালের জন্য .modal-sm ক্লাস এবং বড় আকারের মোডালের জন্য .modal-lg ক্লাস ব্যবহার করুন।

মোডালের আকার নির্ধারণের জন্য সাইজ ক্লাস গুলো .modal-dialog ক্লাস যুক্ত  < div > এলিমেন্টের মধ্যে ব্যবহার করুনঃ

ছোট আকারঃ 

kt_satt_skill_example_id=1168

বড় আকারঃ 

kt_satt_skill_example_id=1169

বুটস্ট্রাপ টুলটিপ প্লাগ-ইন

বুটস্ট্রাপ টুলটিপ প্লাগ-ইন হলো ছোট পপ-আপ বক্স। যখন ইউজার কোন এলিমেন্টের উপর মাউস পয়েন্টার নিয়ে আসে তখন এটি প্রদর্শিত হয়ঃ

কিভাবে টুলটিপ তৈরি করবেন

1. যেই এলিমেন্টটিতে টুলটিপ তৈরি করতে চান, সেই এলিমেন্টের মধ্যে data-toggle="tooltip" এট্রিবিউটটি যুক্ত করুন।
2. টুলটিপ হিসেবে যেই টেক্সটি প্রদর্শন করতে চান সেটি title এট্রিবিউটের ভ্যালু হিসেবে যুক্ত করুনঃ

kt_satt_skill_example_id=1170

নোটঃ টুলটিপ অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর tooltip() মেথডটি কল করুন।

একটি ডকুমেন্টে অবস্থিত সকল টুলটিপকে সক্রিয় করার জন্য নিম্নলিখিত কোডটি ব্যবহার করুনঃ

kt_satt_skill_example_id=1172

টুলটিপের অবস্থান নির্ধারণ

ডিফল্টভাবে টুলটিপ সাধারনত এলিমেন্টের উপরে প্রদর্শিত হয়।

টুলটিপের অবস্থান উপর, নিচ, বামে অথবা ডানে যেকোনো স্থানেই নির্ধারণ করা যায়। টুলটিপের অবস্থান নির্ধারণ করার জন্য data-placement এট্রিবিউট ব্যবহার করুনঃ

kt_satt_skill_example_id=1174

বুটস্ট্রাপ পপ-ওভার প্লাগ-ইন

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

কিভাবে পপ-ওভার তৈরি করবেন

1. যেই এলিমেন্টটিতে পপ-ওভার তৈরি করতে চান, সেই এলিমেন্টটিতে data-toggle="popover" এট্রিবিউট ব্যবহার করুন।
2. পপ-ওভারের হেডার নির্ধারণ করার জন্য title এট্রিবিউট ব্যবহার করুন এবং পপ-ওভারের বডি নির্ধারণ করার জন্য data-content এট্রিবিউট ব্যবহার করুনঃ

kt_satt_skill_example_id=1182

নোটঃ পপ-ওভার অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর popover() মেথড কল করুন।

একটি ডকুমেন্টের সবকটি পপ-ওভারকে কল করে একসাথে একটিভ করার জন্য নিম্নলিখিত কোড ব্যবহার করুনঃ

kt_satt_skill_example_id=1184

পপ-ওভারের অবস্থান নির্ধারণ

ডিফল্টভাবে, পপ-ওভার সাধারণত ডান পাশে প্রদর্শিত হয়।

পপ-ওভারকে উপর, নিচ, বাম অথবা ডানে যোকোনো স্থানেই প্রদর্শন করানো যায়। পপ-ওভারের অবস্থান নির্দিষ্ট করার জন্য data-placement এট্রিবিউট ব্যবহার করুনঃ

kt_satt_skill_example_id=1187

পপ-ওভার ক্লোজ করা

ডিফল্টভাবে, আপনি যখন ঐ এলিমেন্টের উপর পূনরায় ক্লিক করবেন তখন পপ-ওভারটি ক্লোজ হয়ে যাবে। যাইহোক, আপনি যদি চান এলিমেন্টের বাহিরেও ক্লিক করলে পপ-ওভারটি ক্লোজ হয়ে যাক তাহলে data-trigger="focus" এট্রিবিউটটি ব্যবহার করুনঃ

kt_satt_skill_example_id=1189

টিপস: যদি আপনি এলিমেন্টের উপর মাউস হোভারের মাধ্যমে পপ-ওভার প্রদর্শন করতে চান তাহলে, data-trigger="hover" এট্রিবিউট ব্যবহার করুনঃ

kt_satt_skill_example_id=1190

বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন

বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টে স্বয়ংক্রিয়ভাবে আপডেট পাঠানোর জন্য ব্যবহার করা হয়।

কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করবেন

কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=1192

উদাহরণের ব্যাখ্যা

যেই এলিমেন্টটিকে স্ক্রলযোগ্য এরিয়া করতে চান ঐ এলিমেন্টটিতে data-spy="scroll" এট্রিবিউট যুক্ত করুন (এক্ষেত্রে সাধারণত < body > এলিমেন্টই ব্যবহার করা হয়)।

তারপর data-target এট্রিবিউট যুক্ত করুন যার ভ্যালু হবে ন্যাভিগেশন বারের আইডি বা ক্লাস (.navbar)। এর মাধ্যমে ন্যাভবারের সাথে স্ক্রলযোগ্য এরিয়ার লিংক করা হয়।

মনে রাখবেন অবশ্যই স্ক্রলযোগ্য এলিমেন্টের আইডির সাথে ন্যাভিগেশন লিংকের আইডির সাথে মিল হতে হবে (< div id="section1" > সাথে < a href="#section1" >) মিল থাকতে হবে।

data-offset এট্রিবিউটের মাধ্যমে এটা নির্দিষ্ট করা হয় যে কতো পিক্সেলের মধ্যে স্ক্রলিং একটিভ হবে। ডিফল্ট ভ্যালু হলো 10px।

উলম্ব(Vertical) স্ক্রলস্পাই মেনু

এই উদাহরণে মেনু হিসেবে আমরা বুটস্ট্রাপের vertical ন্যাভিগেশন পিল ব্যবহার করেছি।

kt_satt_skill_example_id=1193

বুটস্ট্রাপ এফিক্স প্লাগ-ইন

বুটস্ট্রাপ এফিক্স প্লাগ-ইনের মাধ্যমে একটি এলিমেন্টকে পেজের একটি জায়গায় আবদ্ধ করা যায়। এটি প্রায়ই ন্যাভিগেশন মেনু অথবা সামাজিক মাধ্যমের আইকন বাটনে ব্যবহার করা হয় যেন উপর-নিচ স্ক্রলিংয়ের সময়ে এগুলো একটি স্থানে গিয়ে অবদ্ধ বা থেমে যায়।

স্ক্রল পজিশনের উপর ভিত্তি করে প্লাগ-ইনটি এর আচরনকে on এবং off এ টোগল (সিএসএস position প্রোপার্টিকে static থেকে fixed) করে।

এফিক্সের মাধ্যমে যখন আমরা পেজ উপর-নিচ স্ক্রলিং করি, মেনুটি সবসময় দৃশ্যমান থাকে এবং এর অবস্থানে গিয়ে থেমে যায়।

কিভাবে একটি এফিক্স মেনুবার তৈরি করবেন

কিভাবে একটি horizontal এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:

kt_satt_skill_example_id=1198

কিভাবে একটি vertical এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:

kt_satt_skill_example_id=1199

উদাহরণের ব্যাখ্যা

যেই এলিমেন্টে আপনি এফিক্স করতে চান সেটিতে data-spy="affix" এট্রিবিউট যুক্ত করুন।

স্ক্রলের অবস্থান হিসেব করার জন্য data-offset-top|bottom এট্রিবিউট ব্যবহার করুন (অপশনাল) ।

এটি কিভাবে কাজ করে

এফিক্স প্লাগ-ইন তিনটি ক্লাসের মধ্যে টোগল তৈরি করে: .affix, .affix-top, এবং .affix-bottom । প্রত্যেকটি ক্লাসই নির্দিষ্ট স্টেটকে রিপ্রেজেন্ট করে। আসল অবস্থান মোকাবেলা করার জন্য আপনাকে অবশ্যই সিএসএস প্রোপার্টি ব্যবহার করতে হবে। শুধুমাত্র ব্যতিক্রম এক্ষেত্রেই, .affix ক্লাসে শুধুমাত্র position:fixed ব্যবহার করতে হবে।

• এই প্লাগ-ইনটি এলিমেন্টকে এর সর্বোচ্চ উপরে অথবা সর্বোচ্চ নিচে অবস্থান নির্ধারন করার জন্য .affix-top অথবা .affix-bottom ক্লাস যুক্ত করে নেয়। এক্ষেত্রে সিএসএসের মাধ্যমে অবস্থান নির্ধারন করার প্রয়োজন নেই।
• স্ক্রলিংয়ের পূর্বে এফিক্স এলিমেন্ট আসল এফিক্সকে ট্রিগার করবে - এটা হলো সেই জায়গা যেখানে প্লাগ-ইন .affix ক্লাসের (sets position:fixed) মাধ্যমে .affix-top অথবা .affix-bottom ক্লাসকে রিপ্লেস করে। পেজের কোন স্থানে এফিক্স এলিমেন্টটির স্থান হবে এটা অবশ্যই আপনাকে সিএসএসের top অথবা bottom প্রোপার্টির মাধ্যমে নির্ধারণ করে দিতে হবে।
• যদি নিম্ন অফসেট ডিফাইন করা হয়, এক্ষেত্রে .affix-bottom ক্লাসের মাধ্যমে .affix ক্লাস রিপ্লেস হবে। যেহেতু অফসেট হলো অপশনাল, প্রথম সেটিং এ যথাযথ সিএসএস ব্যবহার করতে হবে। এই ক্ষেত্রে, যখন প্রয়োজন হবে তখন position:absolute ব্যবহার করবে।

উপরের প্রথম উদাহরণে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করি তখন এফিক্স প্লাগ-ইন