Компоненты

Более десятка компонентов, созданных для отображения кнопок, выпадающих списков, навигации, предупреждений и многого другого.

Навигационная панель

Навигационная панель - это оболочка, которая позиционирует брендинг, навигацию и другие элементы в хедере. Он легко расширяется и, благодаря нашему плагину Collapse, может легко интегрировать адаптивное поведение.

Содержание

Как это работает

Вот что вам необходимо знать перед началом работы с навигационной панелью:

  • Навигационная панель требует обертывания .navbar с .navbar-toggleable-* for responsive collapsing и классов цветовой схемы.
  • Навигационные панели и их контент по умолчанию подвижные. Используйте дополнительные контейнеры, чтобы ограничить их горизонтальную ширину.
  • Навигационные панели и их содержимое построены с помощью flexbox, что обеспечивает легкость выравнивания через классы утилиты.
  • Навигационные панели по умолчанию адаптивны, но вы можете легко модифицировать их, чтобы изменить это. Адаптивное поведение зависит от нашего плагина Collapse JavaScript.
  • Обеспечьте доступность с помощью элемента <nav> или, используя более общий элемент, такой как <div>, добавьте role="navigation" в каждую навигационную панель, чтобы явно определить ее как ориентир для пользователей ассистивных технологий.

Ознакомьтесь с примером и списком поддерживаемых подкомпонентов.

Поддерживаемый контент

Навигационные панели поставляются со встроенной поддержкой нескольких подкомпонентов. При необходимости выберите один из следующих вариантов:

  • .navbar-brand для вашей компании, продукта или названия проекта.
  • .navbar-nav для полноразмерной и облегченной навигации (включая поддержку выпадающих списков).
  • .navbar-toggler для использования с нашим collapse плагином и другими режимами переключения навигации.
  • .form-inline для любых элементов управления и действий.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группировки и скрытия содержимого навигационной панели от родительской точкой останова.

Ниже приведен пример всех подкомпонентов, включенных в адаптивную навигационную панель, которая автоматически свертывается в точке останова md.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">Navbar</a>

  <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">
        <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="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Brand

.navbar-brand может быть применена к большинству элементов, но якорь лучше всего работает, поскольку некоторым элементам могут потребоваться классы утилит или пользовательские стили.

<!-- As a link -->
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-faded">
  <h1 class="navbar-brand mb-0">Navbar</h1>
</nav>

Добавление изображений в .navbar-brand вероятно, всегда требует пользовательские стили или утилиты для правильного размера. Ниже представлены несколько примеров для демонстрации.

<!-- Just an image -->
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">
    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">
    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Навигационные ссылки навигационной панели строятся на наших опциях .nav со своим собственным классом-модификатором и требуют использования toggler классов для правильного адаптивного дизайна. Навигация в навигационной панели также будет расти, чтобы занять как можно больше горизонтального пространства, чтобы обеспечить безопасное выравнивание содержимого навигационной панели.

Активные состояния - с .active - для указания текущей страницы могут быть применены напрямую к .nav-link или их непосредственным родительским .nav-item.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">Navbar</a>
  <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-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">Navbar</a>
  <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-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">Navbar</a>
  <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="https://example.com" 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-faded">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

При необходимости совместите содержимое своих встроенных форм с утилитами.

<nav class="navbar navbar-light bg-faded justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Группы входных данных также работают:

<nav class="navbar navbar-light bg-faded">
  <form class="form-inline">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

В этих формах навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты выравнивания по вертикали могут использоваться для выравнивания элементов разных размеров.

<nav class="navbar navbar-light bg-faded">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Текст

Навигационная панель может содержать биты текста с помощью .navbar-text. Этот класс регулирует вертикальное выравнивание и горизонтальное расстояние для строк текста.

<nav class="navbar navbar-light bg-faded">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

При необходимости совместите их с другими компонентами и утилитами.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <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>

Цветовые схемы

Theming для навигационной панели никогда не была проще, благодаря сочетанию тематических классов и утилит background-color. Выберайте из .navbar-light для использования со светлыми цветами фона, или .navbar-inverse для темных цветов фона. Затем, настройте с помощью .bg-* утилиты.

<nav class="navbar navbar-inverse bg-inverse">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-inverse 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-toggleable-md navbar-light bg-faded">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Когда контейнер находится в вашей навигационной панели, его горизонтальное заполнение удаляется в точках останова ниже указанного вами класса .navbar-toggleable-*. Это гарантирует, что мы не дублируем излишнее заполнение на небольших экранах, когда ваша навигационная панель свернута.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Размещение

Используйте наши утилиты для размещения навигационных панелей в нестатических позициях. Выберите один из следующих вариантов: фиксированная сверху, фиксированная снизу или прикрепленная к верхней части. Обратите внимание, что position: sticky, используемый для .sticky-top, поддерживается не в каждом браузере.

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Full width</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Адаптивное поведение

Навигационная панель может использовать классы .navbar-toggler, .navbar-collapse и .navbar-toggleable-* для изменения, когда их содержимое сжимается за кнопкой. В сочетании с другими утилитами вы можете легко выбирать, когда показывать или скрывать определенные элементы.

Тогглер

Тогглеры навигационной панели можно выравнивать влево или вправо с помощью модификаторов .navbar-toggler-left или .navbar-toggler-right. Они абсолютно позиционированы в навигационной панели, чтобы избежать вмешательства в свернутом состоянии. Вы также можете использовать свои собственные стили для позиционирования тогглеров. Ниже приведены примеры различных стилей.

При отсутствии .navbar-brand, показанного в нижней точке останова:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <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="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

With a brand name shown on the left and toggler on the right:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-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="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Внешний контент

Иногда вы хотите использовать collapse плагин для запуска скрытого контента в другом месте страницы. Поскольку наш плагин работает с id и data-target matching, это легко сделать!

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-inverse 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-inverse bg-inverse">
    <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>

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Поддержать проект

x