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

نوبار

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

هن صفحي تي

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

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

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

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

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

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

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

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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) ۽ اسپيسنگ ( me-auto, mb-2, mb-lg-0, me-2) يوٽيلٽي ڪلاس استعمال ڪري ٿو.

برانڊ

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

متن

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

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

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

تصوير

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

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

تصوير ۽ متن

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

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

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

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

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

html 
<nav class="navbar navbar-expand-lg 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>

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

html 
<nav class="navbar navbar-expand-lg 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جيئن هيٺ ڏيکاريل آهي.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <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>

فارم

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

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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. هن رويي کي ترتيب ڏيڻ جي ضرورت مطابق اضافي فليڪس افاديت استعمال ڪريو.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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 محفوظ ڪري سگهو ٿا.

html 
<nav class="navbar 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>

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

html 
<nav class="navbar 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. هي ڪلاس متن جي تارن لاءِ عمودي ترتيب ۽ افقي فاصلي کي ترتيب ڏئي ٿو.

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

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

html 
<nav class="navbar navbar-expand-lg 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>

رنگ اسڪيمون

v5.2.0 ۾ نئون: Navbar Theming هاڻي CSS متغيرن جي ذريعي طاقتور آهي ۽ .navbar-lightختم ڪيو ويو آهي. CSS متغيرن تي لاڳو ٿين ٿا .navbar، ڊفالٽ ڪرڻ لاءِ ”روشني“ جي ظهور ۾، ۽ ان سان ختم ڪري سگھجي ٿو .navbar-dark.

بوٽ اسٽريپ جي ساس ۽ سي ايس ايس متغيرن جي ميلاپ جي مهرباني Navbar موضوعات اڳي کان وڌيڪ آسان آهن. ڊفالٽ اسان جو ”لائيٽ نيوبار“ آھي ھلڪي پس منظر جي رنگن سان استعمال ڪرڻ لاءِ، پر توھان پڻ لاڳو ڪري سگھو ٿا .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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

ڪنٽينر

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

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

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

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

جڳت

نيوبارز کي غير جامد پوزيشن ۾ رکڻ لاءِ اسان جي پوزيشن يوٽيلٽيز استعمال ڪريو. فڪسڊ مان چونڊيو چوٽيءَ تائين، ٺھيل ھيٺان ڏانھن، مٿي ڏانھن چُپيو (صفحي سان طومار ڪريو جيستائين اھو مٿي تي پھچي، پوءِ اتي رھي)، يا ھيٺ لھي (صفحي سان گڏ اسڪرول ڪريو جيستائين اھو ھيٺ نه پھچي، پوءِ رھيو. اتي).

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

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

ڇڪڻ

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

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

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

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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, ۽ .navbar-expand{-sm|-md|-lg|-xl|-xxl}ڪلاسز کي طئي ڪرڻ لاءِ جڏهن انهن جو مواد هڪ بٽڻ جي پويان ختم ٿي وڃي. ٻين افاديت جي ميلاپ ۾، توهان آساني سان چونڊي سگهو ٿا جڏهن ڏيکاريو يا لڪايو خاص عناصر.

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

ٽوگل ڪندڙ

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

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

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

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

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

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

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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ملاپ تي، اهو آساني سان ٿي چڪو آهي!

html 
<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-*مڪمل طور تي ڪلاس کي ختم ڪريو.

html 
<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <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" role="search">
          <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-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-dark۽ شامل ڪريون , to the .bg-dark, to , and to مناسب اسٽائل لاءِ اونداهي آفڪينوس سان..navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

Bootstrap جي ترقي يافته CSS متغير جي نقطي جي حصي جي طور تي، navbars ھاڻي مقامي CSS متغير استعمال ڪن ٿا .navbarوڌايل حقيقي وقت جي ڪسٽمائيزيشن لاءِ. CSS متغيرن لاءِ قيمتون Sass ذريعي سيٽ ڪيون ويون آهن، تنهن ڪري Sass ڪسٽمائيزيشن اڃا به سپورٽ ٿيل آهي.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

ڪجهه اضافي CSS متغير پڻ موجود آهن .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

CSS متغيرن ذريعي ڪسٽمائيزيشن کي ڪلاس ۾ ڏسي سگھجي ٿو .navbar-darkجتي اسان نقل ڪيل CSS چونڊيندڙن کي شامل ڪرڻ کان سواءِ مخصوص قدرن کي اوور رائيڊ ڪندا آهيون.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

سس متغير

سڀني نيوبارز لاءِ متغير:

$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-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-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-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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

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