Панель навигации Bootstrap
Панели навигации
Панель навигации — это заголовок навигации, который размещается в верхней части страницы:
В Bootstrap панель навигации может расширяться или сворачиваться в зависимости от размера экрана.
Стандартная панель навигации создается с помощью <nav class="navbar navbar-default">.
В следующем примере показано, как добавить панель навигации вверху страницы:
Пример
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Примечание. Во всех примерах на этой странице отображается панель навигации, которая занимает слишком много места на маленьких экранах (однако панель навигации будет располагаться на одной строке на больших экранах, потому что Bootstrap адаптивен). Эта проблема (с маленькими экранами) будет решена в последнем примере на этой странице.
Перевернутая панель навигации
Если вам не нравится стиль панели навигации по умолчанию, Bootstrap предоставляет альтернативную черную панель навигации:
Просто измените .navbar-defaultкласс на .navbar-inverse:
Пример
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Панель навигации с раскрывающимся списком
Панели навигации также могут содержать выпадающие меню.
В следующем примере добавляется раскрывающееся меню для кнопки «Страница 1».
Пример
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Панель навигации с выравниванием по правому краю
Класс .navbar-rightиспользуется для выравнивания кнопок панели навигации по правому краю.
В следующем примере мы вставляем кнопку «Зарегистрироваться» и кнопку «Войти» справа на панели навигации. Мы также добавляем глификон на каждую из двух новых кнопок:
Пример
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Кнопки панели навигации
Чтобы добавить кнопки внутри панели навигации, добавьте .navbar-btnкласс на кнопку Bootstrap:
Пример
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Формы панели навигации
Чтобы добавить элементы формы внутрь панели навигации, добавьте .navbar-formкласс к элементу формы и добавьте входные данные. Обратите внимание, что мы добавили .form-groupкласс в контейнер div, содержащий ввод. Это добавляет правильное заполнение, если у вас есть более одного ввода (вы узнаете больше об этом в главе «Формы»).
Пример
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Вы также можете использовать классы .input-groupи .input-group-addonдля прикрепления значка или текста справки рядом с полем ввода. Вы узнаете больше об этих классах в главе «Входные данные Bootstrap».
Пример
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Текст на панели навигации
Используйте .navbar-textкласс для вертикального выравнивания любых элементов внутри панели навигации, которые не являются ссылками (обеспечивает правильное заполнение и цвет текста).
Пример
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Фиксированная панель навигации
Панель навигации также может быть закреплена вверху или внизу страницы.
Фиксированная панель навигации остается видимой в фиксированном положении (сверху или снизу) независимо от прокрутки страницы.
Класс .navbar-fixed-topфиксирует панель навигации вверху:
Пример
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Класс .navbar-fixed-bottomзаставляет панель навигации оставаться внизу:
Пример
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Сворачивание панели навигации
Панель навигации часто занимает слишком много места на маленьком экране.
Мы должны скрыть панель навигации; и показывать только тогда, когда это необходимо.
В следующем примере панель навигации заменена кнопкой в правом верхнем углу. Только при нажатии кнопки будет отображаться панель навигации:
Пример
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>