in English

Navbar

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

Како работи

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

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

Врските за навигација на 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">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>

Контејнери

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

Одговорни однесувања

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

Кога го правите ова, препорачуваме да вклучите дополнителен JavaScript за да го преместите фокусот програмски во контејнерот кога ќе се отвори. Во спротивно, корисниците на тастатурата и корисниците на помошните технологии веројатно ќе имаат потешкотии да ја најдат новооткриената содржина - особено ако контејнерот што беше отворен доаѓа пред преклопникот во структурата на документот. Исто така, препорачуваме да бидете сигурни дека менувачот го има aria-controlsатрибутот, покажувајќи на idконтејнерот со содржина. Теоретски, ова им овозможува на корисниците на асистивната технологија да скокаат директно од менувачот до контејнерот што го контролира - но поддршката за ова во моментов е прилично непроменлива.