نوبار

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

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

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

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

ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

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

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

برانڊ

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

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

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

تصويرن ۾ شامل ڪرڻ .navbar-brandممڪن آهي ته هميشه مناسب انداز ۾ ڪسٽم اسلوب يا افاديت جي ضرورت هجي. هتي ڪجهه مثال آهن ڏيکارڻ لاء.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

نيو

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

فعال رياستون - سان .active- موجوده صفحي کي ظاهر ڪرڻ لاء سڌو سنئون لاڳو ڪري سگھجي ٿو .nav-links يا انهن جي فوري والدين .nav-itemتي.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

فارم

نيوبار جي اندر مختلف فارم ڪنٽرول ۽ اجزاء رکو .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

ان پٽ گروپ پڻ ڪم ڪن ٿا:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

.navbar-expand{-sm|-md|-lg|-xl}جڏهن ڪنٽينر توهان جي نيوبار جي اندر هوندو آهي، ان جي افقي پيڊنگ توهان جي مخصوص طبقي کان گهٽ بريڪ پوائنٽس تي هٽايو ويندو آهي . اهو يقيني بڻائي ٿو ته جڏهن توهان جي نيوبار ختم ٿي وئي آهي ته اسان هيٺين وييوپورٽس تي غير ضروري طور تي پيڊنگ تي ٻيڻو نه ڪري رهيا آهيون.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

ڇڪڻ

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

جوابي رويي

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

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

ٽوگل ڪندڙ

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

خارجي مواد

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

ختم ٿيل مواد

نيوبار برانڊ ذريعي ٽوگل قابل.

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

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