বুটস্ট্র্যাপে ন্যাভিগেশন বার বা মেনু বার তৈরি করার জন্য <nav> ট্যাগ লিখতে হয় । এই ট্যাগের ক্লাস লিখতে হয় .navbar / .bg-dark / .navbar-expand-sm / .navbar-light
মেনুবার বা ন্যাভবার তৈরি করার জন্য প্রথমে একটি <nav> ট্যাগ লিখতে হয় । এই ট্যাগের ক্লাস লিখতে হয় .navbar (মেনুবার তৈরি করার জন্য এই ক্লাসটি ব্যবহার করা হয় । ) ,
.bg-dark (মেনুবার এর ব্যাকগ্রাউন্ড রং কালো করার জন্য এই ক্লাস ব্যবহার করা হয়। আপনি .bg-light ক্লাসটি ও ব্যবহার করতে পারেন সাদা রঙের জন্য । ) , .navbar-expand-sd/md/lg( 
এই আইকন টি কোন
মিডিয়া ডিভাইসে দেখাতে চায়ছি তার জন্য এই তিনটি ক্লাস এর মধ্যে যে কোন একটি ব্যবহার করা হয় । ) , .navbar-light( আইকন টি সুন্দর ভাবে সাদা রঙের দেখানোর জন্য ) ।
<button> ট্যাগের ভিতরে ক্লাস লিখতে হবে .navbar-toggler( বড় ডিভাইসে আইকনটি লুকিয়ে রাখার জন্য এই ক্লাস টি ব্যবহার করা হয় । ) , data-toggle="collapse" এটি ব্যবহার করা হয় যখন কেউ আইকনে ক্লিক করবে <ul> ট্যাগে যে লিস্ট থাকবে সেটি যেন দেখা যায় , এর পর data-target="#" এখানে id লিখতে হবে নিচে যে <div> ট্যাগ টির id দেওয়া হয়েছে । এর পর <button> ট্যাগের ভিতরে একটি <span> ট্যাগ লিখতে হবে ও তার ভিতরে একটি ক্লাস লিখতে হবে .navbar-toggler-icon এই ক্লাসটির লেখার ফলে আইকন টি তৈরি হবে ।
এর পর একটি <div> লিখতে হবে এবং দুটি ক্লাস লিখতে হবে .collapse .navbar-collapse । এই ক্লাস এর কাজ <ul> ট্যাগ বা লিস্ট আইটেম গুলো কে লুকয়ে রাখার জন্য কারন কেউ ক্লিক করলে তবে দেখা যাবে । আর একটি id লিখতে হবে এই id টি <button> ট্যাগে টার্গেট করতে হবে ।
এখানে মনে রাখবেন <div> এর ভিতরে <ul> ট্যাগ লিখবেন । এই ট্যাগের ক্লাস লিখবেন .navbar-nav
<ul> ট্যাগের মধ্যে <li> ট্যাগ লিখবেন আর ক্লাস নেবেন .nav-item। <li> ট্যাগের ভিতরে <a> লিখে তার ক্লাস লিখতে হবে .nav-link ।
মেনু আইটেম বা লেখা গুলোকে ডানদিকে দেখানোর জন্য <ul> ট্যাগের মধ্যে ml-auto ক্লাসটি লিখুন ।
কোম্পানি ব্র্যান্ড যুক্ত করার জন্য প্রথমে <nav> ট্যাগের পরে একটি <div> নিতে হবে যার ক্লাস হবে .container। মনে রাখবেন এই <div> ট্যাগের ভিতরে সব কনটেন্ট লিখতে হবে । এই <div> ট্যাগ এর পরে একটি <a> ট্যাগ লিখতে হবে এবং ক্লাস লিখতে হবে .navbar-brand । এই <a> এর ভিতরে টেক্সট লিখবেন ।
কোম্পানি ব্র্যান্ড Logo যুক্ত করার জন্য প্রথমে <nav> ট্যাগের পরে একটি <div> নিতে হবে যার ক্লাস হবে .container। মনে রাখবেন এই <div> ট্যাগের ভিতরে সব কনটেন্ট লিখতে হবে । এই <div> ট্যাগ এর পরে একটি <a> ট্যাগ লিখতে হবে এবং ক্লাস লিখতে হবে .navbar-brand । এই <a> এর ভিতরে একটি <img> ট্যাগ লিখতে হবে এবং ছবির width ও height নির্ধারণ করে দেবেন ।
কোম্পানি ব্র্যান্ড Logo যুক্ত করার জন্য প্রথমে <nav> ট্যাগের পরে একটি <div> নিতে হবে যার ক্লাস হবে .container। মনে রাখবেন এই <div> ট্যাগের ভিতরে সব কনটেন্ট লিখতে হবে । এই <div> ট্যাগ এর পরে একটি <a> ট্যাগ লিখতে হবে এবং ক্লাস লিখতে হবে .navbar-brand । এই <a> এর ভিতরে একটি <img> ট্যাগ লিখতে হবে এবং ছবির width ও height নির্ধারণ করে দেবেন । <img> ট্যাগের পরে ও <a> ট্যাগের ভিতরে টেক্সট লিখবেন ।
.dropdown - যে লিস্ট তৈরি হবে সেটি নিচের দিকে দেখাবে এর জন্য এই ক্লাসটি ব্যবহার করা হয় ।
.dropdown-toggle - বাটনে এই রকম আইকন নিয়ে আসার জন্য এই ক্লাসটি ব্যবহার করা হয় । বাটন ক্লাসএর ভিতরে লিখতে হয় ।
data-toggle="dropdown" - এই attributes ব্যবহার করা হয় যখন বাটনে কেউ ক্লিক করবে তখনি লিস্ট টি নিজে থেকে খুলে যাবে । বাটন ট্যাগএর ভিতরে লিখতে হয় ।
.dropdown-menu - এই ক্লাসটি ব্যবহার করা হয় লিস্টটি লুকিয়ে (hide)রাখার জন্য । এই ক্লাস টি একটি div এর ভিতরে ব্যবহার করা হয় ।
dropdown-item - এই ক্লাসটি ব্যবহার করা হয় লেখা (text) গুলো নিচে নিচে দেখানো জন্য । লিস্ট ট্যাগ এর ক্লাসে লিখতে হয় ।
ড্রপডাউন সম্পর্কে বিস্তারিত জানার জন্য এখানে ক্লিক করুনCollect the code by clicking the Code Here
button below to get the code for this project .
Collect the code by clicking the Code Here
button below to get the code for this project .
Collect the code by clicking the Code Here
button below to get the code for this project .
Collect the code by clicking the Code Here
button below to get the code for this project .