Руководство Bootstrap Nav, Tab, Pill

Bootstrap Nav
Выравнивание (Alignment)
Responsive Nav
.active & .disable
Nav (Tab)
Nav (Tab) Data-Toggle
Nav (Pill)
Nav (Pill) Data-Toggle

1. Bootstrap Nav

В Bootstrap, класс .nav может использоваться вместе с классами .nav-item, .nav-link чтобы создать простой горизонтальный Menu.

Bootstrap Nav

<!-- UL/LI -->
<ul class="nav">
   <li class="nav-item">
      <a class="nav-link" href="#">Javascript</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 -->
<div class="nav">
   <div class="nav-item">
      <a class="nav-link" href="#">Javascript</a>
   </div>
   <div class="nav-item">
      <a class="nav-link" href="#">Css</a>
   </div>
   <div class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
   </div>
</div>

Смотрите полный пример:

nav-example.html

<!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="#">Javascript</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>

2. Выравнивание (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="#">Javascript</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>

3. Responsive Nav

По умолчанию Bootstrap Nav является горизонтальным Menu. Но вы можете сделать так, чтобы он отображался по-вертикали, используя класс .flex-column (Это утилитарный класс использующийся в разных ситуациях).

Vertical Nav (.flex-column)

<ul class="nav flex-column">
   <li class="nav-item">
      <a class="nav-link" href="#">Javascript</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 отобразится вертикально.

Responsive Nav

<ul class="nav flex-column flex-sm-row">
   <li class="nav-item">
      <a class="nav-link" href="#">Javascript</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>

4. .active & .disable

Класс .active используется когда вы хотите подчеркнуть (highlight) Link-item, будто он активирован (или выбран). Используйте класс .disabled чтобы применить к Nav-link если вы хотите отключить его, пользователь не сможет взаимодейстовать с данным Nav-link.

.active .disabled

<ul class="nav">
   <li class="nav-item">
      <a class="nav-link" href="#">Javascript</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>

5. Nav (Tab)

Если вы хотите, чтобы Nav отображался как TAB, используйте класс .nav-tabs.

Tab (.nav-tabs)

<ul class="nav nav-tabs">
   <li class="nav-item">
      <a class="nav-link" href="#">Javascript</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 урегулируют свою ширину, чтобы заполнить оставшееся пространство по-горизонтали.

Tab (.nav-tabs .nav-fill)

<ul class="nav nav-tabs nav-fill">
   <li class="nav-item">
      <a class="nav-link" href="#">Javascript</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>

6. Nav (Tab) Data-Toggle

Простой Nav(Tab) на самом деле является статически menu (static menu), Nav-Item не могут изменить свой статус, пользователь нажимает на Nav-item чтобы перейти на другу ю страницу. Nav(Tab) посложнее разрешает отображать содержание соответвующее с Nav-Item, на который пользователь нажимает без перехождения на другую страницу.

Nav (Tabs) Data-Toggle

<ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item">
      <a class="nav-link" id="tab-javascript" data-toggle="tab"
         href="#content-javascript"
         role="tab" aria-controls="content-javascript" aria-selected="false">
      Javascript
      </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-javascript"
      role="tabpanel" aria-labelledby="tab-javascript">
      JavaScript 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 из примера выше, не создавая какие-либо проблемыr. Данные атрибуты только в целях подсказать таким устройствам как Screen Reader (Скринридер для незрячих).

7. Nav (Pill)

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

Pill (.nav-pills)

<ul class="nav nav-pills">
   <li class="nav-item">
      <a class="nav-link" href="#">Javascript</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 урегулируют свои ширины для заполнения пространства по-горизонтали.

Pill (.nav-pills .nav-fill)

<ul class="nav nav-pills nav-fill">
   <li class="nav-item">
      <a class="nav-link" href="#">Javascript</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>

8. Nav (Pill) Data-Toggle

Nav (Pill) Data-Toggle

<ul class="nav nav-pills" id="myPill" role="tablist">
   <li class="nav-item">
      <a class="nav-link" id="tab-javascript" data-toggle="tab"
         href="#content-javascript"
         role="tab" aria-controls="content-javascript" aria-selected="false">
      Javascript
      </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-javascript"
      role="tabpanel" aria-labelledby="tab-javascript">
      JavaScript 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>