Source

Навбар

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

Како то ради

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

Траке за навигацију захтевају премотавање .navbarса .navbar-expand{-sm|-md|-lg|-xl}за брзо сажимање и класе шеме боја .
Навбари и њихов садржај су подразумевано течни. Користите опционе контејнере да ограничите њихову хоризонталну ширину.
Користите наше класе за размак и флексибилност за контролу размака и поравнања унутар навигационих трака.
Траке за навигацију подразумевано одговарају, али можете их лако модификовати да бисте то променили. Реакционо понашање зависи од нашег додатка за скупи ЈаваСцрипт.
Траке за навигацију су подразумевано скривене приликом штампања. Присилите да се штампају додавањем .d-printу .navbar. Погледајте класу услужних програма за приказ .
Обезбедите приступачност коришћењем <nav>елемента или, ако користите генеричнији елемент као што је <div>, додајте а role="navigation"на сваку навигациону траку да бисте је експлицитно идентификовали као оријентирну област за кориснике помоћних технологија.

Читајте даље за пример и листу подржаних подкомпоненти.

Подржани садржај

Навбари долазе са уграђеном подршком за неколико подкомпоненти. По потреби изаберите од следећег:

.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="#">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.1/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.1/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" href="#">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="#">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: 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, што значи да су извучене из нормалног тока ДОМ-а и могу захтевати прилагођени ЦСС (нпр. 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класу.

Тогглер

Прекидачи навигационе траке су подразумевано поравнати лево, али ако прате сродни елемент као што је .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="#">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="#">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="#">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>