Bootstrap Nav, Tab, Pill
Bootstrap 4 Nav
В Bootstrap, класс .nav может использоваться вместе с классами .nav-item, .nav-link чтобы создать простое горизонтальное Menu.Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Nav</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h4>Bootstrap Nav</h4>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Css</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap</a>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Выравнивание (Alignment)
Bootstrap предоставляет вам некоторые классы для выравнивания Nav:Класс | Описание |
.justify-content-start | Налево |
.justify-content-center | По середине |
.justify-content-end | Направо |
Наглядный пример использование класса .justify-content-end
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Css</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap</a>
</li>
</ul>
{banner_google}
Responsive Nav
По умолчанию Bootstrap Nav является горизонтальным Menu. Но вы можете сделать так, чтобы он отображался по-вертикали, используя класс .flex-column (Это утилитарный класс использующийся в разных ситуациях).Пример ниже наглядно демонстрирует использование класса .flex-column:
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Css</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap</a>
</li>
</ul>
А для того , чтобы получить горизонтальное Menu, который может перемениться на вертикальное при меньшей ширине экрана, вы можете сочетать с класс .flex-columnс одним из следующих классов:
- .flex-sm-row
- .flex-md-row
- .flex-lg-row
- .flex-xl-row
Класс | Описание |
.flex-column .flex-sm-row | Если ширина экрана >= 567px, Nav будет горизонтальным. Если наоборот, то Nav отобразится вертикально. |
.flex-column .flex-md-row | Если ширина экрана >= 768px, Nav будет горизонтальным. Если наоборот, то Nav отобразится вертикально. |
.flex-column .flex-lg-row | Если ширина экрана >= 992px, Nav будет горизонтальным. Если наоборот, то Nav отобразится вертикально. |
.flex-column .flex-xl-row | Если ширина экрана >= 1200px, Nav будет горизонтальным. Если наоборот, то Nav отобразится вертикально. |
Пример:
<ul class="nav flex-column flex-sm-row">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Css</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap</a>
</li>
</ul>
Bootstrap 4 Nav .active & .disable
Класс .active используется когда вы хотите подчеркнуть Link-item, будто оно активирована (или выбрана).Используйте класс .disabled к Nav-link чтобы отключить его, пользователь не сможет взаимодействовать с данным Nav-link.
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Bootstrap (Reading)</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">AngularJS (Comming Soon)</a>
</li>
</ul>
Bootstrap 4 Nav (Tab)
Если вы хотите, чтобы Nav отображался как TAB, используйте класс .nav-tabs.<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Bootstrap (Reading)</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">AngularJS (Comming Soon)</a>
</li>
</ul>
Используйте класс .nav-tabs сочетая с .nav-fill вы получите Nav(Tab), где Nav-Item регулирует свою ширину, чтобы заполнить оставшееся пространство по горизонтали.
<ul class="nav nav-tabs nav-fill">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Bootstrap</a>
</li>
</ul>
{banner_google}
Bootstrap 4 Nav (Tab) Data-Toggle
Простой Nav(Tab) на самом деле является статическим menu (static menu),Nav-Item не может изменить свой статус, пока пользователь не нажмёт на Nav-item чтобы перейти на другую страницу.
Nav(Tab) разрешает отображать содержимое соответствующее Nav-Item, на которое пользователь нажимает без перехода на другую страницу.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="tab-jаvascript" data-toggle="tab"
href="#content-jаvascript"
role="tab" aria-controls="content-jаvascript" aria-selected="false">
jаvascript
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-css" data-toggle="tab"
href="#content-css"
role="tab" aria-controls="content-css" aria-selected="false">
CSS
</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="tab-bootstrap" data-toggle="tab"
href="#content-bootstrap"
role="tab" aria-controls="content-bootstrap" aria-selected="true">
Bootstrap
</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="content-jаvascript"
role="tabpanel" aria-labelledby="tab-jаvascript">
jаvascript is a cross-platform, object-oriented scripting language ...
</div>
<div class="tab-pane fade" id="content-css"
role="tabpanel" aria-labelledby="tab-css">
CSS stands for Cascading Style Sheets. ...
</div>
<div class="tab-pane fade show active" id="content-bootstrap"
role="tabpanel" aria-labelledby="tab-bootstrap">
Bootstrap is a free front-end framework for faster and easier web development...
</div>
</div>
Примечание: Вы можете убрать атрибуты role, aria-controls, aria-selected, aria-labelledby из примера выше, это ни как не повлияет на отображение в браузере. Данные атрибуты использованы в целях подсказки для устройств Screen Reader (Скринридер для незрячих).
Bootstrap 4 Nav (Pill)
Pill очень похож на Tab по работе кроме разницы в интерфейсе . Nav-item у Nav(Pill) в статусе active похож на button (кнопку).Смотрите пример ниже:
И сам код:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">AngularJS (Comming Soon)</a>
</li>
</ul>
Используйте класс .nav-pills, сочетая с .nav-fill вы получите Nav(Pill), где Nav-Item регулирует свою ширину для заполнения пространства по горизонтали.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link" href="#">jаvascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Bootstrap</a>
</li>
</ul>
Bootstrap 4 Nav (Pill) Data-Toggle
<ul class="nav nav-pills" id="myPill" role="tablist">
<li class="nav-item">
<a class="nav-link" id="tab-jаvascript" data-toggle="tab"
href="#content-jаvascript"
role="tab" aria-controls="content-jаvascript" aria-selected="false">
jаvascript
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-css" data-toggle="tab"
href="#content-css"
role="tab" aria-controls="content-css" aria-selected="false">
CSS
</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="tab-bootstrap" data-toggle="tab"
href="#content-bootstrap"
role="tab" aria-controls="content-bootstrap" aria-selected="true">
Bootstrap
</a>
</li>
</ul>
<div class="tab-content" id="myPillContent">
<div class="tab-pane fade" id="content-jаvascript"
role="tabpanel" aria-labelledby="tab-jаvascript">
jаvascript is a cross-platform, object-oriented scripting language ...
</div>
<div class="tab-pane fade" id="content-css"
role="tabpanel" aria-labelledby="tab-css">
CSS stands for Cascading Style Sheets. ...
</div>
<div class="tab-pane fade show active" id="content-bootstrap"
role="tabpanel" aria-labelledby="tab-bootstrap">
Bootstrap is a free front-end framework for faster and easier web development...
</div>
</div>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
За что отвечает атрибут dir в HTML