Source

Навбар

Ҳуҷҷатҳо ва мисолҳо барои сарлавҳаи навигатсионии пурқувват ва ҷавобгӯи Bootstrap, навбар. Дастгирии брендинг, паймоиш ва ғайраро дар бар мегирад, аз ҷумла дастгирии плагини шикастани мо.

Он чӣ гуна кор мекунад

Ин аст он чизе ки шумо бояд пеш аз оғози кор бо навор донед:

Навбарҳо барои синфҳои реаксияи рангҳо ва реаксияи реаксия печонидани онро .navbarталаб мекунанд ..navbar-expand{-sm|-md|-lg|-xl}
Навбарҳо ва мундариҷаи онҳо ба таври нобаёнӣ моеъ мебошанд. Барои маҳдуд кардани паҳнои уфуқии онҳо контейнерҳои ихтиёриро истифода баред .
Барои назорати фосила ва ҳамворкунӣ дар дохили наворҳо синфҳои фосилавӣ ва фасеҳро истифода баред .
Навбарҳо бо нобаёнӣ ҷавоб медиҳанд, аммо шумо метавонед онҳоро ба осонӣ тағир диҳед, то онро тағир диҳед. Рафтори ҷавобӣ аз плагини Colapse JavaScript-и мо вобаста аст.
Навбарҳо ҳангоми чоп ба таври нобаёнӣ пинҳон мешаванд. Маҷбур кунед, ки онҳоро бо илова .d-printкардани .navbar. Синфи утилитаи намоишро бубинед .
Бо истифода аз як унсур дастрасиро таъмин кунед <nav>ё агар унсури умумӣтаре ба мисли , истифода шавад, ба ҳар як навор <div>илова кунед, role="navigation"то онро ба таври возеҳ ҳамчун минтақаи муҳим барои корбарони технологияҳои ёрирасон муайян кунед.

Таъсири аниматсияи ин ҷузъ аз prefers-reduced-motionдархости медиа вобаста аст. Ба қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .

Барои мисол ва рӯйхати зеркомпонентҳои дастгирӣшаванда хонед.

Мазмуни дастгирӣ

Навбарҳо бо дастгирии дарунсохт барои як чанд зеркомпонентҳо меоянд. Ҳангоми зарурат аз инҳо интихоб кунед:

.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имконоти мо бо синфи тағирдиҳандаи худ сохта мешаванд ва истифодаи синфҳои гузаришро барои ороиши дурусти мувофиқ талаб мекунанд. Навигатсия дар наворҳо инчунин афзоиш хоҳад ёфт, то ки фазои уфуқӣ то ҳадди имкон ишғол шавад , то мундариҷаи навбарии шумо ба таври бехатар мувофиқат кунад.

Ҳолатҳои фаъол — бо .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>

Матн

Навбарҳо метавонанд битҳои матнро бо ёрии .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>

Рафторҳои ҷавобӣ

Навбарҳо метавонанд .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>

Мазмуни беруна

Баъзан шумо мехоҳед плагини пошхӯриро истифода баред, то мундариҷаи пинҳоншударо дар ҷои дигари саҳифа ангезед. Азбаски плагини мо дар мувофиқ idва data-targetмувофиқ кор мекунад, ин ба осонӣ анҷом дода мешавад!

Collapsed content

Toggleable via the navbar brand.

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