Source

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

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

Как работи

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

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

<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-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съвпадение, това се прави лесно!

Свито съдържание

Може да се превключва чрез марката на навигационната лента.

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