Навигация Бары
Панель навигации является навигационным заголовок, который помещается в верхней части страницы:
С Bootstrap , навигационная панель может продлить или свернуть, в зависимости от размера экрана.
Стандартная панель навигации создается с <nav class="navbar navbar-default"> .
В следующем примере показано, как добавить навигационную панель в верхней части страницы:
пример
<body>
<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:
Просто измените .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>
Попробуй сам " Фиксированная панель навигации
Навигационная панель также может быть закреплен в верхней или в нижней части страницы.
Фиксированная панель навигации остается видимым в фиксированном положении (верхней или нижней) независимо от прокрутки страниц.
.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> Попробуй сам " Бар навигации с раскрывающийся
Навигационная панель также может содержать выпадающие меню.
Следующий пример добавляет выпадающее меню для кнопки "Page 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 класс используется для кнопок панели навигации правой кнопкой Align.
В следующем примере мы вставляем кнопку "Sign Up" и кнопку "Login" справа в панели навигации. Мы также добавить glyphicon на каждой из двух новых кнопок:
пример
<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>
<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> Попробуй сам " Сворачивание Панель навигации
Панель навигации занимает слишком много места на маленьком экране.
Мы должны скрыть панель навигации; и только показать его, когда это необходимо.
В следующем примере навигационная панель заменяется кнопкой в правом верхнем углу. Только тогда, когда кнопка нажата, будет отображаться панель навигации:
пример
<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> Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»