বুটস্ট্রাপ মেনু

বেশিরভাগ ওয়েবপেজেরি মেনুবার থাকে।

এইচটিএমএলে আনওর্ডার্ড লিস্টের (< 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 ক্লাসযুক্ত একটি

Content added || updated By

Abdur Rakib