Button dropdowns / Кнопка выпадающего меню

Button dropdowns / Кнопка выпадающего меню

Используйте любую кнопку для выпадающего меню разместив ее в .btn-group, и обеспечив ее правильно-размеченным меню.

Зависимость плагина

Кнопка выпадающего меню требует включения в вашу версию Bootstrap плагина для выпадающего меню.

Одиночная кнопка выпадающего меню

Предоставьте другого вида кнопке, с выпадающим меню, с помощью определенных базовых изменений.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Действие <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то иное</a></li>
    <li class="divider"></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

Расщепленная кнопка выпадающего меню

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Действие</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Меню с переключением</span>
 </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то иное</a></li>
    <li class="divider"></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

Изменение размера

Кнопки в выпадающем меню могут иметь любой размер.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
 Большая кнопка <span class="caret"></span>
 </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 Малая кнопка <span class="caret"></span>
 </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
 Очень малая кнопка <span class="caret"></span>
 </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Вариант списка сверху

Создайте меню, элементы которого поднимаются вверх, прибавив .dropup к родительскому контейнеру.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Поднимающееся меню</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Меню с переключением</span>
 </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Translate »