freeCodeCamp/guide/russian/bootstrap/tabs-and-pills/index.md

title	localeTitle
Tabs and Pills	Таблетки и таблетки

Таблетки и таблетки

Таблетки и таблетки - это формы навигации. Это означает, что они помогают конечному пользователю перемещаться по сайту удобным для пользователя способом.

Вкладки

Чтобы получить вкладки начальной загрузки, сначала вам понадобится элемент, .nav присвоен класс .nav . Затем вы просто добавляете дополнительный класс с именем .nav-tabs .

<ul class="nav nav-tabs"> 
  <li role="presentation" class="active"><a href="#">Home</a></li> 
  <li role="presentation"><a href="#">Profile</a></li> 
  <li role="presentation"><a href="#">Messages</a></li> 
 </ul> 

Таблетки

Бутстрап-пилюли .nav-tabs же, как вкладки Bootstrap, кроме вместо .nav-tabs , используйте .nav-pills .

<ul class="nav nav-pills"> 
  <li role="presentation" class="active"><a href="#">Home</a></li> 
  <li role="presentation"><a href="#">Profile</a></li> 
  <li role="presentation"><a href="#">Messages</a></li> 
 </ul> 

Штабелированные таблетки

Бутстрап-пилюли также вертикально штабелируются, используя .nav stacked вместе с .nav-pills .

<ul class="nav nav-pills nav-stacked"> 
  ... 
 </ul> 

Бутстрапные табы / таблетки оправданы

Обе вкладки Bootstrap и Pills могут иметь равную ширину родителя на экранах шириной более 768 пикселей, используя .nav-justified . На меньших экранах навигационные ссылки сложены.

<ul class="nav nav-tabs nav-justified"> 
  ... 
 </ul> 
 <ul class="nav nav-pills nav-justified"> 
  ... 
 </ul> 

Отключенные ссылки

Для любого навигационного компонента (вкладки или пилюли) добавьте .disabled для серых ссылок и никаких эффектов зависания

<ul class="nav nav-pills"> 
  ... 
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> 
  ... 
 </ul> 

Вкладки с раскрывающимися списками

Добавьте выпадающие меню на вкладки nav.

<ul class="nav nav-tabs"> 
  ... 
  <li role="presentation" class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
      Dropdown <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
      ... 
    </ul> 
  </li> 
  ... 
 </ul> 

Вкладки с раскрывающимися списками

Добавьте выпадающие меню на свои навигационные таблетки.

<ul class="nav nav-pills"> 
  ... 
  <li role="presentation" class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
      Dropdown <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
      ... 
    </ul> 
  </li> 
  ... 
 </ul>