Bootstrap Bootstrap Nav, Tab, Pill

Anthrax

Админ
Сообщения
3,035
Реакции
808
Баллы
1

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>

1580478444_22286019.png

Выравнивание (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>

1580478683_22286680.png

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>
1580478906_22286875.png

А для того , чтобы получить горизонтальное 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>

1580479073_22287878.gif

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>
1580479159_22288262.png

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>

1580479440_22288580.png

Используйте класс .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>

1580479528_22303213.gif

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>

1580479666_22304931.gif

Примечание: Вы можете убрать атрибуты role, aria-controls, aria-selected, aria-labelledby из примера выше, это ни как не повлияет на отображение в браузере. Данные атрибуты использованы в целях подсказки для устройств Screen Reader (Скринридер для незрячих).

Bootstrap 4 Nav (Pill)​

Pill очень похож на Tab по работе кроме разницы в интерфейсе . Nav-item у Nav(Pill) в статусе active похож на button (кнопку).
Смотрите пример ниже:
1580479999_22302640.png

И сам код:
Код:
<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>
1580480129_22303093.gif

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>
1580480261_22305043.gif
 

Навигация

Пользователи онлайн

Сейчас на форуме нет ни одного пользователя.

Нас недавно посетили

Мы в ОК

Сверху