اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
Check
in English

نوبار

د بوټسټریپ ځواکمن ، ځواب ویونکي نیویګیشن سرلیک ، نوبار لپاره اسناد او مثالونه. د برانډینګ ، نیویګیشن او نور ډیر څه لپاره ملاتړ شامل دي ، پشمول زموږ د سقوط پلگ ان لپاره ملاتړ.

په دې پاڼه کې

څنګه کار کوي

دلته هغه څه دي چې تاسو اړتیا لرئ د نوبار سره پیل کولو دمخه پوه شئ:

  • Navbars .navbarد .navbar-expand{-sm|-md|-lg|-xl|-xxl}ځواب ویونکي سقوط او رنګ سکیم ټولګیو لپاره لپاسه اړتیا لري.
  • Navbars او د دوی مینځپانګې په ډیفالټ ډول مایع دي. کانټینر بدل کړئ ترڅو د دوی افقی پلنوالی په مختلفو لارو محدود کړي.
  • زموږ د فاصلو او انعطاف افادیت ټولګي په نیوبارونو کې د فاصلې کنټرول او تنظیم کولو لپاره وکاروئ.
  • Navbars د ډیفالټ لخوا ځواب ویونکي دي، مګر تاسو کولی شئ په اسانۍ سره د دې بدلولو لپاره ترمیم کړئ. ځواب ورکوونکی چلند زموږ د جاواسکریپټ پلگ ان کولپس پورې اړه لري.
  • د یو عنصر په کارولو سره د لاسرسي ډاډ ترلاسه کړئ <nav>یا که چیرې نور عام عنصر وکاروئ لکه a ، په هر نوببار کې <div>a اضافه کړئ ترڅو دا د مرستندویه ټیکنالوژیو کاروونکو لپاره د یوې مهمې سیمې په توګه وپیژندل شي.role="navigation"
  • aria-current="page"د اوسني پاڼې لپاره یا په سیټ کې د اوسني توکي لپاره په کارولو سره اوسنی aria-current="true"توکي په ګوته کړئ.
  • په v5.2.0 کې نوی: نوبارونه د CSS متغیرونو سره تیم کیدی شي چې د .navbarبیس کلاس ته غزیدلی. د اضافي سټایلونو د اضافه کولو پر ځای د CSS متغیرونو د پورته کولو لپاره .navbar-lightله مینځه وړل شوی او بیا لیکل شوی..navbar-dark
د دې برخې د حرکت اغیز د prefers-reduced-motionرسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ .

ملاتړ شوی مواد

Navbars د یو څو فرعي برخو لپاره د جوړ شوي ملاتړ سره راځي. د اړتیا په صورت کې لاندې څخه غوره کړئ:

  • .navbar-brandستاسو د شرکت، محصول، یا پروژې نوم لپاره.
  • .navbar-navد بشپړ لوړوالي او لږ وزن نیویګیشن لپاره (د ډراپ ډاونونو ملاتړ په شمول).
  • .navbar-togglerزموږ د سقوط پلگ ان او نورو نیویګیشن ټوګلینګ چلندونو سره کارولو لپاره.
  • د هر ډول کنټرولونو او کړنو لپاره فلیکس او فاصله اسانتیاوې.
  • .navbar-textد متن عمودی متمرکز تارونو اضافه کولو لپاره.
  • .collapse.navbar-collapseد والدین بریک پوائنټ لخوا د نیوبار مینځپانګې ګروپ کولو او پټولو لپاره.
  • .navbar-scrollد تنظیم کولو لپاره اختیاري اضافه کړئ max-heightاو پراخ شوي نوبار مینځپانګه سکرول کړئ .

دلته د ټولو فرعي برخو مثال دی چې په ځواب ویونکي رڼا تیم شوي نیوبار کې شامل دي چې په اوتومات ډول په lg(لوی) وقفې کې سقوط کوي.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

دا مثال د شاليد ( bg-light) او فاصله ( me-auto, mb-2, mb-lg-0, me-2) د استعمال ټولګي کاروي.

برانډ

دا .navbar-brandپه ډیری عناصرو کې پلي کیدی شي، مګر یو اینکر غوره کار کوي، ځکه چې ځینې عناصر ممکن د کارونې ټولګیو یا دودیز سټایلونو ته اړتیا ولري.

متن

.navbar-brandخپل متن د ټولګي سره په یو عنصر کې اضافه کړئ .

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

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

انځور

تاسو کولی شئ متن د .navbar-brandیو سره بدل کړئ <img>.

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

انځور او متن

تاسو کولی شئ په ورته وخت کې د عکس او متن اضافه کولو لپاره ځینې اضافي اسانتیاوې هم وکاروئ. د . _ .d-inline-block_.align-text-top<img>

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

د Navbar نیویګیشن لینکونه زموږ په .navاختیارونو کې د خپل ترمیم کونکي ټولګي سره رامینځته کوي او د مناسب ځواب ویونکي سټایل لپاره د توګلر ټولګیو کارولو ته اړتیا لري. په navbars کې نیویګیشن به د امکان تر حده د افقی ځای نیولو لپاره وده وکړي ترڅو ستاسو د نیوبار مینځپانګې په خوندي ډول تنظیم شي.

د اوسني پاڼې د ښودلو لپاره .activeټولګي اضافه کړئ ..nav-link

aria-currentمهرباني وکړئ په یاد ولرئ چې تاسو باید په فعال کې خاصیت هم اضافه کړئ .nav-link.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

او ځکه چې موږ زموږ د نیوی لپاره ټولګي کاروو، تاسو کولی شئ د لیست پر بنسټ طریقه په بشپړه توګه مخنیوی وکړئ که تاسو غواړئ.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

تاسو کولی شئ په خپل نیوبار کې د ډراپ ډاونونو څخه هم کار واخلئ. د ډراپ ډاون مینو د موقعیت لپاره د ریپینګ عنصر ته اړتیا لري، نو ډاډه اوسئ چې جلا او ځړول شوي عناصر وکاروئ .nav-itemاو .nav-linkلکه څنګه چې لاندې ښودل شوي.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

فورمې

په نیوبار کې مختلف فارم کنټرولونه او برخې ځای په ځای کړئ:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

سمدستي ماشوم عناصر د .navbarفلیکس ترتیب څخه کار اخلي او په ډیفالټ کې به وي justify-content: space-between. د دې چلند تنظیم کولو لپاره د اړتیا سره سم اضافي فلیکس اسانتیاوې وکاروئ .

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

د ننوتلو ګروپونه هم کار کوي. که ستاسو نوبار ټوله بڼه وي، یا اکثرا یوه بڼه وي، تاسو کولی شئ <form>عنصر د کانټینر په توګه وکاروئ او یو څه HTML خوندي کړئ.

html 
<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

مختلف تڼۍ د دې نوبار فورمو د یوې برخې په توګه هم ملاتړ کیږي. دا یو ښه یادونه هم ده چې د عمودی سمون اسانتیاوې د مختلف اندازې عناصرو د سمون لپاره کارول کیدی شي.

html 
<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

متن

Navbars کېدای شي په مرسته د متن ټوټې ولري .navbar-text. دا ټولګی د متن د تارونو لپاره عمودی ترتیب او افقی فاصله تنظیموی.

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

د اړتیا په صورت کې د نورو اجزاوو او اسانتیاو سره مخلوط او میچ کړئ.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

د رنګ سکیمونه

په v5.2.0 کې نوی: د نوبار تیمنګ اوس د CSS متغیرونو لخوا پرمخ وړل کیږي او .navbar-lightله مینځه وړل شوی. د CSS متغیرات .navbarد "رڼا" ظهور لپاره د ډیفالټ په توګه پلي کیږي، او د .navbar-dark.

د نوبار موضوعات د بوټسټریپ د Sass او CSS متغیرونو ترکیب څخه مننه د هرکله څخه اسانه دي. د روښانه شالید رنګونو سره د کارولو لپاره ډیفالټ زموږ "رڼا نوبار" دی ، مګر تاسو کولی شئ .navbar-darkد تیاره شالید رنګونو لپاره هم غوښتنه وکړئ. بیا، د .bg-*اسانتیاوو سره تنظیم کړئ.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

کانټینرو��ه

که څه هم دا اړینه نه ده، تاسو کولی شئ .containerپه یوه پاڼه کې د مرکزي کولو لپاره یو نوببار لپاس کړئ - که څه هم په یاد ولرئ چې یو داخلي کانټینر لاهم اړین دی. .navbarیا تاسو کولی شئ یوازې د ثابت یا جامد پورتنۍ نیوبار مینځپانګې مینځ ته کولو لپاره دننه یو کانټینر اضافه کړئ .

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

هر ډول ځواب ویونکي کانتینرونه وکاروئ ترڅو بدل کړئ چې ستاسو په نیوبار کې مینځپانګه څومره پراخه ده.

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

ځای پرځای کول

په غیر جامد موقعیتونو کې د نیوبارونو ځای په ځای کولو لپاره زموږ د موقعیت اسانتیاوې وکاروئ. له فکسډ څخه تر پورتنۍ پورې غوره کړئ، لاندې ته ثابت شوی، پورته ته چپک شوی (د پاڼې سره سکرول تر هغه پورې چې پورته ته ورسیږي، بیا هلته پاتې کیږي) یا لاندې ته چپک شوي (د پاڼې سره سکرول تر هغه پورې چې لاندې ته ورسیږي، بیا پاتې کیږي. هلته).

ثابت نیوبارونه کاروي position: fixed، پدې معنی چې دوی د DOM د نورمال جریان څخه ایستل شوي او ممکن د نورو عناصرو سره د مخنیوي لپاره دودیز CSS (د مثال padding-topپه توګه) ته اړتیا ولري.<body>

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

سکرول کول

.navbar-nav-scrollپه یو (یا نور نوبار فرعي برخې) کې اضافه کړئ ترڅو .navbar-navد ړنګ شوي نوبار د بدلولو وړ مینځپانګې کې عمودی سکرول فعال کړئ. د ډیفالټ په واسطه، سکرول کول په 75vh(یا د لید پورټ لوړوالی 75٪) ته ځي، مګر تاسو کولی شئ دا د محلي CSS دودیز ملکیت --bs-navbar-heightیا دودیز سټایلونو سره تکرار کړئ. په لویو لیدونو کې کله چې نیوبار پراخ شي، مینځپانګه به داسې ښکاري لکه څنګه چې په ډیفالټ نیوبار کې وي.

مهرباني وکړئ په یاد ولرئ چې دا چلند د احتمالي نیمګړتیا سره راځي overflow—کله چې ترتیب کول overflow-y: auto(دلته د مینځپانګې سکرول کولو لپاره اړین دي) ، overflow-xد مساوي دی auto، کوم چې به ځینې افقی مینځپانګه کښته کړي.

دلته د غوره فاصلې لپاره د ځینې اضافي حاشیو اسانتیاوو سره د کارولو .navbar-nav-scrollسره د نوبار مثال دی.style="--bs-scroll-height: 100px;"

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ځواب ورکوونکي چلندونه

Navbars کولی شي .navbar-toggler, .navbar-collapse, او .navbar-expand{-sm|-md|-lg|-xl|-xxl}ټولګي وکاروي ترڅو معلومه کړي چې کله د دوی مینځپانګه د تڼۍ شاته سقوط کوي. د نورو اسانتیاوو سره په ترکیب کې، تاسو کولی شئ په اسانۍ سره وټاکئ کله چې ځانګړي عناصر ښکاره یا پټ کړئ.

د نیوبارونو لپاره چې هیڅکله سقوط نه کوي ، نوبار کې .navbar-expandټولګي اضافه کړئ. د نیوبارونو لپاره چې تل سقوط کوي، هیڅ .navbar-expandټولګي مه اضافه کړئ.

ټګګر

د نوبار ټګلرز د ډیفالټ له مخې کیڼ اړخ ته تنظیم شوي ، مګر که دوی د ورور عنصر تعقیب کړي لکه a .navbar-brand، دوی به په اوتومات ډول ښي خوا ته تنظیم شي. ستاسو د مارک اپ بدلول به د ټګلر ځای په ځای کړي. لاندې د مختلف ټګل سټایلونو مثالونه دي.

.navbar-brandپرته له دې چې په کوچني وقفه کې نه ښودل شوي:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

په ښي خوا کې ښودل شوي د برانډ نوم او ښي خوا ته توګلر سره:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

په ښي خوا کې د توګلر او په ښي خوا کې د برانډ نوم سره:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

بهرنۍ محتوا

ځینې ​​​​وختونه تاسو غواړئ د سقوط پلگ ان وکاروئ ترڅو د مینځپانګې لپاره د کانټینر عنصر رامینځته کړي چې په ساختماني ډول د .navbar. ځکه چې زموږ پلگ ان په idاو data-bs-targetمیچ کولو کار کوي ، دا په اسانۍ سره ترسره کیږي!

html 
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

کله چې تاسو دا کار کوئ، موږ وړاندیز کوو چې اضافي جاوا سکریپټ شامل کړئ ترڅو تمرکز په پروګرام کې په کانټینر کې حرکت وکړي کله چې دا پرانیستل شي. که نه نو، د کیبورډ کاروونکي او د مرستندویه ټیکنالوژیو کاروونکي به احتمال ولري چې د نوي ښکاره شوي منځپانګې په موندلو کې سخت وخت ولري - په ځانګړې توګه که هغه کانټینر چې پرانیستل شوی وي د سند په جوړښت کې د ټوګلر څخه مخکې راشي. موږ دا هم وړاندیز کوو چې ډاډ ترلاسه کړئ چې توګلر د مینځپانګې کانټینر aria-controlsته په ګوته کول ، ځانګړتیا idلري. په تیوري کې، دا د مرستندویه ټیکنالوژۍ کاروونکو ته اجازه ورکوي چې په مستقیم ډول له ټوګلر څخه هغه کانټینر ته لاړ شي چې دا کنټرولوي – مګر د دې لپاره ملاتړ اوس مهال خورا پیچلی دی.

آفکانوس

خپل پراخیدونکی او نړیدلی نوبار د آف کینوس برخې سره په آف کینوس دراز کې بدل کړئ . موږ دواړه د آف کینوس ډیفالټ سټایلونو ته پراختیا ورکوو او .navbar-expand-*د متحرک او انعطاف وړ نیویګیشن سائډبار جوړولو لپاره زموږ ټولګي وکاروو.

په لاندې مثال کې، د آفکانوس نوبار جوړولو لپاره چې تل په ټولو بریک پوایټونو کې سقوط کیږي، .navbar-expand-*ټولګي په بشپړه توګه پریږدئ.

html 
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

د آف کینوس نوبار جوړولو لپاره چې په یو ځانګړي وقفې کې په نورمال نوبار کې پراخیږي لکه lg، وکاروئ .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

کله چې په تیاره نوبار کې آف کینوس وکاروئ، په یاد ولرئ چې تاسو ممکن د آف کینوس مینځپانګې کې تیاره شالید ته اړتیا ولرئ ترڅو متن د غیرقانوني کیدو مخه ونیسي. په لاندې مثال کې، موږ د تیاره آف کینوس سره د مناسب سټایل کولو لپاره ، ته ، ته ، او .navbar-darkته .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>

سی ایس ایس

متغیرات

په v5.2.0 کې اضافه شوی

د بوټسټریپ د پرمختللي CSS متغیر تګلارې د یوې برخې په توګه، نوبارز اوس د .navbarریښتیني وخت اصلاح کولو لپاره ځایی CSS متغیرونه کاروي. د 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)};

د Sass متغیرات

د ټولو navbars لپاره تغیرات:

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

د تیاره نوبار لپاره تغیرات :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

ساس لوپ

ځواب ورکوونکی نوبار پراخول / سقوط ټولګي (لکه، .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;
          }
        }
      }
    }
  }
}