Bootstrap 5 नेविगेशन बार

नेविगेशन बार

नेविगेशन बार वेब पृष्ठ के शीर्ष पर स्थित नेविगेशन हेडर है:

बुनियादी नेविगेशन बार

Bootstrap का उपयोग करके, नेविगेशन बार स्क्रीन आकार के आधार पर विस्तारित या गलत हो सकता है।

कृपया इस्तेमाल करें .navbar क्लास एक मानक नेविगेशन बार बनाती है, फिर उसके बाद प्रतिक्रियाशील तब्दीली क्लास:.navbar-expand-xxl|xl|lg|md|sm（विशाल, अति-विशाल, बड़े, मध्यम या छोटे डिवाइसों पर लेवल स्तरीय रूप से खड़े, या छोटे स्क्रीन पर ऊर्ध्वाधर ढले हुए नेविगेशन बार）。

नेविगेशन बार में लिंक जोड़ने के लिए इस्तेमाल करें class="navbar-nav" की <ul> एलीमेंट (या <div>）。 फिर बरोबर .nav-item क्लास <li> एलीमेंट, उसके बाद बरोबर .nav-link क्लास <a> एलीमेंट:

उदाहरण

<-- ग्रे का स्तरीय होगा नेविगेशन बार छोटे स्क्रीन पर ऊर्ध्वाधर होता है -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <-- लिंक -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">लिंक 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">लिंक 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">लिंक 3</a>
      </li>
    </ul>
  </div>
</nav>

स्वयं प्रयोग करें

ऊर्ध्वाधर नेविगेशन बार

हटाएं .navbar-expand-* क्लास सदैव ऊर्ध्वाधर नेविगेशन बार बना सकती है:

उदाहरण

<-- ग्रे की ऊर्ध्वाधर नेविगेशन बार -->
<nav class="navbar bg-light">
  ...
</nav>

स्वयं प्रयोग करें

केंद्रीय नेविगेशन बार

जोड़ें .justify-content-center क्लास नेविगेशन बार को केंद्रीय कर सकती है:

उदाहरण

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

स्वयं प्रयोग करें

रंगीन नेविगेशन बार

कोई भी .bg-color क्लास को नेविगेशन बार के पृष्ठभूमि रंग बदलने के लिए इस्तेमाल करें:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

सलाह:कृपया इस्तेमाल करें .navbar-dark क्लास नेविगेशन बार के सभी लिंक को श्वेत लेखन रंग जोड़ती है, या इस्तेमाल करें .navbar-light क्लास को काला लेखन रंग जोड़ें।

उदाहरण

<-- ग्रे पृष्ठभूमि, श्वेत लेखन -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </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 active" href="#">सक्रिय</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">निष्क्रिय</a>
<!-- काली पृष्ठभूमि, श्वेत टेक्स्ट -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- नीली पृष्ठभूमि, श्वेत टेक्स्ट -->

स्वयं प्रयोग करें

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>सक्रिय/निष्क्रिय स्थिति: .active को <a> एलीमेंट को वर्तमान लिंक को आकर्षित करने के लिए उठाया जाता है, या .disabled को लिंक को नक्लेबन्धित करने के लिए उपयोग करें

ब्रांड / लोगो

.navbar-brand को उपयोग करते है, तो वेब पृष्ठ के ब्रांड/लोगो/प्रोजेक्ट नाम को आकर्षित करने के लिए

उदाहरण

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

स्वयं प्रयोग करें

यदि आप .navbar-brand क्लास को इमेज के साथ उपयोग करते है, बूटस्ट्रैप 5 ऑटोमेटिक रूप से इमेज स्टाइल नियंत्रित करेगा, जो वर्गीकृत नेविगेशन बैर में अनुकूल होगा。

उदाहरण

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

स्वयं प्रयोग करें

नेविगेशन बैर टेक्स्ट

कृपया इस्तेमाल करें .navbar-text को वर्गीकृत नेविगेशन बैर में लिंक नहीं होने वाले किसी भी एलीमेंट (सही इनर पैडिंग और टेक्स्ट कलर सुनिश्चित करें) के लिए उठाया जाता है。

उदाहरण

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">नेविगेशन बैर टेक्स्ट</span>
  </div>
</nav>

स्वयं प्रयोग करें

कई बार, विशेष रूप से छोटे स्क्रीन पर, आप नेविगेशन लिंक्स को छुपाना चाहते हैं और उनके बदले में एक बटन का उपयोग करना चाहते हैं, जिसे क्लिक करने पर उन्हें दिखाया जाए।

यदि आप एक फ़ॉल्डबैक नेविगेशन बैर बनाना चाहते हैं, तो पहले से सेट की गई class="navbar-toggler"、data-bs-toggle="collapse" और data-bs-target="#thetarget" के बटन के class="collapse navbar-collapse" के <div> एलीमेंट में, बाद में बटन के data-bs-target सम्मिलित id: "thetarget"。

उदाहरण

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-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>
      </ul>
    </div>
  </div>
</nav>

स्वयं प्रयोग करें

सलाह:आप इसे भी हटा सकते हैं: .navbar-expand-md क्लास नेविगेशन बार लिंक को हमेशा छिपाती है और टॉगल बटन को दिखाती है。

ड्रॉपडाउन नेविगेशन बार

नेविगेशन बार में ड्रॉपडाउन मेन्यू रख सकते हैं:

उदाहरण

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">ड्रॉपडाउन मेन्यू</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">लिंक</a></li>
    <li><a class="dropdown-item" href="#">एक और लिंक</a></li>
    <li><a class="dropdown-item" href="#">तीसरा लिंक</a></li>
  </ul>
</li>

स्वयं प्रयोग करें

नेविगेशन बार सूची और बटन

आप नेविगेशन बार में फॉर्म भी शामिल कर सकते हैं:

उदाहरण

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">लिंक</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">लिंक</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">लिंक</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

स्वयं प्रयोग करें

फिक्स्ड स्थिति वाला नेविगेशन बार

नेविगेशन बार भी पृष्ठ के शीर्ष या नीचे फिक्स्ड किया जा सकता है

फिक्स्ड नेविगेशन बार पृष्ठ के स्वतंत्र रूप से गुजरने से निजी स्थिति (शीर्ष या नीचे) में दिखाई देता है

.fixed-top वर्ग नेविगेशन बार को पृष्ठ पर फिक्स्ड रखता हैशीर्ष：

उदाहरण

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

स्वयं प्रयोग करें

कृपया .fixed-bottom वर्ग का उपयोग करके नेविगेशन बार को पृष्ठ के नीचे फिक्स्ड रखें:

उदाहरण

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

स्वयं प्रयोग करें

कृपया इस्तेमाल करें .sticky-top वर्ग नेविगेशन बार गुजरते समय पृष्ठ पर फिक्स्ड/स्थिर रहता हैशीर्ष。

टिप्पणी:इस वर्ग को IE11 और अधिक पुरानी संस्करणों में काम नहीं करता (इसे इसके लिए देखें position:relative）。

उदाहरण

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

स्वयं प्रयोग करें