Source

نوبار

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

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

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

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

هڪ مثال لاءِ پڙهو ۽ سپورٽ ٿيل ذيلي اجزاء جي فهرست.

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

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#">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.1/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.1/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" href="#">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>

فوري طور تي ٻارن جي عناصر .navbarاستعمال ۾ flex ترتيب ۽ ڊفالٽ ٿيندو justify-content: 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ھڪڙي صفحي تي ھڪڙو نيوبار لپي سگھو ٿا ان کي مرڪز ڪرڻ لاءِ يا ھڪڙي کي شامل ڪري سگھوٿا صرف ھڪڙي مقرر ٿيل يا جامد مٿين نيوبار جي مواد کي مرڪز ڪرڻ لاءِ .

<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>

جوابي رويي

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

نيوبارز لاءِ جيڪي ڪڏهن به ختم نه ٿين، نيوبار .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" href="#">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" href="#">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" href="#">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>

خارجي مواد

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

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <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>