in English

Навбар

Документација и примери за Боотстрап-ово моћно, прилагодљиво навигационо заглавље, навигациону траку. Укључује подршку за брендирање, навигацију, додатак за скупљање и још много тога.

Како то ради

Ево шта треба да знате пре него што почнете да користите навигациону траку:

Траке за навигацију захтевају премотавање .navbarса .navbar-expand{-sm|-md|-lg|-xl}за брзо сажимање и класе шеме боја .
Траке за навигацију и њихов садржај су подразумевано течни. Користите опционе контејнере да ограничите њихову хоризонталну ширину.
Користите наше класе за размак и флексибилност за контролу размака и поравнања унутар навигационих трака.
Траке за навигацију подразумевано одговарају, али можете их лако модификовати да бисте то променили. Реакционо понашање зависи од нашег додатка за скупи ЈаваСцрипт.
Траке за навигацију су подразумевано скривене приликом штампања. Присилите да се штампају додавањем .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="#" 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>

Нав

Везе за навигацију Навбар-а се заснивају на нашим .navопцијама са сопственом класом модификатора и захтевају употребу преклопних класа за правилан реагујући стил. Навигација у навигационим тракама ће такође расти да би заузела што је могуће више хоризонталног простора како би садржај навигационе траке био безбедно поравнат.

Активна стања—са—за .activeозначавање тренутне странице могу се применити директно на .nav-linkс или на њихов непосредни родитељ .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>

Текст

Траке за навигацију могу да садрже делове текста уз помоћ .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, што значи да су извучене из нормалног тока ДОМ-а и могу захтевати прилагођени ЦСС (нпр. 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>

Респонсиве понашања

Траке за навигацију могу да користе .navbar-toggler, .navbar-collapseи .navbar-expand{-sm|-md|-lg|-xl}класе да одреде када се њихов садржај скупља иза дугмета. У комбинацији са другим услужним програмима, лако можете изабрати када желите да прикажете или сакријете одређене елементе.

За навигационе траке које се никада не слажу, додајте .navbar-expandкласу на навигациону траку. За навигационе траке које се увек слажу, немојте додавати ниједну .navbar-expandкласу.

Тогглер

Прекидачи навигационе траке су подразумевано поравнати лево, али ако прате сродни елемент као што је .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контејнер садржаја. У теорији, ово омогућава корисницима помоћне технологије да пређу директно са прекидача на контејнер који контролише – али подршка за ово је тренутно прилично неуједначена.