बूस्ट्रैप 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="#">ड्रॉपडाउन</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="#">ड्रॉपडाउन</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">मेन्यू 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">मेन्यू 2</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>

अपने आप सामने देखें