Bootstrap 5 নেভিগেশন

নেভিগেশন মেনু

সরল হোরাইজন্টাল মেনু তৈরি করতে, .nav ক্লাস যোগ করুন <ul> উপাদান, এবং প্রত্যেক <li> উপাদানকে যোগ করুন .nav-item এবং .nav-link তাদের লিঙ্কগুলিতে শ্রেণী যোগ করুন:

এইময়েন্ট

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">নিষ্ক্রিয়</a>
  </li>
</ul>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নেভিগেশন বারকে সাজানো

যোগ করুন .justify-content-center শ্রেণী নেভিগেশনকে মধ্যবর্তী সাজায়, যোগ করুন .justify-content-end শ্রেণী নেভিগেশনকে ডানদিকে সাজায়

এইময়েন্ট

<!-- মধ্যবর্তী নেভিগেশন -->
<ul class="nav justify-content-center">
<!-- ডানদিকের নেভিগেশন -->
<ul class="nav justify-content-end">

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ভিক্টিক্যাল নেভিগেশন বার

যোগ করুন .flex-column ক্লাস ভার্টিক্যাল নেভিগেশন তৈরি করতে পারে:}}

এইময়েন্ট

<ul class="nav flex-column">

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ট্যাব

ব্যবহার করুন .nav-tabs ক্লাস নেভিগেশন মেনুকে নেভিগেশন ট্যাব হিসাবে সেট করতে পারে।এবং .active ক্লাস যোগ করুন যাতে সক্রিয়/বর্তমান লিঙ্কের জন্য।যদি আপনি চান যে ট্যাবগুলো সুইচযোগ্য হোক, তাহলে এই পৃষ্ঠার শেষ উদাহরণ দেখুন。

এইময়েন্ট

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">সক্রিয়</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">নিষ্ক্রিয়</a>
  </li>
</ul>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ক্যাপসুল

ব্যবহার করুন .nav-pills ক্লাস নেভিগেশন মেনুকে নেভিগেশন ক্যাপসুল হিসাবে সেট করতে পারে।যদি আপনি চান যে ক্যাপসুল সুইচযোগ্য হোক, তাহলে এই পৃষ্ঠার শেষ উদাহরণ দেখুন。

এইময়েন্ট

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">সক্রিয়</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">নিষ্ক্রিয়</a>
  </li>
</ul>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সমপরিমাপী ট্যাব/ক্যাপসুল নেভিগেশন

ব্যবহার করুন .nav-justified ক্লাস (সমপরিমাপী) ট্যাব/ক্যাপসুল লেবেল/ক্যাপসুল সাজানো:

এইময়েন্ট

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ক্যাপসুল ড্রপডাউন মেনু

এইময়েন্ট

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">সক্রিয়</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">লিঙ্ক 1</a></li>
      <li><a class="dropdown-item" href="#">লিঙ্ক 2</a></li>
      <li><a class="dropdown-item" href="#">লিঙ্ক 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">নিষ্ক্রিয়</a>
  </li>
</ul>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ট্যাব ড্রপডাউন মেনু

এইময়েন্ট

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">সক্রিয়</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">লিঙ্ক 1</a></li>
      <li><a class="dropdown-item" href="#">লিঙ্ক 2</a></li>
      <li><a class="dropdown-item" href="#">লিঙ্ক 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">লিঙ্ক</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">নিষ্ক্রিয়</a>
  </li>
</ul>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সুইচযোগ্য / ডাইনামিক ট্যাব

যদি আপনি চান যে ট্যাবগুলো সুইচযোগ্য হোক, তাহলে data-toggle="tab" প্রত্যেক লিঙ্কে এট্রিবিউট যোগ করা হোক。 .tab-pane ক্লাস যোগ করুন এবং তাদের বারোপড়া করুন যাতে .tab-content ক্লাসের <div> এলিমেন্টে যোগ করুন。

আপনি যদি চান যে ট্যাবগুলো ক্লিক করলে ফেড ইন/ফেড আউট হয়, তাহলে .fade ক্লাস যোগ করুন .tab-pane：

এইময়েন্ট

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">হোম</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">মেনু ১</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">মেনু ২</a>
  </li>
</ul>
<!-- ট্যাব প্যানেল -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ট্যাবসমূহ / ডাইনামিক ক্যাপসুল নেভিগেশন

একই কোডটি নেভিগেশনের জন্য প্রযোজ্য; data-toggle অ্যাট্রিবিউটটি কেবল পরিবর্তন করুন data-toggle="pill" তোমার পক্ষেই:

এইময়েন্ট

<!-- নেভিগেশন ক্যাপসুল -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">প্রবস্থাপনা</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">চূড়ান্ত গ্রীষ্ম</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">শানহিং</a>
  </li>
</ul>
<!-- ট্যাব প্যানেল -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন