Bootstrap — Кнопки с выпадающим списком

В этой главе мы поговорим о том, как добавить кнопки с выпадающимся меню, используя классы Bootstrap. Чтобы добавить выпадающее меню к кнопке, просто оберните кнопку и раскрывающееся меню в .btn-group. Вы можете также использовать <span class = «caret»></span>, чтобы указать в качестве индикатора того, что кнопка является раскрывающийся.

Следующий пример демонстрирует основные одной кнопки с выпадающимся списком:

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Default 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      Primary 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Кнопка с разделением выпадающим списком

Кнопка с разделением выпадающим списком используется один и тот же общий стиль как кнопка с выпадающим списком, но еще добавляется первичное действие вместе с выпадающим меню. Разделенные кнопки имеют первичное действие слева и переключатель справа, который отображает ниспадающее меню.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Default</button>
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary">Primary</button>
   
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

Размер кнопки с выпадающим списком

Вы можете использовать выпадающие списки с любым размером кнопки — .btn-large, .btn-sm, или .btn-xs.

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
      Default
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
      Primary
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
      Success
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Разновидности кнопок с раскрывающимся списком

Меню также может быть построено, чтобы быть выпадающим. Для достижения этой цели, просто добавьте .dropup в родительском контейнер .btn-group.

<div class = "row" style = "margin-left:50px; margin-top:200px">
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Default
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
         Primary
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
</div>

Читайте также

Как использовать Bootstrap с WordPress для создания своей темы?

3 года назад

7 Основных инструментов для Frontend веб-разработки сайтов в 2023 году

2 года назад

Быть веб-разработчиком в 2020 — Часть 1: CSS или Bootstrap?

5 лет назад

0 0 голоса

Рейтинг статьи

Подписаться

авторизуйтесь

Уведомить о

новых последующих комментарияхновых ответах на мои комментарии

Я разрешаю использовать свой email и отправлять уведомления о новых комментариях и ответах (вы cможете отказаться от подписки в любое время).

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

0 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии