Source

Navbar

Документација и примери за моќното, одговорно заглавие за навигација на Bootstrap, лентата за навигација. Вклучува поддршка за брендирање, навигација и повеќе, вклучувајќи поддршка за нашиот приклучок за колапс.

Како работи

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

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

Прочитајте за пример и листа на поддржани подкомпоненти.

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

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="#">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.0/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.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

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="#">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" 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>

Порамнете ја содржината на вашите вградени формулари со комуналните услуги по потреба.

<nav class="navbar navbar-light bg-light justify-content-between">
  <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>

Контејнери

Иако не е потребно, можете да ја завиткате лентата за навигација во a .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класа.

Преклопник

Вклучувачите на Navbar стандардно се порамнети лево, но доколку следат братски елемент како .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">
      <h4 class="text-white">Collapsed content</h4>
      <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>