باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
Check
in English

ناوبەر

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

لەم پەیجەدا

چۆن کاردەکات

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

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

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

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

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

ئەم نموونەیە پۆلەکانی سوودمەندی background ( bg-light) و spacing ( me-auto, mb-2, mb-lg-0, ) بەکاردەهێنێت.me-2

براند

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

دەق

دەقەکەت لەناو توخمێکدا لەگەڵ .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>

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

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

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

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>

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

گروپەکانی هاتنەژوورەوەش کاردەکەن. ئەگەر navbar ـەکەت تەواوی فۆڕمێک بێت، یان زیاتر فۆڕمێک بێت، دەتوانیت <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>

دەق

ڕەنگە ناوبارەکان بە یارمەتی .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 بە گۆڕاوەکانی CSS بەهێز دەکرێت و .navbar-lightبەکارنەهێنراوە. گۆڕاوەکانی CSS بۆ , جێبەجێ دەکرێن .navbar، بە پێشوەختە بۆ دەرکەوتنی “ڕووناکی”، و دەتوانرێت بە .navbar-dark.

تێمەکانی Navbar لە جاران ئاسانترن بەهۆی تێکەڵکردنی گۆڕاوەکانی Sass و CSS ی Bootstrap. بەپێی پێشوەختە “light 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>

دەفرەکان

هەرچەندە پێویست نییە، دەتوانیت ناوبارێک لە a بپێچیتەوە .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>

جێگیرکردن

سوودمەندییەکانی شوێنی ئێمە بەکاربهێنە بۆ دانانی ناوبارەکان لە شوێنی نائیستاتیکدا. لە جێگیرکراو بۆ سەرەوە، جێگیرکراو بە خوارەوە، چەسپاو بە سەرەوە (سکڕۆڵ لەگەڵ لاپەڕەکە دەکات تا دەگاتە سەرەوە، پاشان لەوێ دەمێنێتەوە)، یان چەسپاو بە خوارەوە هەڵبژێرە (لەگەڵ لاپەڕەکەدا دەچڕێت تا دەگاتە خوارەوە، پاشان دەمێنێتەوە). لەوێ).

navbars جێگیرەکان , بەکاردەهێنن 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%ی بەرزی دەرگای بینین) دەست پێدەکات، بەڵام دەتوانیت ئەوە بە تایبەتمەندی تایبەتمەندی 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>

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

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

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

تۆگلەر

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

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

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

ئۆفکانڤاس

ناوباری فراوان و داڕمانەکەت بگۆڕە بۆ کشۆیەکی ئۆف کانڤاس بە پێکهاتەی ئۆف کانڤاس . ئێمە هەردوو شێوازی پێشوەختەی ئۆفکانڤاس درێژ دەکەینەوە و .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و .bg-darkبۆ .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>

CSS

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS ی پەرەسەندوو لە Bootstrap، ئێستا 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ەکان:

$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 تاریک :

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

لوپی ساس

پۆلەکانی فراوانکردن/داڕمانی وەڵامدەرەوەی navbar (بۆ نموونە، .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;
          }
        }
      }
    }
  }
}