В этой статье мы расскажем о том, как добавить раскрывающееся меню к кнопкам с использованием классов 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>

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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok