বুটস্ট্রাপ JS ড্রপডাউন (dropdown.js)
ড্রপডাউন মেনু হলো টোগল মেনু, যা ইউজারকে পূর্বনির্ধারিত তালিকা থেকে একটি ভ্যালু বাছাই করার সুযোগ দেয়।
ড্রপডাউনের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ ড্রপডাউন টিউটোরিয়ালটি পড়ুন।
data-* এট্রিবিউট মাধ্যম
ড্রপডাউন মেনুকে টোগল করার জন্য বাটন অথবা লিংকে data-toggle="dropdown" এট্রিবিউটটি যুক্ত করুন।
kt_satt_skill_example_id=1292
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়েললি যুক্ত করার জন্যঃ
kt_satt_skill_example_id=1293
বুটস্ট্রাপ ড্রপডাউন মেথড
নিচের টেবিলে ড্রপডাউন মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.dropdown("toggle") | ড্রপডাউনকে টোগল করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ ড্রপডাউন ইভেন্ট
নিচের টেবিলে ড্রপডাউন ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | চেষ্টা করি |
|---|---|---|
show.bs.dropdown | যখন ড্রপডাউন প্রদর্শন শুরু হয় তখন ঘটে। | উদাহরণ দেখুন |
shown.bs.dropdown | যখন ড্রপডাউন পুরোপুরি প্রদর্শিত হয় তখন ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
hide.bs.dropdown | যখন ড্রপডাউন লুক্কায়িত হওয়া শুরু করে তখন ঘটে। | উদাহরণ দেখুন |
hidden.bs.dropdown | যখন ড্রপডাউন পুরোপুরি লুক্কায়িত হয় তখন ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
আরো কিছু উদাহরণ
ক্লিকে ক্যারেট আইকন পরিবর্তন
নিচের উদাহরণে দেখানো হয়েছে কিভাবে ড্রপডাউনে ক্লিক করা হলে ক্যারেট আইকনটি নিচের দিক থকে ওলট হয়ে উপরের দিকে চলে যায়ঃ
kt_satt_skill_example_id=1294
নিচের উদাহরণে, ন্যাভিগেসন বারে লগ-ইন ফর্ম সহ একটি ড্রপডাউন যুক্ত করা হয়েছেঃ
kt_satt_skill_example_id=1295
বুটস্ট্রাপ মাল্টি-লেভেল ড্রপডাউন
এই উদাহরণে, আমরা মাল্টি-লেভেল ড্র্পডাউন অপেন করার জন্য জেকুয়েরি ব্যবহার করেছিঃ
kt_satt_skill_example_id=1296
বুটস্ট্রাপ জেএস কলাপ্স (collapse.js)
এটি একরডিয়ন এবং ন্যাভিগেশন এর মতো কলাপ্সিবল কম্পোনেন্টের জন্য মূল স্টাইল এবং নমনীয় সাপোর্ট প্রদান করে।
প্লাগ-ইন ডিপেনডেন্সিঃ কলাপ্সের জন্য আপনার বুটস্ট্রাপ ভার্সনে ট্রানজিশন প্লাগ-ইন অন্তর্ভুক্ত করা প্রয়োজন হয়।
কলাপ্সিবলের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ কলাপ্সিবল টিউটোরিয়ালটি পড়ুন।
কলাপ্স প্লাগ-ইন ক্লাসসমূহ
| ক্লাস | বিবরণ | উদাহরণ |
|---|---|---|
.collapse | কন্টেন্টকে হাইড করে। | উদাহরণ দেখুন |
.collapse in | কন্টেন্টকে প্রদর্শন করে। | উদাহরণ দেখুন |
.collapsing | যখন ট্রানজিশন শুরু হয় তখন যুক্ত করে, এবং যখন শেষ করে তখন রিমোভ করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
একটি কলাপ্সিবল এলিমেন্টের নিয়ন্ত্রন স্বয়ংক্রিয়ভাবে অর্পন করার জন্য ঐ এলিমেন্টে শুধুমাত্র data-toggle="collapse" এবং data-target যুক্ত করুন। data-target এট্রিবিউটটি সিএসএস সিলেক্টরকে কলাপ্স প্রয়োগ করার জন্য গ্রহন করে। মনে রাখবেন যেন কলাপ্সিবল এলিমেন্টে কলাপ্স ক্লাস যুক্ত করা হয়। যদি আপনি ডিফল্টভাবে ওপেন রাখতে চান, তাহলে অতিরিক্ত ক্লাস .in যুক্ত করুন।
kt_satt_skill_example_id=1297
টিপসঃ কলাপ্সিবল কন্ট্রোলে গ্রুপ ম্যানেজমেন্টের মতো একরডিয়ন যুক্ত করতে data এট্রিবিউট data-parent="#selector" যুক্ত করুন।
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়েললি যুক্ত করার জন্যঃ
kt_satt_skill_example_id=1298
বুটস্ট্রাপ কলাপ্স মেথড
নিচের টেবিলে কলাপ্স মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.collapse("toggle") | কলাপ্সিবল এলিমেন্টকে টোগল করে। | উদাহরণ দেখুন |
.collapse("show") | কলাপ্সিবল এলিমেন্টকে প্রদর্শন করে। | উদাহরণ দেখুন |
.collapse("hide") | কলাপ্সিবল এলিমেন্টকে হাইড করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ কলাপ্স ইভেন্ট
নিচের টেবিলে কলাপ্স ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | উদাহরণ |
|---|---|---|
show.bs.collapse | কলাপ্সিবল এলিমেন্টটি প্রদর্শিত হওয়ার সময় ঘটে। | উদাহরণ দেখুন |
shown.bs.collapse | কলাপ্সিবল এলিমেন্টটি পুরোপুরি প্রদর্শিত হওয়ার পর ঘটে (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
hide.bs.collapse | কলাপ্সিবল এলিমেন্টটি হাইড হওয়ার ঘটে। | উদাহরণ দেখুন |
hidden.bs.collapse | কলাপ্সিবল এলিমেন্ট পুরোপুরি হাইড হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
আরো উদাহরণ
আইকন বা টেক্সটকে এক্সপান্ড এবং কলাপ্স
নিচের উদাহরণে যখন কলাপ্সিবল কন্টেন্টটি ওপেন এবং ক্লোজ হয় তখন বাটনের টেক্সট এবং আইকন পরিবর্তিত হয়ঃ
kt_satt_skill_example_id=1299
বুটস্ট্রাপ JS ট্যাব (tab.js)
একটি কন্টেন্টকে বিভিন্ন অংশে ভাগ করতে ট্যাব ব্যবহার করা হয় যেখানে প্রত্যেকটি অংশের যেকোন একটি অংশই একবারে দেখা যাবে।
বুটস্ট্রাপ ট্যাব সর্ম্পকিত টিউটরিয়ালের জন্য আমাদের বুটস্ট্রাপ ট্যাব/পিল টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ ট্যাব প্লাগইন ক্লাসসমূহ
| ক্লাস | বর্ণনা |
|---|---|
.nav nav-tabs | ন্যাভিগেশন ট্যাব তৈরী করে। |
.nav-justified | যখন স্ক্রীন 768px থেকে বড় থাকে,ন্যাভিগেশন ট্যাব/পিল কে তাদের পেরেন্টের দৈঘ্যের সমান রাখে। আর ছোট স্ক্রীনের ক্ষেত্রে, ন্যাভিগেশন ট্যাব গুলো stack আকারে থাকে। |
.tab-content | .tab-pane ক্লাস এবং data-toggle="tab" এট্রিবিউট একত্রে ট্যাবকে টোগলেবল করে। |
.tab-pane | .tab-content ক্লাস এবং data-toggle="tab" এট্রিবিউটের সাহায্যে একত্রে টোগলেবল করে। |
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
ট্যাবের মধ্যে data-toggle="tab" এট্রিবিউট যুক্ত করুন এবং প্রত্যেকটি ট্যাব আইটেমের মধ্যে ইউনিক আইডি সহ .tab-pane ক্লাস যুক্ত করুন তারপর পুরোটাকে .tab-content ক্লাসের আওতায় অন্তর্ভূক্ত করুন।
kt_satt_skill_example_id=1300
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়ালি সক্রিয় করার জন্যঃ
kt_satt_skill_example_id=1301
kt_satt_skill_example_id=1302
বুটস্ট্রাপ ট্যাব মেথড
ট্যাব মেথড নিচের টেবিলে দেখানো হলো।
| মেথড | বর্ণনা | উদাহরণ |
|---|---|---|
.tab("show") | ট্যাব প্রদর্শন করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ ট্যাব ইভেন্ট
ট্যাব ইভেন্ট নিম্নোক্ত টেবিল দেখানো হলো।
| ইভেন্ট | বর্ণনা | উদাহরণ |
|---|---|---|
show.bs.tab | যখন ট্যাব প্রদর্শন করা হয় তখন সম্পন্ন হয়। | উদাহরণ দেখুন |
shown.bs.tab | যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় হয় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। | উদাহরণ দেখুন |
hide.bs.tab | যখন ট্যাব হাইড করা হয় তখন ঘটে। | উদাহরণ দেখুন |
hidden.bs.tab | যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। | উদাহরণ দেখুন |
টিপসঃ একটিভ ট্যাব এবং পূর্ববর্তী একটিভ ট্যাব পেতে জেকুয়েরির event.target এবং event.relatedTarget ইভেন্ট গুলো ব্যবহার করুন।
বুটস্ট্রাপ জেএস বাটন (button.js)
যদি আপনি বাটনের উপর আরো অধিক কন্ট্রোল পেতে চান তাহলে প্লাগ-ইন ব্যবহার করুন।
বাটন টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ বাটন টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ বাটন প্লাগ-ইন ক্লাসসমূহ
নিচের ক্লাসগুলো যেকোন < a >, < button > অথবা < input > এলিমেন্টকে স্টাইল করার জন্য ব্যবহার করা যায়ঃ
| ক্লাস | বিবরণ |
|---|---|
.btn | যেকোন বাটনে বেসিক স্টাইল যুক্ত করে। |
.btn-default | ডিফল্ট/স্ট্যান্ডার্ড বাটন তৈরি করে। |
.btn-primary | প্রাইমারি একশন বুঝায়। |
.btn-success | একটি সফল অথবা পজিটিভ কর্মকে বুঝায়। |
.btn-info | তথ্যবহুল এলার্ট মেসেজে বুঝায়। |
.btn-warning | সতর্কতা সংক্রান্ত মেসেজ বুঝাবে। |
.btn-danger | ক্ষতিকর অথবা সম্ভাব্য নেগেটিভ কর্মকে বুঝায়। |
.btn-link | বাটনকে দেখতে লিংকের মতো করবে। (কিন্তু, কাজ করবে বাটনের মতই) |
.btn-lg | বড় বাটন তৈরী করে। |
.btn-sm | ছোট বাটন তৈরী করে। |
.btn-xs | অতিরিক্ত ছোট আকারের বাটন তৈরী করে। |
.btn-block | ব্লক-লেভেল বাটন তৈরী করে। (পেরেন্ট এলিমেন্টের সম্পূর্ণ প্রস্থ নিয়ে) |
.active | বাটনকে একটিভ অবস্থায় দেখাবে। |
.disabled | বাটনকে disable করে দিবে। |
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়েললি যুক্ত করার জন্যঃ
kt_satt_skill_example_id=1307
বুটস্ট্রাপ বাটন মেথড
নিচের টেবিলের মধ্যে বাটন মেথডগুলো দেখানো হলোঃ
নোট: এই প্লাগ-ইনের ক্ষেত্রে মেথড data এট্রিবিউটের মাধ্যমে অতিক্রম করতে পারে।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.button("toggle") | বাটনটি চাপ দেয়া আছে এমন দেখায়। | উদাহরণ দেখুন |
.button("loading") | বাটনকে অক্ষম করে দেয় এবং বাটনের টেক্সটকে loading.. এ রুপান্তর করে। | উদাহরণ দেখুন |
.button("reset") | বাটনের টেক্সটকে মূল টেক্সটে রুপান্তর করে(যদি পরিবর্তিত হয়) | উদাহরণ দেখুন |
.button("string") | নতুন বাটন টেক্সট নির্দিষ্ট করে। | উদাহরণ দেখুন |
বাটন সংক্রান্ত আরো কিছু উদাহরণ
বাটনকে কাস্টমাইজ করতে সিএসএস ব্যবহার করুন।
কিভাবে রাউন্ড বর্ডার বাদ দিবেনঃ
kt_satt_skill_example_id=1308
কিভাবে বাটনে বিশেষ কালার যুক্ত করা যায়ঃ
kt_satt_skill_example_id=1309
কিভাবে বাটনে স্যাডো যুক্ত কয়া যায়ঃ
কিভাবে বাটনে বিশেষ কালার যুক্ত করা যায়ঃ
kt_satt_skill_example_id=1310
বুটস্ট্রাপ জেএস ক্যারোসেল (carousel.js)
ক্যারোসেল প্লাগ-ইন হলো এলিমেন্টের মধ্যে চক্রাকারে ঘুরার জন্য একটি কম্পোনেন্ট(component), যেমনঃ একটি ক্যারোসেল (স্লাইডসো)।
ক্যারোসেলের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ ক্যারোসেল টিউটোরিয়ালটি পড়ুন।
ক্যারোসেল প্লাগ-ইন ক্লাস
| Class | Description |
|---|---|
.carousel | ক্যারোসেল তৈরী করে। |
.slide | একটি আইটেম থেকে অন্য আইটেম এ স্লাইড করার সময় সিএসএস ট্রানজিশন এবং এনিমেশন যুক্ত করে। আপনি যদি এই ইফেক্ট না চান তাহলে এই ক্লাসটি বাদ দিয়ে দিন। |
.carousel-indicators | ক্যারোসেলের জন্য একটি ইন্ডিকেটর যুক্ত করে। এগুলো হলো প্রতিটি স্লাইডের নিচে ছোট ছোট ডট(যেগুলো দ্বারা বুঝায়, ক্যারোসেলে কতগুলো স্লাইড আছে, এবং বর্তমানে ইউজার কোন স্লাইডটি দেখছেন)। |
.carousel-inner | ক্যারোসেলে স্লাইড যুক্ত করে। |
.item | প্রতিটি স্লাইডের কন্টেন্টকে বুঝায়। |
.left carousel-control | ক্যারোসেলে একটি পূর্ববর্তী/Previous বাটন যুক্ত করে, যেটি ইউজারকে পিছনে যাওয়ার সুযোগ দেয়। |
.right carousel-control | ক্যারোসেলে একটি পরবর্তী/Next বাটন যুক্ত করে, যেটি ইউজারকে সামনে যাওয়ার সুযোগ দেয়। |
.carousel-caption | ক্যারেসেলের জন্য ক্যাপশন তৈরি করে। |
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
data-ride="carousel" এট্রিবিউট ক্যারোসেলকে একটিভ করে।
data-slide এবং data-slide-to এট্রিবিউটের মাধ্যমে একটি স্লাইড পরিবর্তিত হয়ে কোন স্লাইডে যাবে তা নির্দিষ্ট করে।
data-slide এট্রিবিউটে দুইটি ভ্যালু ব্যবহার করা যায়ঃ prev অথবা next, যেখানে data-slide-to তে নাম্বার ব্যবহার ব্যবহৃত হয়।
kt_satt_skill_example_id=1314
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়েললি যুক্ত করার জন্যঃ
kt_satt_skill_example_id=1316
বুটস্ট্রাপ ক্যারোসেল অপশন
অপশন data এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে পাস(pass) করতে পারে। data এট্রিবিউটের ক্ষেত্রে, অপশনের নাম "data-" সাথে যুক্ত করুন। যেমন; data-interval=""
| নাম | ধরন | ডিফল্ট | বিবরণ |
|---|---|---|---|
interval | number, or the boolean false | 5000 | একটি স্লাইড থেকে অন্য আরেকটি স্লাইডে যেতে কতো সময়(মিলিসেকেন্ডে) নিবে তা নির্দিষ্ট করে। নোটঃ স্বয়ংক্রিয় স্লাইডিং বন্ধ করার জন্য ইন্টারবাল false নির্ধারণ করুন। |
pause | string, or the boolean false | "hover" | যখন মাউস কার্সর স্লাইডে নেয়া হয় তখন ক্যারোসেলকে এক স্লাইড থেকে অন্য স্লাইডে যেতে বিরতি দেয়। আবার যখন মাউস কার্সর সরিয়ে নেয়া হয় তখন আবার ক্যারোসেল চালু হয়। নোটঃ হোভারের ক্ষেত্রে ক্ষমতা অক্ষম করে রাখতে চাইলে false নির্ধারন করুন। |
wrap | boolean | true | ক্যারোসেল কি বিরামহীনভাবে চলতেই থাকবে নাকি একবার চলার পর শেষ স্লাইডে বন্ধ হয়ে যাবে তা নির্দিষ্ট করে।
|
উদাহরণঃ জাভাস্ক্রিপ্ট ব্যবহার করে ক্যারোসেলের সবগুলো অপশনের ব্যবহার
kt_satt_skill_example_id=1317
উদাহরণঃ data-* এট্রিবিউট ব্যবহার করে ক্যারোসেলের সবগুলো অপশনের ব্যবহার
kt_satt_skill_example_id=1319
বুটস্ট্রাপ ক্যারোসেল মেথড
নিচের টেবিলে ক্যারোসেল মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ |
|---|---|
.carousel(options) | একটি অপশন সহ ক্যারোসেল সচল করে। ভ্যালিড ভ্যালু জানার জন্য উপরে ক্যারোসেল অপশন দেখুন। |
.carousel("cycle") | ক্যারোসেলের আইটেমগুলো বাম থেকে ডানের দিকে যায়। |
.carousel("pause") | ক্যারোসেলকে বন্ধ করে দেয়। |
.carousel(number) | একটি বিশেষ বিষয়ের দিকে যায়(zero-based; প্রথম আইটেম হলো 0, দ্বিতীয় আইটেম হলো 1 ইত্যাদি..) |
.carousel("prev") | পূর্ববর্তী আইটেমের দিকে নিয়ে যায়। |
.carousel("next") | পরবর্তী আইটেমের দিকে নিয়ে যায়। |
নোটঃ মেথডগুলো সবগুলো নিয়ে জাভাস্ক্রিপ্ট অপশন উদাহরণ দেওয়া হয়েছে
বুটস্ট্রাপ ক্যারোসেল ইভেন্ট
নিচে টেবিলে ক্যারোসেল ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | উদাহরণ |
|---|---|---|
slide.bs.carousel | এই ইভেন্টটি যখন ক্যারোসেল একটি আইটেম থেকে অন্য আরেকটি আইটেমে স্লাইড করা শুরু করে তখন ঘটে। | উদাহরণ দেখুন |
slid.bs.carousel | এই ইভেন্টটি যখন ক্যারোসেল একটি আইটেম থেকে অন্য আরেকটি আইটেমে স্লাইড করা শেষ করে তখন ঘটে। | উদাহরণ দেখুন |
বুটস্ট্রাপ JS মোডাল (modal.js)
বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো একটি ডায়ালগ বক্স/পপ-আপ উইন্ডো, যা বর্তমান পেজের উপরের অংশে প্রদর্শিত হয়।
বুটস্ট্রাপ মোডালের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ মোডাল টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ মোডাল প্লাগ-ইন ক্লাসসমূহ
| ক্লাস | বিবরণ |
|---|---|
.modal | একটি মোডাল তৈরি করে। |
.modal-content | মোডালকে বর্ডার, ব্যাকগ্রাউন্ড-কালার ইত্যাদির মাধ্যমে যথাযথ ভাবে স্টাইল করে। মোডালের হেডার, বডি এবং ফুটার যুক্ত করার জন্য এই ক্লাসটি ব্যবহার করুন। |
.modal-header | মোডালের হেডারের জন্য স্টাইল ডিফাইন করে। |
.modal-body | মোডালের বডির জন্য স্টাইল ডিফাইন করে। |
.modal-footer | মোডালের ফুটারের জন্য স্টাইল ডিফাইন করে। নোটঃ এই এরিয়াটি ডিফল্টভাবে ডানে এ্যালাইন করা থাকে। এটাকে ওভেরর-াইট করার জন্য সিএসএসের text-align:"left/center" প্রপার্টি ব্যবহার করুন। |
.modal-sm | ছোট মোডাল তৈরি করার জন্য ব্যবহার করা হয়। |
.modal-lg | বড় মোডাল তৈরি করার জন্য ব্যবহার করা হয়। |
.fade | মোডালে ফেড ইন এবং ফেড আউট এনিমশন/ট্রানজিশন ইফেক্ট যুক্ত করে। |
বুটস্ট্রাপ data-* এট্রিবিউটের মাধ্যমে মোডাল ট্রিগার
যেকোনো একটি এলিমেন্টে data-toggle="modal" এবং data-target="#modalID" যুক্ত করুন।
নোটঃ এলিমেন্টে data-target এট্রিবিউটটি বাদ দিন এবং তার পরিবর্তে href="#modalID" ব্যবহার করুনঃ
kt_satt_skill_example_id=1320
জাভাস্ক্রিপ্টের মাধ্যমে ট্রিগার
ম্যানুয়েললি যুক্ত করার জন্যঃ
kt_satt_skill_example_id=1321
বুটস্ট্রাপ মোডাল অপশন
অপশন data এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। data এট্রিবিউটের ক্ষেত্রে, অপশনের নাম "data-" সাথে যুক্ত করুন। যেমন; data-keyboard=""
| নাম | ধরন | ডিফল্ট | বিবরণ | উদাহরণ |
|---|---|---|---|---|
backdrop | boolean অথবা স্ট্রিং "static" | true | মোডালে একটি ধূসর ওভারলে থাকতে হবে কিনা তা নির্দিষ্ট করে।
আপনি যদি ভ্যালু | JS/data উদাহরণ |
keyboard | boolean | true |
| JS/data উদাহরণ |
show | boolean | true | মোডাল আরম্ভ হওয়ার সময় প্রদর্শিত হবে কিনা তা নির্দিষ্ট করে। |
বুটস্ট্রাপ মোডাল মেথড
নিচের টেবিলে মোডাল মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.modal(options) | মোডালকে কন্টেন্ট হিসেবে সক্রিয় করে। ভ্যালিড ভ্যালুর জন্য উপরের অপশন দেখুন। | |
.modal("toggle") | মোডালকে টোগল করে। | উদাহরণ দেখুন |
.modal("show") | মোডালকে ওপেন করে। | উদাহরণ দেখুন |
.modal("hide") | মোডালকে হাইড করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ মোডাল ইভেন্ট
নিচের টেবিলের মোডাল ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | উদাহরণ |
|---|---|---|
show.bs.modal | মোডালটি যখন প্রদর্শিত হয় তখন ঘটে। | উদাহরণ দেখুন |
shown.bs.modal | মোডালটি প্রদর্শিত হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
hide.bs.modal | মোডালটি যখন হাইড হয় তখন ঘটে। | উদাহরণ দেখুন |
hidden.bs.modal | মোডালটি হাইড হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
উদাহরণ
বুটস্ট্রাপ লগ-ইন মোডাল
নিচের উদাহরণে লগ-ইনের জন্য একটি মোডাল তৈরি করা হলোঃ
kt_satt_skill_example_id=1322
বুটস্ট্রাপ JS স্ক্রলস্পাই (scrollspy.js)
স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টের লিঙ্ককে স্বয়ংক্রিয়ভাবে আপডেট করার জন্য বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন ব্যবহার করা হয়।
বুটস্ট্রাপ স্ক্রলস্পাই সম্পর্কে জানতে বুটস্ট্রাপ স্ক্রলস্পাই টিউটোরিয়ালটি পড়ুন।
টিপসঃ স্ক্রলস্পাই প্লাগ-ইন প্রায়ই এফিক্স প্লাগ-ইনের সাথে ব্যবহার করা হয়।
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
যেই এলিমেন্টে স্ক্রলস্পাই ব্যবহার করবেন ঐ এলিমেন্টের মধ্যে data-spy="scroll" এট্রিবিউটটি যুক্ত করুন (বেশিরভাগ ক্ষেত্রে < body > এলিমেন্টেই ইহা ব্যবহার করা হয়)।
তারপর data-target এট্রিবিউটের সাথে id এর ভ্যালু অথবা ন্যাভিগেশন বারের (.navbar) ক্লাসের নাম যোগ করি। ইহা ন্যাভবারের সাথে স্ক্রল এরিয়ার কানেকশন তৈরি করে।
ন্যাভবারের লিস্ট আইটেমের ID এবং স্ক্রল এরিয়ার ID একই হতে হবে (< div id="section1" > ও এর ID একই)।
যখন স্ক্রল করা হয়, অপশনাল data-offset এট্রিবিউটটি স্ক্রলের সময় উপরের থেকে কত পিক্সেল নিচে নামবে তা নির্দেশ করে। যখন আপনার মনে হবে ন্যাভবারের একটিভ স্ট্যাট স্ক্রল এলিমেন্টের সাপেক্ষে খুব দ্রুত অথবা খুব ধীরগতিতে পরিবর্তন হচ্ছে তখন এই অপশন খুব গুরুত্বপূর্ন ভূমিকা পালন করবে। ডিফল্ট ভ্যালু ১০ পিক্সেল।
kt_satt_skill_example_id=1324
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
জাভাস্ক্রিপ্টের সাহায্যে সক্রিয় করার জন্যঃ
kt_satt_skill_example_id=1325
বুটস্ট্রাপ স্ক্রলস্পাই এর অপশন
অপশন ডাটা এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। ডাটা এট্রিবিউটের ক্ষেত্রে data-* নামের সাথে অপশনের নাম যুক্ত করা হয়, যেমন data-offset=""
| নাম | টাইপ | ডিফল্ট | বর্ণনা |
|---|---|---|---|
offset | number | 10 | ন্যাভবারের সাথে লিংককৃত সেকশন বা এলিমেন্টের কতো পিক্সেলের মধ্যে স্ক্রলস্পাই একটিভ হবে তা নির্দেশ করে। এটি অপশনাল। ডিফল্ট ভ্যালু হচ্ছে ১০ পিক্সেল। আগের উদাহরণটিতে data-offset এট্রিবিউটটি ব্যবহার করা হয়েছে। |
আরো উদাহরণ
বুটস্ট্রাপ এ্যানিমেশনযুক্ত স্ক্রলস্পাই
একই পেজের মধ্যে স্মুথ(smooth) পেজ স্ক্রল যেভাবে যোগ করবেনঃ
kt_satt_skill_example_id=1326
বুটস্ট্রাপ JS এফিক্স (affix.js)
একটি ইলিমেন্টকে পেজের একটি নির্দিষ্ট জায়গায় ফিক্সড করে দেওয়ার ক্ষেত্রে এফিক্স প্লাগ-ইন ব্যবহার করা হয়। এটি প্রায়ই ন্যাভিগেশন মেনু এবং সোস্যাল আইকনের ক্ষেত্রে ব্যবহার করা হয়, যাতে করে এগুলো পেজ স্ক্রলিং করার সময় পেজের একটি নির্দিষ্ট স্থানে গিয়ে ফিক্সড হয়ে যায়।
এই প্লাগ-ইনটি স্ক্রলিং পজিশনের উপর ভিত্তি করে এলিমেন্টের আচরকে টোগল করে (সিএসএসের পজিশন স্ট্যাটিক থেকে ফিক্সড করে)।
এফিক্স প্লাগইনটি মূলত তিন ক্লাসের মধ্যে টোগলঃ .affix, .affix-top, এবং .affix-bottom। প্রতিটি ক্লাসই নির্দিষ্ট স্টেটের প্রতিনিধিত্ব করে। আপনাকে অবশ্যই আসল অবস্থানে হ্যান্ডেল করার জন্য .affix ক্লাসে সিএসএসের position:fixed প্রপার্টিটি ব্যবহার করতে হবে।
অধিক তথ্যের জন্য আমাদের বুটস্ট্রাপ এফিক্স টিউটোরিয়ালটি পড়ুন।
টিপসঃ এফিক্স প্লাগ-ইনটি স্ক্রলস্পাই প্লাগ-ইনের সাথে ব্যবহার করা যায়।
data-* এট্রিবিউট মাধ্যম
যেই এলিমেন্টটিকে এফিক্স যুক্ত করতে চান ঐ এলিমেন্টটিতে data-spy="affix" এট্রিবিউট এবং স্ক্রলের অবস্থান নির্দিষ্ট করা জন্যdata-offset-top|bottom="number" এট্রিবিউট যুক্ত করুন।
kt_satt_skill_example_id=1329
বুটস্ট্রাপ এফিক্স অপশন
অপশন ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যম অতিক্রম করতে পারে। ডেটা অ্যাট্রিবিউট এর ক্ষেত্রে, ডেটাতে অপশনের নাম লিখুন-,যেমন ডেটা-offset=""
| নাম | টাইপ | ডিপল্ট | বর্ণনা |
|---|---|---|---|
offset | number | object | function | 10 | যখন স্ক্রলের পজিশন গননা করা হয় তখন পিক্সেল সংখ্যা নির্দিষ্ট করে। যখন একটি একক সংখ্যা ব্যবহার করা হয় তখন অফসেট উপর এবং নিচের ডিরেকশনে সেট হয়। যদি আপনি শুধুমাত্র উপর অথবা নিচের ডিরেকশন নিয়ন্ত্রণ করতে চান তখন অবজেক্ট ব্যবহার করতে পারেন, যেমনঃ offset: {top:25}।একাধিক অফসেটের জন্য, offset: {top:25, bottom:50} ব্যবহার করুন।টিপসঃ ডায়নামিক অফসেট নির্ধারণ করার জন্য ফাংশন ব্যবহার করা হয়। |
target | sector | node | element | window object | এফিক্সের টার্গেট এলিমেন্টকে নির্দিষ্ট করে। |
বুটস্ট্রাপ এফিক্স ইভেন্ট
নিচের টেবিলে এফিক্স সংক্রান্ত ইভেন্টগুলো দেয়া হলো
| ইভেন্ট | বর্ণনা | উদাহরণ |
|---|---|---|
affix.bs.affix | এফিক্স এলিমেন্টটি ফিক্সড হওয়ার পূর্বে এই ইভেন্টটি ঘটে। (যখন .affix-top ক্লাসটি .affix ক্লাস দ্বারা রিপ্লেস হতে যায়) | উদাহরণ দেখুন |
affixed.bs.affix | ফিক্সড পজিশন সম্পন্ন হওয়ার এই ইভেন্টটি ঘটে। (যখন .affix-top ক্লাসটি .affix ক্লাস দ্বারা রিপ্লেস সম্পন্ন হয়।) | উদাহরণ দেখুন |
affix-top.bs.affix | টপ(এফিক্স) এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পূর্বে এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (যখন .affix ক্লাস .affix-top ক্লাসের জায়গায় রিপ্লেস হতে যায়) | উদাহরণ দেখুন |
affixed-top.bs.affix | টপ এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পর এই ইভেন্টটি সম্পন্ন হয় (non-fixed) । (.affix ক্লাস .affix-top এর দ্বারা পরিবর্তিত হবে) | উদাহরণ দেখুন |
affix-bottom.bs.affix | বটম এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পূর্বে এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (.affix ক্লাসটি .affix-bottom ক্লাস দ্বারা পরিবর্তিত হবে) | |
affixed-bottom.bs.affix | বটম এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পর এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (.affix ক্লাসটি .affix-bottom ক্লাস দ্বারা পরিবর্তন সম্পন্ন হয়।) |
আরো উদাহরণ
স্বয়ংক্রিয়ভাবে ন্যাভবারকে এফিক্স করার জন্য জেকুয়েরির ব্যবহার
ইউজার একটি এলিমেন্টের(< header >) নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারকে এফিক্স করার জন্য জেকুয়েরির outerHeight() মেথড ব্যবহার করা হয়।
kt_satt_skill_example_id=1331
এ্যানিমেশনযুক্ত এফিক্স ন্যাভবার
বিভিন্ন .affix ক্লাসকে সূনিপুন করার জন্য সিএসএস ব্যবহার করুনঃ
kt_satt_skill_example_id=1332
উদাহরণ - ন্যাভবারের মধ্যে স্লাইড
kt_satt_skill_example_id=1333
Promotion
Download Our Mobile Apps
