in English

ناوبەر

بەڵگەنامە و نموونە بۆ سەردێڕی گەشتیاری بەهێز و وەڵامدەرەوەی Bootstrap، navbar. پشتگیری بۆ براندکردن، گەشتکردن، پێوەکراوەکانی داڕمان و زۆر شتی تر لەخۆدەگرێت.

چۆن کاردەکات

لێرەدا ئەو شتانە دەخەینەڕوو کە پێویستە بزانیت پێش ئەوەی دەست بە navbar بکەیت:

  • ناوبارەکان پێویستیان بە پێچانێک هەیە .navbarلەگەڵ .navbar-expand{-sm|-md|-lg|-xl}بۆ پۆلەکانی داڕمانی وەڵامدەرەوە و ڕەنگاوڕەنگ .
  • ناوبارەکان و ناوەڕۆکەکانیان بە شێوازی پێشوەختە شلەن. بەکارهێنانی دەفری ئیختیاری بۆ سنووردارکردنی پانایی ئاسۆیییان.
  • پۆلەکانی سوودمەندی دووری و فلیکسمان بەکاربهێنە بۆ کۆنترۆڵکردنی دووری و ڕێکخستن لەناو navbars.
  • ناوبارەکان بە شێوازی پێشوەختە وەڵامدەرەوەن، بەڵام دەتوانیت بە ئاسانی دەستکارییان بکەیت بۆ ئەوەی ئەوە بگۆڕیت. هەڵسوکەوتی وەڵامدانەوە بەندە بە پێوەکراوەکەی Collapse JavaScript ـمانەوە.
  • ناوبارەکان بە شێوازی پێشوەختە لە کاتی چاپکردندا دەشاردرێنەوە. ناچارکردنیان چاپ بکرێن بە زیادکردنی .d-printبۆ .navbar. سەیری پۆلی سوودمەندی پیشاندانی بکە.
  • دەستڕاگەیشتن بە بەکارهێنانی <nav>توخمێک یان، ئەگەر توخمێکی گشتیتر وەک a بەکاربهێنیت <div>، a زیاد بکە role="navigation"بۆ هەموو ناوبارێک بۆ ئەوەی بە ڕوونی وەک ناوچەیەکی هێما بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان دەستنیشان بکەیت.
کاریگەری ئەنیمەیشنی ئەم پێکهاتەیە وابەستەی prefers-reduced-motionپرسیاری میدیایە. سەیری بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .

ناوەڕۆکی پشتگیریکراو

ناوبارەکان پشتگیرییەکی ناوەکییان لەگەڵدایە بۆ مشتێک پێکهاتەی لاوەکی. بەپێی پێویست لەمانەی خوارەوە هەڵبژێرە:

  • .navbar-brandبۆ ناوی کۆمپانیا، بەرهەم، یان پڕۆژەکەت.
  • .navbar-navبۆ گەشتێکی تەواو بەرز و سووک (لەوانەش پشتگیری بۆ دابەزینەکان).
  • .navbar-togglerبۆ بەکارهێنان لەگەڵ پێوەکراوەکانی داڕمان و هەڵسوکەوتەکانی تری گۆڕینی گەشتکردنمان .
  • .form-inlineبۆ هەر فۆرمێک کۆنتڕۆڵ و کردارێک.
  • .navbar-textبۆ زیادکردنی ڕیزەکانی دەق کە ناوەندی ڕاست بن.
  • .collapse.navbar-collapseبۆ گرووپکردن و شاردنەوەی ناوەڕۆکی navbar بەپێی خاڵی شکاندنی باوک.

لێرەدا نموونەیەک لە هەموو ئەو پێکهاتە لاوەکیانە دەخەینەڕوو کە لە ناوبارێکی وەڵامدەرەوەی ڕووناکی-تەوەرەدا هاتووە کە بە شێوەیەکی ئۆتۆماتیکی لە 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دەتوانرێت The بۆ زۆربەی توخمەکان بەکاربهێنرێت، بەڵام ئەنکر باشترین کاردەکات، چونکە ڕەنگە هەندێک توخم پێویستیان بە پۆلی سوودبەخش یان ستایلە تایبەتمەندەکان هەبێت.

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

بەستەرەکانی گەشتکردن بە ناوبار لەسەر .navهەڵبژاردەکانمان بە پۆلی دەستکاریکەری تایبەت بە خۆیان بنیات دەنرێت و پێویستیان بە بەکارهێنانی پۆلەکانی toggler هەیە بۆ ستایلکردنی وەڵامدەرەوەی دروست. هەروەها گەشتکردن لە ناوبارەکاندا گەشە دەکات بۆ ئەوەی زۆرترین شوێنی ئاسۆیی داگیر بکات بۆ ئەوەی ناوەڕۆکی ناوبارەکانت بە شێوەیەکی پارێزراو ڕێکبخرێت.

دۆخە چالاکەکان-لەگەڵ .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>

وە لەبەر ئەوەی ئێمە پۆلەکان بۆ navsەکانمان بەکاردەهێنین، دەتوانیت بە تەواوی خۆت لە رێبازی بنەمای لیست بەدوور بگرێت ئەگەر حەزت لێیە.

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

توخمە منداڵەکانی دەستبەجێی .navbarبەکارهێنانی flex 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>

دەق

ڕەنگە ناوبارەکان بە یارمەتی .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>

ڕەنگەکانی ڕەنگەکان

تەوەرکردنی navbar هەرگیز ئاسانتر نەبووە بەهۆی تێکەڵکردنی پۆلەکانی تەوەرکردن و 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>

دەفرەکان

هەرچەندە پێویست نییە، بەڵام دەتوانیت ناوبارێک لە a بپێچیتەوە .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 ـەکەتدایە، پادکردنی ئاسۆیی لە خاڵەکانی شکاندنی کەمتر لە .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>

جێگیرکردن

سوودمەندییەکانی شوێنی ئێمە بەکاربهێنە بۆ دانانی ناوبارەکان لە شوێنی نائیستاتیکدا. لە جێگیر بۆ سەرەوە، جێگیر بۆ خوارەوە، یان چەسپاو بە سەرەوە هەڵبژێرە (لەگەڵ لاپەڕەکەدا دەڕوات تا دەگاتە سەرەوە، پاشان لەوێ دەمێنێتەوە). navbars جێگیرەکان , بەکاردەهێنن 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%ی بەرزی دەرچەی بینین) دەست پێدەکات، بەڵام دەتوانیت ئەوە بە ستایلە ناوخۆییەکان یان تایبەتمەندەکان جێبەجێ بکەیت. لە دەرگا گەورەکاندا کاتێک ناوبارەکە فراوان دەکرێت، ناوەڕۆکەکە وەک ئەوەی لە ناوبارێکی پێشوەختەدا دەردەکەوێت دەردەکەوێت.

تکایە تێبینی بکە کە ئەم هەڵسوکەوتە لەگەڵ کەموکوڕییەکی ئەگەریدا دێت کە 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>

ڕەفتارە وەڵامدەرەوەکان

ناوبارەکان دەتوانن .navbar-toggler, .navbar-collapse, و .navbar-expand{-sm|-md|-lg|-xl}پۆلەکان بەکاربهێنن بۆ دیاریکردنی کەی ناوەڕۆکەکەیان لە پشت دوگمەیەکەوە دەڕوخێت. بە تێکەڵکردن لەگەڵ سوودمەندییەکانی تر، دەتوانیت بە ئاسانی هەڵبژێریت کەی توخمە تایبەتەکان پیشان بدەیت یان بیانشاریتەوە.

بۆ ئەو ناوبارانەی کە هەرگیز ناڕووخێن، .navbar-expandپۆلەکە لەسەر ناوبارەکە زیاد بکە. بۆ ئەو navbarانەی کە هەمیشە دادەخرێن، هیچ .navbar-expandپۆلێک زیاد مەکەن.

تۆگلەر

گۆڕینی ناوبار بە شێوازی پێشوەختە بە چەپ ڕێکدەخرێن، بەڵام ئەگەر شوێن توخمێکی خوشک و برا وەک a بکەون .navbar-brand، ئەوا بە شێوەیەکی ئۆتۆماتیکی ڕیز دەکرێن بۆ لای ڕاستی کۆتایی. پێچەوانەکردنەوەی مارکاپەکەت شوێنی تۆگلەرەکە پێچەوانە دەکاتەوە. لە خوارەوە نموونەی ستایلە جیاوازەکانی toggle دەخەینەڕوو.

بەبێ .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>

کاتێک ئەمە دەکەیت، پێشنیار دەکەین جاڤاسکڕێپتی زیادە بخەیتە ناوەوە بۆ ئەوەی فۆکەسەکە بە شێوەیەکی بەرنامەیی بگوازیتەوە بۆ کۆنتێنەرەکە کاتێک دەکرێتەوە. ئەگەرنا، بەکارهێنەرانی کیبۆرد و بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان بە ئەگەرێکی زۆرەوە بە سەختی دەبن لە دۆزینەوەی ناوەڕۆکی تازە ئاشکراکراو - بە تایبەتی ئەگەر ئەو کۆنتێنەرەی کە کراوەتەوە پێش گۆڕەکەر بێت لە پێکهاتەی بەڵگەنامەکەدا. هەروەها پێشنیار دەکەین دڵنیا بیت لەوەی کە toggler aria-controlsتایبەتمەندیەکەی هەیە، ئاماژە بە idلە کۆنتێنەری ناوەڕۆکەکەدا دەکات. لە ڕووی تیۆریەوە، ئەمە ڕێگە بە بەکارهێنەرانی تەکنەلۆژیای یارمەتیدەر دەدات کە ڕاستەوخۆ لە toggler ەوە باز بدەن بۆ ئەو کۆنتێنەرەی کە کۆنتڕۆڵی دەکات- بەڵام پشتگیری بۆ ئەمە لە ئێستادا تەواو پەچە.