--- title: Navigation Bar localeTitle: Панель навигации --- ## Панель навигации Структура Bootstrap предоставляет вам панель навигации с функциями. Короче говоря, панель навигации (также называемая navbars) представляет собой заголовок в верхней части страницы для отображения навигационной информации. #### Как пользоваться Чтобы использовать навигационные панели Bootstrap, вы добавляете элемент `

` в верхнюю `` элемента `` на своей веб-странице. Существуют различные стили, которые вы можете добавить, чтобы настроить отображение ваших навигаторов. #### Пример кода Это код, необходимый для создания базового навигатора. ```html ``` #### Стили Navbar Bootstrap предоставляет набор классов в структуре Bootstrap для стилизации ваших навигаторов. Эти классы следуют: * `navbar navbar-default` Это стиль по умолчанию для ваших навигаторов. * `navbar navbar-inverse` Это похоже на стиль по умолчанию, за исключением того, что цвета инвертированы. #### Добавление раскрывающихся меню на панель навигации Вы можете включить раскрывающееся меню внутри навигационной панели. Эта функция требует, чтобы вы включили javascript-файл Bootstrap для его работы. ```html ``` #### Добавление кнопок в навигационную панель Вы можете добавлять кнопки на навигационной панели. Существующие классы Button Bootstrap работают, однако вам нужно включить класс `navbar-btn` в конец списка классов. ```html ``` #### Добавление форм на навигационную панель Вы также можете добавлять формы на навигационную панель. Это может использоваться для таких задач, как поле поиска, быстрое поле входа и т. Д. ```html ``` #### Выравнивание элементов справа на панели навигации В некоторых случаях вам может потребоваться выравнивание элементов в навигационной панели справа (например, кнопка входа в систему или регистрация). Для этого вам нужно будет использовать `navbar-right` . ```html ``` #### Отображение навигационной панели независимо от прокрутки В некоторых случаях вы можете сохранить навигационную панель вверху или внизу экрана независимо от прокрутки. Для элемента `

` вам нужно добавить либо `navbar-fixed-top` либо `navbar-fixed-bottom` . ```html ``` #### Свертывание навигационной панели На маленьком экране (например, на телефоне или планшете) навигационная панель будет занимать слишком много места. К счастью, существует возможность скомбинировать навигационную панель. Вы можете выполнить это, используя следующий пример. ```html ``` #### Примеры использования Navbar `navbar navbar-default` [Название сайта](#navbar-default) * [Главная](#navbar-default) * [Страница 1](#navbar-default) * [Страница 2](#navbar-default) * [Page 3](#navbar-default) кнопка * [Действие № 1](#navbar-default) * [Действие №2](#navbar-default) `navbar navbar-inverse` [Название сайта](#navbar-inverse) * [Главная](#navbar-inverse) * [Страница 1](#navbar-inverse) * [Страница 2](#navbar-inverse) * [Page 3](#navbar-inverse) кнопка * [Действие № 1](#navbar-inverse) * [Действие №2](#navbar-inverse) #### Дополнительная информация: [Загрузочная документация BootStrap](https://getbootstrap.com/docs/4.0/components/navbar/)