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

В следующем примере демонстрируются базовые одиночные выпадающие меню -

<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>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies).

You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok