বুটস্ট্র্যাপ ন্যাভ
🌈বুটস্ট্র্যাপ ন্যাভ কি?
📋বুটস্ট্র্যাপ ন্যাভ হলো নেভিগেশন তৈরি ও পরিচালনা করার পদ্ধতি।
⚒️বুটস্ট্র্যাপ ন্যাভ নেভিগেশন তৈরি ও পরিচালনা করতে ব্যবহৃত হয়।
বুটস্ট্র্যাপ ন্যাভ সমূহ
বুটস্ট্র্যাপ ন্যাভ এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ 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 | পিল-স্টাইলের নেভিগেশন তৈরি করতে ব্যবহৃত হয়। |