বুটস্ট্রাপ ন্যাভিগেশন বার
বুটস্ট্রাপ ন্যাভিগেশন বার হলো একটি ন্যাভিগেশন হেডার যা একটি পেজের উপরে ব্যবহার করা হয়:
বুটস্ট্রাপ দ্বারা খুব সহজে ডিভাইসের স্ক্রিন সাইজের উপর নির্ভর করে একটি পেজের ন্যাভিগেশন বারকে প্রসারিত বা কলাপ্স করা যায়।
একটি স্ট্যান্ডার্ড ন্যাভিগেশন বার তৈরি করার জন্য ক্লাস ব্যবহার করা হয়।
কিভাবে ন্যাভিগেশন বারকে একটি পেজের উপরে ব্যবহার করা যায় নিচের উদাহরণে দেখানো হলোঃ
kt_satt_skill_example_id=1136
ইনভার্স(Inverse) ন্যাভিগেশন বার
যদি বুটস্ট্রাপের ডিফল্ট ন্যাভিগেশন বারটি আপনার পছন্দ না হয় তাহলে আপনি চাইলে কালো কালারের ন্যাভিগেশন বার ব্যবহার করতে পারেনঃ
এর জন্য শুধুমাত্র .navbar-default ক্লাস এর পরিবর্তে .navbar-inverse ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1138
ফিক্সড ন্যাভিগেশন বার
একজন ব্যবহারকারী তার ইচ্ছা মত ন্যাভিগেশন বারকে পেজের উপরে বা নিচে ফিক্সড করতে পারে।
এক্ষেত্রে ন্যাভিগেশন বারটি পেজের উপরে অথবা নিচে ফিক্সড থাকবে এমনকি যখন পেজটি স্ক্রলিং করা হয় তখনও এর অবস্থানের কোন পরিবর্তন হবে না।
ন্যাভিগেশন বারকে পেজের উপরে ফিক্সড করার জন্য .navbar-fixed-top ক্লাসটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1139
ন্যাভিগেশন বারকে পেজের নিচে ফিক্সড করার জন্য .navbar-fixed-bottom ক্লাসটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1140
ন্যাভিগেশন বারের সাথে ড্রপাডাউনের ব্যবহার
আমরা চাইলে একটি ন্যাভিগেশন বারের সাথে ড্রপাডাউনও ব্যবহার করতে পারি।
নিচের এই উদাহরণে "Service" মেনুর মধ্যে ড্রপাডাউন ব্যবহার করা হয়েছে:
kt_satt_skill_example_id=1141
ডানে এ্যালাইনকৃত ন্যাভিগেশন বার
ন্যাভিগেশন বারের বাটনকে ডানদিকে নেয়ার জন্য .navbar-right ক্লাস ব্যবহার করুনঃ
এই উদাহরণটিতে "Sign up" এবং "Log in" নামে দুইটি বাটনকে ন্যাভিগেশন বারের ডানদিকে ব্যবহার করা হয়েছে এবং বাটন গুলোর সাথে গ্লিফআইকনও ব্যবহার করা হয়েছেঃ
kt_satt_skill_example_id=1142
কলাপ্সিবল ন্যাভিগেশন বার
ন্যাভিগেশন বার ছোট স্ক্রিনের জন্য অনেক জায়গায় দখল করে।
এই সমস্যার সমাধানের জন্য ছোট স্ক্রিনের ক্ষেত্রে ন্যাভিগেশন বারকে হাইড করে রাখা যায় এবং প্রয়োজনের সময় প্রদর্শন করানো যায়।
এই উদাহরণটিতে ন্যাভিগেশন বারকে উপরে ডানদিকে বাটন আকারে রাখা হয়েছে। এক্ষেত্রে যখনই বাটনে ক্লিক করা হবে তখনই এটি প্রদর্শিত হবে অন্যথায় এটি হাইড হয়ে থাকবেঃ
kt_satt_skill_example_id=1143
Promotion
Download Our Mobile Apps
