Source

نوبار

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

څنګه کار کوي

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

  • 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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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.4/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.4/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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

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

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

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

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

فورمې

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

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

د ماشومانو سمدستي عناصر .navbarد فلیکس ترتیب څخه کار اخلي او په ډیفالټ کې به وي 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 منځپانګې په منځ کې دننه اضافه کړئ .

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

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

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

ځای پرځای کول

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

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

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

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

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

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

ټګګر

د نوبار ټګلرز د ډیفالټ له مخې کیڼ اړخ ته تنظیم شوي ، مګر که دوی د ورور عنصر تعقیب کړي لکه 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

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

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

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

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

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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>

بهرنۍ محتوا

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

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