مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

نوبار

Bootstrap جي طاقتور، جوابي نيويگيشن هيڊر، نيوبار لاءِ دستاويز ۽ مثال. برانڊنگ، نيويگيشن ۽ وڌيڪ لاءِ سپورٽ شامل آهي، بشمول اسان جي ڪليپشن پلگ ان لاءِ سپورٽ.

اهو ڪيئن ڪم ڪري ٿو

نيوبار سان شروع ڪرڻ کان پهريان توهان کي ڄاڻڻ جي ضرورت آهي:

  • نيوبارز کي ريپنگ .navbarسان گڏ .navbar-expand{-sm|-md|-lg|-xl|-xxl}جواب ڏيڻ واري ڪلپسنگ ۽ رنگ اسڪيم ڪلاس جي ضرورت هوندي آهي.
  • Navbars ۽ انهن جو مواد ڊفالٽ طور تي سيال آهن. مختلف طريقن سان انهن جي افقي ويڪر کي محدود ڪرڻ لاء ڪنٽينر کي تبديل ڪريو .
  • اسان جي اسپيسنگ ۽ فليڪس يوٽيلٽي ڪلاس استعمال ڪريو نيوبارز اندر اسپيسنگ ۽ الائنمينٽ کي ڪنٽرول ڪرڻ لاءِ.
  • Navbars ڊفالٽ طور تي جوابدار آھن، پر توھان انھن کي تبديل ڪرڻ لاءِ آساني سان تبديل ڪري سگھو ٿا. جوابي رويي جو دارومدار اسان جي ڪليپس جاوا اسڪرپٽ پلگ ان تي آهي.
  • هڪ عنصر استعمال ڪندي پهچ کي يقيني بڻايو <nav>، يا، جيڪڏهن وڌيڪ عام عنصر استعمال ڪري، جيئن ته <div>، هر نيوبار ۾ هڪ شامل ڪريو role="navigation"ته جيئن ان کي مددگار ٽيڪنالاجي جي استعمال ڪندڙن لاءِ هڪ تاريخي علائقي طور واضح طور سڃاڻي سگهجي.
  • aria-current="page"موجوده صفحي لاءِ استعمال ڪندي موجوده شيءِ کي ظاھر ڪريو يا aria-current="true"ھڪڙي سيٽ ۾ موجوده شيءِ لاءِ.
ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

حمايت ٿيل مواد

Navbars ھڪڙي ذيلي اجزاء جي ھڪڙي ٺاھيل سپورٽ سان گڏ ايندا آھن. ضرورت مطابق ھيٺين مان چونڊيو:

  • .navbar-brandتوهان جي ڪمپني، پراڊڪٽ، يا پروجيڪٽ جو نالو.
  • .navbar-navمڪمل اونچائي ۽ ٿلهي نيويگيشن لاءِ (بشمول ڊراپ ڊائونز لاءِ سپورٽ).
  • .navbar-togglerاسان جي کولڻ واري پلگ ان ۽ ٻين نيويگيشن ٽوگلنگ رويي سان استعمال ڪرڻ لاءِ.
  • ڪنهن به فارم ڪنٽرول ۽ ڪارناما لاء Flex ۽ spacing افاديت.
  • .navbar-textمتن جي عمودي مرڪزي تارن کي شامل ڪرڻ لاءِ.
  • .collapse.navbar-collapseوالدين بريڪ پوائنٽ طرفان نيوبار مواد کي گروپ ڪرڻ ۽ لڪائڻ لاءِ.
  • هڪ اختياري شامل ڪريو .navbar-scrollسيٽ ڪرڻ لاءِ max-height۽ وڌايل نيوبار مواد اسڪرول ڪريو .

ھتي ھڪڙو مثال آھي سڀني ذيلي اجزاء جو ھڪڙو جوابي روشني واري نيوبار ۾ شامل آھي جيڪو خودڪار طور تي lg(وڏي) بريڪ پوائنٽ تي ختم ٿي ويندو آھي.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

هي مثال پس منظر ( bg-light) ۽ اسپيسنگ ( my-2, my-lg-0, me-sm-0, my-sm-0) يوٽيلٽي ڪلاس استعمال ڪري ٿو.

برانڊ

اڪثر عناصرن تي لاڳو ٿي .navbar-brandسگھي ٿو، پر ھڪڙو لنگر بھترين ڪم ڪري ٿو، جيئن ڪجھ عناصر کي يوٽيلٽي ڪلاس يا ڪسٽم اسلوب جي ضرورت پوندي.

متن

.navbar-brandڪلاس سان گڏ ھڪڙو عنصر اندر پنھنجو متن شامل ڪريو .

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

تصوير

توهان متن جي اندر اندر تبديل ڪري سگهو ٿا .navbar-brandهڪ سان <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

تصوير ۽ متن

توھان پڻ استعمال ڪري سگھوٿا ڪجھ اضافي افاديتون ھڪڙي تصوير ۽ متن شامل ڪرڻ لاءِ ساڳئي وقت. .d-inline-blockجي اضافي ۽ .align-text-topتي نوٽ ڪريو <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Navbar نيويگيشن لنڪس اسان جي .navاختيارن تي ٺاهيندا آهن انهن جي پنهنجي ترميمي طبقي سان ۽ مناسب جوابي اسٽائلنگ لاءِ ٽوگلر ڪلاس جي استعمال جي ضرورت آهي. نيويگيشن ۾ نيويگيشن به وڌندي وڌندي وڌندي وڌ کان وڌ افقي جاء تي قبضو ڪرڻ لاءِ توهان جي نيوبار مواد کي محفوظ طور تي ترتيب ۾ رکڻ لاءِ.

موجوده صفحي کي ظاهر ڪرڻ لاءِ .activeڪلاس شامل ڪريو ..nav-link

مھرباني ڪري نوٽ ڪريو ته توھان کي پڻ شامل ڪرڻ گھرجي aria-currentفعال تي خصوصيت .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

۽ ڇاڪاڻ ته اسان اسان جي نيون لاءِ ڪلاس استعمال ڪندا آهيون، جيڪڏهن توهان چاهيو ته فهرست تي ٻڌل طريقي کان پاسو ڪري سگهو ٿا.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

توھان پڻ استعمال ڪري سگھو ٿا ڊراپ ڊائونز پنھنجي نيوبار ۾. ڊراپ ڊائون مينيو کي پوزيشن لاءِ ريپنگ عنصر جي ضرورت هوندي آهي، تنهن ڪري پڪ ڪريو ته الڳ ۽ نيسٽ ٿيل عنصرن لاءِ استعمال ڪريو .nav-item۽ .nav-linkجيئن هيٺ ڏيکاريل آهي.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

فارم

نيوبار ۾ مختلف فارم ڪنٽرول ۽ اجزاء رکو:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

فوري طور تي ٻار جي عناصر .navbarflex layout جو استعمال ڪريو ۽ ڊفالٽ ۾ ٿيندو justify-content: space-between. هن رويي کي ترتيب ڏيڻ جي ضرورت مطابق اضافي فليڪس افاديت استعمال ڪريو.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ان پٽ گروپ پڻ ڪم ڪن ٿا. جيڪڏهن توهان جو نيوبار هڪ مڪمل فارم آهي، يا گهڻو ڪري هڪ فارم، توهان <form>عنصر کي ڪنٽينر طور استعمال ڪري سگهو ٿا ۽ ڪجهه HTML محفوظ ڪري سگهو ٿا.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

مختلف بٽڻن کي سپورٽ ڪيو ويو آھي انھن نيوبار فارمن جي حصي طور، پڻ. اهو پڻ هڪ عظيم ياد ڏياريندڙ آهي ته عمودي ترتيب واري افاديت مختلف سائز جي عناصر کي ترتيب ڏيڻ لاء استعمال ڪري سگهجي ٿي.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

متن

Navbars جي مدد سان متن جي بٽس تي مشتمل ٿي سگھي ٿو .navbar-text. هي ڪلاس متن جي تارن لاءِ عمودي ترتيب ۽ افقي فاصلي کي ترتيب ڏئي ٿو.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

ضرورت مطابق ٻين اجزاء ۽ افاديت سان ملائي ۽ ملائي.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

رنگ اسڪيمون

نيوبار کي ترتيب ڏيڻ ڪڏهن به آسان نه رهيو آهي تهمنگ ڪلاس ۽ يوٽيلٽيز جي ميلاپ جي مهرباني background-color. .navbar-lightھلڪي پس منظر رنگن سان استعمال ڪرڻ لاءِ، يا .navbar-darkاونداھي پس منظر رنگن لاءِ چونڊيو . پوء، .bg-*افاديت سان ترتيب ڏيو.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

ڪنٽينر

جيتوڻيڪ اهو گهربل نه آهي، توهان .containerهڪ صفحي تي مرڪز ۾ نيوبار لپي سگهو ٿا- جيتوڻيڪ نوٽ ڪريو ته هڪ اندروني ڪنٽينر اڃا به گهربل آهي. يا توهان هڪ ڪنٽينر شامل ڪري سگهو ٿا .navbarصرف وچ ۾ هڪ مقرر ٿيل يا جامد مٿين نيوبار جي مواد کي .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

ڪنهن به جوابي ڪنٽينر کي استعمال ڪريو تبديل ڪرڻ لاءِ ته توهان جي نيوبار ۾ مواد ڪيترو وسيع پيش ڪيو وڃي.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

جڳت

نيوبارز کي غير مستحڪم پوزيشن ۾ رکڻ لاءِ اسان جي پوزيشن يوٽيلٽيز استعمال ڪريو. چُوءَ کان مٿاھين ڏانھن، ھيٺين ڏانھن مقرر، يا چوٽيءَ ڏانھن چُپيو (صفحي سان اسڪرول ڪريو جيستائين اھو مٿي تي پھچي، پوءِ اُتي رھي). فڪسڊ نيوبارز استعمال ڪن ٿا position: fixed، مطلب ته اهي DOM جي عام وهڪري مان ڪڍيا ويا آهن ۽ ٻين عناصر سان اوورليپ کي روڪڻ لاءِ ڪسٽم CSS (مثال طور، padding-topتي ) جي ضرورت ٿي سگھي ٿي.<body>

اهو پڻ نوٽ ڪريو ته .sticky-topاستعمال ڪري ٿو position: sticky، جيڪو مڪمل طور تي هر برائوزر ۾ سپورٽ نه آهي .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

ڇڪڻ

شامل ڪريو (يا ٻيو نيويبار ذيلي جزو) .navbar-nav-scroll۾ شامل ڪريو .navbar-navعمودي اسڪرولنگ کي فعال ڪرڻ لاءِ ٽوگليبل مواد اندر ختم ٿيل نيوبار. ڊفالٽ طور، اسڪرولنگ ڪِڪس ان تي 75vh(يا 75٪ ويوپورٽ جي اوچائي) تي، پر توھان ان کي اوور رائڊ ڪري سگھوٿا مقامي CSS ڪسٽم ملڪيت --bs-navbar-heightيا ڪسٽم اسلوب سان. وڏن ڏيئو پورٽن تي جڏهن نيوبار کي وڌايو ويندو، مواد ظاهر ٿيندو جيئن اهو ڊفالٽ نيوبار ۾ ٿئي ٿو.

مهرباني ڪري نوٽ ڪريو ته هي رويو هڪ امڪاني خرابي سان اچي ٿو overflow-جڏهن سيٽنگ overflow-y: auto(هتي مواد کي اسڪرول ڪرڻ جي ضرورت آهي)، overflow-xجي برابر آهي auto، جيڪو ڪجهه افقي مواد کي فصل ڪندو.

ھتي ھڪڙو مثال آھي navbar استعمال ڪندي .navbar-nav-scroll، style="--bs-scroll-height: 100px;"وڌ کان وڌ فاصلي لاءِ ڪجھ اضافي مارجن يوٽيلٽيز سان.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

جوابي رويي

Navbars استعمال ڪري سگھن ٿا .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl}classes اهو طئي ڪرڻ لاءِ جڏهن انهن جو مواد هڪ بٽڻ جي پويان ختم ٿئي ٿو. ٻين افاديت جي ميلاپ ۾، توهان آساني سان چونڊي سگهو ٿا جڏهن ڏيکاريو يا لڪايو خاص عناصر.

نيوبارز لاءِ جيڪي ڪڏهن به ختم نه ٿين، نيوبار .navbar-expandتي ڪلاس شامل ڪريو. نيوبارز لاءِ جيڪي هميشه ختم ٿين ٿا، ڪو به .navbar-expandڪلاس شامل نه ڪريو.

ٽوگل ڪندڙ

Navbar ٽوگلرز ڊفالٽ طور کاٻي پاسي سان ترتيب ڏنل آھن، پر جيڪڏھن اھي ھڪڙي ڀائر عنصر جي پيروي ڪندا آھن .navbar-brand، اھي پاڻمرادو بلڪل ساڄي طرف ٺھي ويندا. توھان جي مارڪ اپ کي ريورس ڪرڻ سان ٽگلر جي جڳھ کي ريورس ڪندو. هيٺيان مختلف ٽوگل طرز جا مثال آهن.

ننڍي برڪ پوائنٽ تي نه .navbar-brandڏيکاريل آهي:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

کاٻي پاسي ڏيکاريل برانڊ نالي سان ۽ ساڄي پاسي ٽوگلر:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

کاٻي پاسي ٽوگلر ۽ ساڄي پاسي برانڊ نالو:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

خارجي مواد

ڪڏهن ڪڏهن توهان استعمال ڪرڻ چاهيو ٿا کولڻ پلگ ان کي ٽرگر ڪرڻ لاءِ هڪ ڪنٽينر عنصر انهي مواد لاءِ جيڪو ساختي طور تي .navbar. ڇو ته اسان جو پلگ ان ڪم ڪري ٿو id۽ data-bs-targetملاپ تي، اهو آساني سان ٿي چڪو آهي!

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

جڏھن توھان ھي ڪندا آھيو، اسان سفارش ڪريون ٿا اضافي جاوا اسڪرپٽ شامل ڪرڻ لاءِ فوڪس پروگرام طور ڪنٽينر ڏانھن منتقل ڪرڻ لاءِ جڏھن اھو کوليو وڃي. ٻي صورت ۾، ڪيبورڊ استعمال ڪندڙ ۽ مددگار ٽيڪنالاجي جي استعمال ڪندڙن کي نئين ظاهر ڪيل مواد کي ڳولڻ ۾ مشڪل وقت ٿيندو - خاص طور تي جيڪڏهن ڪنٽينر جيڪو کوليو ويو هو دستاويز جي جوڙجڪ ۾ ٽوگلر کان اڳ اچي. اسان پڻ پڪ ڪرڻ جي صلاح ڏيو ٿا ته ٽوگلر کي خاصيت آهي، مواد جي ڪنٽينر aria-controlsڏانهن اشارو ڪندي . idنظريي ۾، هي مددگار ٽيڪنالاجي استعمال ڪندڙن کي اجازت ڏئي ٿو ته سڌو ٽوگلر کان ڪنٽينر ڏانهن ٽپو ڏئي جيڪو اهو ڪنٽرول ڪري ٿو- پر هن جي حمايت هن وقت ڪافي خراب آهي.

آفڪينوس

آف ڪينوس پلگ ان سان پنھنجي وسعت ۽ ٽوڙڻ واري نيوبار کي آف ڪينوس دراز ۾ تبديل ڪريو. اسان ٻنهي آف ڪينوس ڊفالٽ اسلوب کي وڌايو ۽ .navbar-expand-*متحرڪ ۽ لچڪدار نيويگيشن سائڊبار ٺاهڻ لاءِ اسان جا ڪلاس استعمال ڪريون.

هيٺ ڏنل مثال ۾، هڪ آفڪينوس نيوبار ٺاهڻ لاءِ جيڪو هميشه سڀني بريڪ پوائنٽس تي ختم ٿي ويندو آهي، .navbar-expand-*ڪلاس کي مڪمل طور تي ختم ڪريو.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

هڪ آفڪينوس نيوبار ٺاهڻ لاءِ جيڪو هڪ مخصوص بريڪ پوائنٽ تي عام نيوبار ۾ وڌندو هجي جهڙوڪ lg، استعمال ڪريو .navbar-expand-lg.

<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

ساس

متغير

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;
$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

لوپ

جوابي نيوبار expand/colapse classes (مثال طور، .navbar-expand-lg) نقشي سان گڏ ٿيل آهن $breakpoints۽ ان ۾ لوپ ذريعي ٺاهيا ويا آهن scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}