জয়েন লগইন

বুটস্ট্র্যাপ ন্যাভ

🌈বুটস্ট্র্যাপ ন্যাভ কি?

📋বুটস্ট্র্যাপ ন্যাভ হলো নেভিগেশন তৈরি ও পরিচালনা করার পদ্ধতি।

⚒️বুটস্ট্র্যাপ ন্যাভ নেভিগেশন তৈরি ও পরিচালনা করতে ব্যবহৃত হয়।

বুটস্ট্র্যাপ ন্যাভ সমূহ

বুটস্ট্র্যাপ ন্যাভ এবং সেগুলোর ব্যবহারের তালিকা

  • ➡️ nav - nav ক্লাস নির্দিষ্ট করা
  • ➡️ nav-item - নেভিগেশন আইটেম নির্ধারণ করা
  • ➡️ nav-link - নেভিগেশন লিংক নির্ধারণ করা
  • ➡️ nav-tabs - ট্যাবভিত্তিক নেভিগেশন তৈরি করা
  • ➡️ nav-pills - পিল-স্টাইলের নেভিগেশন তৈরি করা

nav - nav ক্লাস নির্দিষ্ট করার উদাহরণ।

bootstrap
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<ul class="nav">
  <li class="nav-item"><a class="nav-link" href="/php/tutorial/home">পিএইচপি</a></li>
  <li class="nav-item"><a class="nav-link" href="/java/tutorial/home">জাভা</a></li>
  <li class="nav-item"><a class="nav-link" href="/python/tutorial/home">পাইথন</a></li>
  <li class="nav-item"><a class="nav-link" href="/javascript/tutorial/home">জাভাস্ক্রিপ্ট</a></li>
</ul>

</body>
</html>

nav-item - নেভিগেশন আইটেম নির্ধারণ করার উদাহরণ।

bootstrap
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<ul class="nav">
  <li class="nav-item"><a class="nav-link" href="/php/tutorial/home">পিএইচপি</a></li>
  <li class="nav-item"><a class="nav-link" href="/java/tutorial/home">জাভা</a></li>
  <li class="nav-item"><a class="nav-link" href="/python/tutorial/home">পাইথন</a></li>
  <li class="nav-item"><a class="nav-link" href="/javascript/tutorial/home">জাভাস্ক্রিপ্ট</a></li>
</ul>

</body>
</html>

nav-link - নেভিগেশন লিংক নির্ধারণ করার উদাহরণ।

bootstrap
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<ul class="nav">
  <li class="nav-item"><a class="nav-link" href="/php/tutorial/home">পিএইচপি</a></li>
  <li class="nav-item"><a class="nav-link" href="/java/tutorial/home">জাভা</a></li>
  <li class="nav-item"><a class="nav-link" href="/python/tutorial/home">পাইথন</a></li>
  <li class="nav-item"><a class="nav-link" href="/javascript/tutorial/home">জাভাস্ক্রিপ্ট</a></li>
</ul>

</body>
</html>

nav-tabs - ট্যাবভিত্তিক নেভিগেশন তৈরি করার উদাহরণ।

bootstrap
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link" href="/php/tutorial/home">পিএইচপি</a></li>
  <li class="nav-item"><a class="nav-link" href="/java/tutorial/home">জাভা</a></li>
  <li class="nav-item"><a class="nav-link" href="/python/tutorial/home">পাইথন</a></li>
  <li class="nav-item"><a class="nav-link" href="/javascript/tutorial/home">জাভাস্ক্রিপ্ট</a></li>
</ul>

</body>
</html>

nav-pills - পিল-স্টাইলের নেভিগেশন তৈরি করার উদাহরণ।

bootstrap
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link" href="/php/tutorial/home">পিএইচপি</a></li>
  <li class="nav-item"><a class="nav-link" href="/java/tutorial/home">জাভা</a></li>
  <li class="nav-item"><a class="nav-link" href="/python/tutorial/home">পাইথন</a></li>
  <li class="nav-item"><a class="nav-link" href="/javascript/tutorial/home">জাভাস্ক্রিপ্ট</a></li>
</ul>

</body>
</html>

বুটস্ট্র্যাপ ন্যাভ সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম বিবরণ
nav nav ক্লাস নির্দিষ্ট করতে ব্যবহৃত হয়।
nav-item নেভিগেশন আইটেম নির্ধারণ করতে ব্যবহৃত হয়।
nav-link নেভিগেশন লিংক নির্ধারণ করতে ব্যবহৃত হয়।
nav-tabs ট্যাবভিত্তিক নেভিগেশন তৈরি করতে ব্যবহৃত হয়।
nav-pills পিল-স্টাইলের নেভিগেশন তৈরি করতে ব্যবহৃত হয়।