in English

Навигационна лента

Документация и примери за мощната, бърза навигация на Bootstrap, навигационната лента. Включва поддръжка за брандиране, навигация, плъгин за свиване и др.

Как работи

Ето какво трябва да знаете, преди да започнете с навигационната лента:

  • Навигационните ленти изискват обвиване .navbarс класове .navbar-expand{-sm|-md|-lg|-xl}за адаптивно свиване и цветова схема .
  • Навигационните ленти и тяхното съдържание са плавни по подразбиране. Използвайте незадължителни контейнери, за да ограничите хоризонталната им ширина.
  • Използвайте нашите помощни класове за интервали и flex за контролиране на разстоянието и подравняването в рамките на навигационните ленти.
  • Навигационните ленти реагират по подразбиране, но можете лесно да ги промените, за да промените това. Отзивчивото поведение зависи от нашия плъгин 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опции със собствен клас модификатор и изискват използването на класове за превключване за правилен отзивчив стил. Навигацията в навигационните ленти също ще нарасне, за да заема възможно най-много хоризонтално пространство, за да поддържа съдържанието на вашата навигационна лента сигурно подравнено.

Активните състояния—с— .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. Използвайте допълнителни flex помощни програми , ако е необходимо, за да коригирате това поведение.

<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, което означава, че са изтеглени от нормалния поток на 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>

Отзивчиви поведения

Навигационните ленти могат да използват .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>

Когато направите това, препоръчваме да включите допълнителен JavaScript, за да преместите фокуса програмно към контейнера, когато бъде отворен. В противен случай потребителите на клавиатура и потребителите на помощни технологии вероятно ще имат затруднения при намирането на новоразкритото съдържание - особено ако контейнерът, който е отворен, е преди превключвателя в структурата на документа. Също така препоръчваме да се уверите, че превключвателят има aria-controlsатрибута, сочещ към idконтейнера със съдържание. На теория това позволява на потребителите на помощни технологии да прескачат директно от превключвателя към контейнера, който той контролира, но поддръжката за това в момента е доста неравномерна.