বুটস্ট্রাপ মেনু
বেশিরভাগ ওয়েবপেজেরি মেনুবার থাকে।
এইচটিএমএলে আনওর্ডার্ড লিস্টের (< ul >) মাধ্যমে মেনু তৈরি করা হয় (স্টাইল পরবর্তী বিষয়) যেমনঃ
kt_satt_skill_example_id=1112
এছাড়া আপনি বুটস্ট্রাপের ট্যাব এবং পিলের মাধ্যমেও মেনুবার তৈরি করতে পারেন। (নিচে দেখুন)
বুটস্ট্রাপ ট্যাব
< ul class="nav nav-tabs" > এর মাধ্যমে ট্যাব তৈরি করা যায়ঃ
টিপসঃ < li class="active" > দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছে।
নিচের উদাহরণটিতে বুটস্ট্রাপ দ্বারা ন্যাভিগেশন ট্যাব তৈরি করে দেখানো হয়েছেঃ
kt_satt_skill_example_id=1113
বুটস্ট্রাপ ট্যাবের মধ্যে ড্রপডাউন মেনু
আপনি চাইলে ট্যাবের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারেন।
নিচের উদাহরণে "Service" সেকশনে একটি ড্রপডাউন ব্যবহার করা হয়েছেঃ
kt_satt_skill_example_id=1114
বুটস্ট্রাপ পিল
< ul class="nav nav-pills" > দ্বারা পিল তৈরি করা হয় এবং < li class="active" > দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছেঃ
kt_satt_skill_example_id=1116
বুটস্ট্রাপ ভার্টিক্যাল পিল
পিলকে ভার্টিক্যাল ভাবেও তৈরি করা যায়। এর জন্য .nav-stacked ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1118
একই সারিতে ভার্টিক্যাল পিল
এখানে শেষ কলামটিতে ভার্টিক্যাল আকারে পিল ব্যবহার করা হয়েছে।
যেখানে বড় স্ক্রিনে কলামগুলো পাশাপাশি অবস্থান করে। কিন্তু ছোট স্ক্রিনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটি একক কলামে রুপান্তরিত হয়ঃ
kt_satt_skill_example_id=1120
পিলের মধ্যে ড্রপডাউন মেনুর ব্যবহার
আমরা চাইলে পিলের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারি।
নিচের এই উদাহরণটিতে "Service" সেকশনে ড্রপডাউন ব্যবহার করা হয়েছেঃ
kt_satt_skill_example_id=1122
সেন্টারে ট্যাব এবং পিলের ব্যবহার
ট্যাব এবং পিলকে মধ্যস্থানে/জাস্টিফাই করার জন্য .nav-justified ক্লাস ব্যবহার করুন।
মনে রাখবেন ৭৬৮ পিক্সেল থেকে ছোট স্ক্রিনে লিস্ট আইটেমগুলো নিচে নিচে চলে আসবে তবে কন্টেন্টগুলো ঠিক মাঝামাঝিতেই থাকবেঃ
kt_satt_skill_example_id=1124
বুটস্ট্রাপ টোগোলেবল/ডায়নামিক ট্যাব
ট্যাবকে টোগোলেবল করার জন্য, প্রত্যেকটি লিংকে data-toggle="tab" এট্রিবিউটটি ব্যবহার করুন।
তারপর একক একটি ID 'র সাথে .tab-pane ক্লাসটি ব্যবহার করুন এবং .tab-content ক্লাসযুক্ত একটি <div> এলিমেন্টের মধ্যে সবগুলো কন্টেন্টকে রাখুন।
এছাড়াও যদি আপনি ক্লিক করার সময় ট্যাবে ফেড-ইন এবং ফেড-আউট এফেক্ট যুক্ত করতে চান তাহলে .tab-pane ক্লাসের সাথে অবশ্যই .fade ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1126
বুটস্ট্রাপ টোগোলেবল/ডায়নামিক পিল
ট্যাবের মতো পিলের ক্ষেত্রে ঠিক একই কোড ব্যবহার করা হয়। শুধুমাত্র data-toggle="tab" এট্রিবিউটের জায়গায় data-toggle="pill" এট্রিবিউট ব্যবহার করতে হবেঃ
kt_satt_skill_example_id=1129
একনজরে ট্যাব এবং পিল সংক্রান্ত ক্লাসগুলো দেখে নেইঃ
| ক্লাস | বর্ণনা |
|---|---|
.nav nav-tabs | একটি ন্যাভিগেশন ট্যাব তৈরি করে। |
.nav nav-pills | একটি ন্যাভিগেশন পিল তৈরি করে। |
.nav nav-pills nav-stacked | একটি ভার্টিক্যাল ন্যাভিগেশন পিল তৈরি করে। |
.nav-justified | ৭৬৮ পিক্সেলের উর্দ্ধে স্ক্রিনের ক্ষেত্রে পেরেন্ট এলিমেন্টের সমান প্রস্থের ন্যাভিগেশন ট্যাব/পিল তৈরি করে। ছোট স্ক্রিনে এটি একের পর এক নিচে নিচে অবস্থান করবে। |
.disabled | ট্যাব/পিলকে ডিজেবল(unclickable) করার জন্য এটি ব্যবহার করা হয়। |
.tab-content | .tab-pane ক্লাস এবং data-toggle="tab" এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে data-toggle="pill")। এটি ট্যাব/পিলকে টোগোলেবল করে। |
.tab-pane | .tab-content ক্লাস এবং data-toggle ="tab" এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে data-toggle="pill")। এটি ট্যাব/পিলকে টোগোলেবল করে। |
Read more
