in English

نوبار

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

څنګه کار کوي

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

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

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

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

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

دا مثال رنګ ( bg-light) او فاصله ( my-2, my-lg-0, mr-sm-0, my-sm-0) د کارونې ټولګي کاروي.

برانډ

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

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

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

د عکسونو اضافه کول .navbar-brandاحتمال لري تل د مناسب اندازې لپاره دودیز سټایلونو یا اسانتیاو ته اړتیا ولري. دلته د ښودلو لپاره ځینې مثالونه دي.

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

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

فعال حالتونه — سره .active— د دې لپاره چې اوسنی مخ په مستقیم ډول په .nav-links یا د دوی سمدستي والدینو ته پلي شي .nav-item.

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

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

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

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

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

فورمې

مختلف فارم کنټرولونه او اجزاوې په نیوبار کې د سره ځای په ځای کړئ .form-inline.

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

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

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

د ننوتلو ګروپونه هم کار کوي:

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

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

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

متن

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

د رنګ سکیمونه

د نوبار تیم کول هیڅکله د تیمینګ ټولګیو او background-colorاسانتیاو ترکیب څخه اسانه ندي. .navbar-lightد روښانه شالید رنګونو سره د کارولو لپاره ، یا .navbar-darkد تیاره شالید رنګونو لپاره غوره کړئ . بیا، د .bg-*اسانتیاوو سره تنظیم کړئ.

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

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

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

کانټینرونه

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

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

کله چې کانټینر ستاسو په نیوبار کې وي، افقی پیډینګ ستاسو د ټاکل شوي .navbar-expand{-sm|-md|-lg|-xl}ټولګي څخه ټیټ بریک پواینټ کې لرې کیږي. دا ډاډ ورکوي چې موږ په غیر ضروري ډول په ټیټ لید پورټونو کې پیډینګ دوه چنده نه کوو کله چې ستاسو نیوبار سقوط شوی وي.

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

ځای پرځای کول

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

دا هم په یاد ولرئ چې .sticky-topکارول کیږي position: sticky، کوم چې په هر براوزر کې په بشپړ ډول نه ملاتړ کیږي .

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

سکرول کول

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

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

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

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

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

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

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

ټګګر

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

بهرنۍ محتوا

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

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

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