Bootstrap 3 - Кнопки

В этом уроке Вы узнаете какие возможности предлагает Twitter Bootstrap для создания кнопок на сайте

Создание кнопок с помощью Twitter Bootstrap 3

Кнопки являются неотъемлемой частью HTML форм, будь то форма для авторизации или для создания комментариев. Кнопки в формах используются для различных целей, например таких как submit (отправка данных формы на сервер) или reset (очистка сведений на форме), для выполнения какого-то важного действия или для запуска определенного события на веб-странице.

С помощью различных стилей доступных в Twitter Bootstrap мы можем задавать различные состояния для кнопок. Стили кнопок можно применить к различным элементам HTML. Однако они обычно применяются к элементам <a>, <input>, <button>.

Следующая таблица содержит кнопки с различными стилями доступных в Twitter Bootstrap 3.


Вид кнопки Класс Описание
Default btn btn-default Серая кнопка с градиентом (используется по умолчанию)
Primary btn btn-primary Кнопка, которая своим стилем сообщает пользователю, что она является основной из остального набора кнопок
Info btn btn-info Кнопка, которая предназначена для использования в качестве альтернативы кнопки по умолчанию
Success btn btn-success Кнопка, стиль которой сообщает пользователю об успешном выполнении какого-либо действия
Warning btn btn-warning Кнопка, которая своим оформлением предостерегает пользователя о возможных негативных действиях связанных с этой кнопкой
Danger btn btn-danger Кнопка, стиль которой предостерегает пользователя об опасных или необратимых действиях, которые она выполняет
Link btn btn-link Кнопка становится внешне похожей на ссылку, сохраняя при этом свою сущность

На представленном ниже коде показано как применять различные классы кнопок Bootstrap к элементу <input>:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Предупреждение: В Internet Explorer 9 на кнопках не показывается градиент, т.к. этот браузер не может обрезать градиент на скруглённых углах.

Классы Bootstrap для изменения размера кнопок

С помощью Bootstrap вы можете увеличить или уменьшить размеры кнопок. Для этого разработаны следующие классы: btn-lg, .btn-sm, или .btn-xs. Следующий код продемонстрирует как с помощью этих классов изменять размеры кнопок:

<p>
  <button type="button" class="btn btn-danger btn-xs">Очень маленькая кнопка</button>
  <button type="button" class="btn btn-default btn-xs">Очень маленькая кнопка</button>
</p>
<p>
  <button type="button" class="btn btn-danger btn-sm">Маленькая кнопка</button>
  <button type="button" class="btn btn-default btn-sm">Маленькая кнопка</button>
</p>
<p>
  <button type="button" class="btn btn-danger">Кнопка обычного размера</button>
  <button type="button" class="btn btn-default">Кнопка обычного размера</button>
</p>
<p>
  <button type="button" class="btn btn-danger btn-lg">Большая кнопка</button>
  <button type="button" class="btn btn-default btn-lg">Большая кнопка</button>
</p>

Вы также можете создавать кнопки, которые будут занимать всю доступную ширину родительского элемента, с помощью добавления к ним дополнительного класса .btn-block.

<button type="button" class="btn btn-danger btn-lg btn-block">Кнопка, занимающая всю ширину</button>
<button type="button" class="btn btn-default btn-lg btn-block">Кнопка, занимающая всю ширину</button>

Создание кнопки в неактивном состоянии

Для того чтобы запретить выполнения некоторого действия выполняемого при нажатии на кнопку, её необходимо перевести в неактивное состоянии.

Кнопки, которые создаются с помощью элемента <a> может сделать неактивными, если к ним дополнительно добавить класс .disabled.

<a href="#" class="btn btn-danger btn-lg disabled">Опасная ссылка</a>
<a href="#" class="btn btn-default btn-lg disabled">Обычная ссылка</a>

Примечание: Класс .disabled изменяет только внешний вид ссылки, делая её серой и удаляя эффект при наведении на неё курсора. Однако пока вы не удалите атрибут href,на ссылку всё равно ещё можно будет нажать. В качестве альтернативы (кроме удаления атрибута href) вы можете реализовать сценарий на языке JavaScript, который будет предотвращать нажатие на эту ссылку.

Кнопки, которые создаются с помощью элементов <button> и <input> можно сделать неактивными путём добавления атрибута disabled с значением disabled к соответствующему тегу элемента

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Default</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary</button>
<button type="button" class="btn btn-info btn-lg" disabled="disabled">Info</button>
<button type="button" class="btn btn-success btn-lg" disabled="disabled">Success</button>
<button type="button" class="btn btn-warning btn-lg" disabled="disabled">Warning</button>
<button type="button" class="btn btn-danger btn-lg" disabled="disabled">Danger</button>

Создание кнопки с состоянием процесса загрузки

Вы можете изменить кнопку, находящуюся в обычном состоянии на состояние процесса загрузки, путём добавления атрибута data-loading-text со значением "Загрузка..." к тегу <button>, а также подключением соответствующего скрипта на языке JavaScript.

<script type="text/javascript">  
 $(function() { 
    $(".btn").click(function(){
        $(this).button('loading').delay(3000).queue(function() {
            $(this).button('reset');
            $(this).dequeue();
        });        
    });
});  
</script>
<button type="button" class="btn btn-default" data-loading-text="Загрузка...">Default</button>
<button type="button" class="btn btn-primary" data-loading-text="Загрузка...">Primary</button>
<button type="button" class="btn btn-info" data-loading-text="Загрузка...">Info</button>
<button type="button" class="btn btn-success" data-loading-text="Загрузка...">Success</button>
<button type="button" class="btn btn-warning" data-loading-text="Загрузка...">Warning</button>
<button type="button" class="btn btn-danger" data-loading-text="Загрузка...">Danger</button>
<button type="button" class="btn btn-link" data-loading-text="Загрузка...">Link</button>

Примечание: Браузер Mozilla Firefox по умолчанию сохраняет состояние disabled, чтобы предотвратить это, вы можете установить атрибут autocomplete="off" на форме, содержащей кнопки или непосредственно на элементе <input> или <button>.

Создание кнопок-переключателей

У кнопок переключателей Вы можете изменить обычное состояние кнопки на нажатое, и наоборот. Для этого необходимо добавить к тегу <button> атрибут data-toggle со значением button.

<button type="button" class="btn btn-default" data-toggle="button">Default</button>
<button type="button" class="btn btn-primary" data-toggle="button">Primary</button>
<button type="button" class="btn btn-info" data-toggle="button">Info</button>
<button type="button" class="btn btn-success" data-toggle="button">Success</button>
<button type="button" class="btn btn-warning" data-toggle="button">Warning</button>
<button type="button" class="btn btn-danger" data-toggle="button">Danger</button>
<button type="button" class="btn btn-link" data-toggle="button">Link</button>

Создание группы кнопок

Компонент Twitter Bootstrap для создания группы кнопок позволяет сгруппировать несколько кнопок вместе в одну линию. Для создания группы кнопок необходимо поместить их в контейнер <div> и применить к нему класс .btn-group.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Левая</button>
  <button type="button" class="btn btn-primary">Средняя</button>
  <button type="button" class="btn btn-primary">Правая</button>
</div>

Вы также можете расположить группу кнопок вертикально. Для этого необходимо заменить класс .btn-group на .btn-group-vertical.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Верхняя</button>
  <button type="button" class="btn btn-primary">Средняя</button>
  <button type="button" class="btn btn-primary">Нижняя</button>
</div>

Создание группы кнопок-переключателей, в которой может быть нажатыми любое количество кнопок

Вы также можете добавить атрибут data-toggle="buttons" к группе кнопок, в которой каждая из них должна иметь атрибут type со значением checkbox, чтобы сделать в этой группе кнопки, в которой любое количество из них могут находиться в нажатом состоянии.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Параметр 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Параметр 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Параметр 3
  </label>
</div>

Чтобы сделать кнопку предварительно нажатой, Вам необходимо добавить класс .active к элементу <label> элемента <input>.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox"> Параметр 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Параметр 2
  </label>
  <label class="btn btn-primary active">
    <input type="checkbox"> Параметр 3
  </label>
</div>

Создание группы кнопок-переключателей, в которой только одна из них может быть нажата

Аналогичным образом Вы можете добавить атрибут data-toggle="buttons" к группе кнопок, в которой каждая из них должна иметь атрибут type со значением radio, для того чтобы сделать эту группу, в которой только одна из кнопок могла бы находиться в нажатом состоянии.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Параметр 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Параметр 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Параметр 3
  </label>
</div>

Добавьте класс .active к элементу label элемента input, если вы хотите, чтобы эта кнопка была предварительно нажата по умолчанию.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1"> Параметр 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Параметр 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Параметр 3
  </label>
</div>

Создание панели инструментов, состоящей из кнопок

Вы также можете объединить различные группы кнопок для создания более сложных компонентов, таких как панели инструментов. Для создания кнопочной панели инструментов необходимо поместить различные группы кнопок в контейнер <div> и применить к нему класс .btn-toolbar.

<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">1 кнопка</button>
    <button type="button" class="btn btn-primary">2 кнопка</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-danger">3 кнопка</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-warning">4 кнопка</button>
    <button type="button" class="btn btn-warning">5 кнопка</button>
    <button type="button" class="btn btn-warning">6 кнопка</button>
  </div>
</div>

Изменение высоты группы кнопок

Для изменения высоты группы кнопок можно использовать классы Bootstrap .btn-group-lg, .btn-group-sm или .btn-group-xs чтобы сделать высоту этой группы кнопок соответственно большой, маленькой или очень маленькой. Для этого необходимо добавить один из этих классов непосредственно к классу группы .btn-group, вместо того чтобы применять классы к каждой кнопки.

<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Большая левая кнопка</button>
    <button type="button" class="btn btn-primary">Большая правая кнопка</button>
  </div>
</div>
<br />
<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Обычная левая кнопка</button>
    <button type="button" class="btn btn-primary">Обычная правая кнопка</button>
  </div>
</div>
<br />
<div class="btn-toolbar">
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Маленькая левая кнопка</button>
    <button type="button" class="btn btn-primary">Маленькая правая кнопка</button>
  </div>
</div>
<br />
<div class="btn-toolbar">
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">Очень маленькая левая кнопка</button>
    <button type="button" class="btn btn-primary">Очень маленькая правая кнопка</button>
  </div>
</div>



Создание группы кнопок, выровненной по ширине

Вы также можете растянуть группу кнопок по ширине родительского элемента с помощью добавления дополнительного класса .btn-group-justified к основному классу группы .btn-group.

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-warning">Левая</a>
  <a href="#" class="btn btn-warning">Средняя</a>
  <a href="#" class="btn btn-warning">Правая</a>
</div>

Предупреждение: Это работает только с элементом <a>, элемент <button> не применяет стили, которые используются для выравнивания контента по ширине (т.е. display: table-cell;)

JavaScript плагин для кнопок

Вы можете включить плагин Boostrap для кнопок посредством кода JavaScript, как показано ниже:

$('.btn').button()
Данный плагин не имеет параметров, но зато имеет следующие методы:
Метод Описание Пример
.button('toggle') Метод "toggle" переводит состояние кнопки в нажатое положение. При этом данный метод изменяет внешний вид кнопки, и делает её похожей на состояние элемента, когда он активирован. $().button('toggle')
.button('loading') Метод "loading" устанавливает кнопки состояние загрузки. Во время этого состояния кнопка становится неактивной, а также можно изменить её текст на значение атрибута "data-loading-text" элемента <button>. $().button('loading')
.button('reset') Метод "reset" сбрасывает состояние кнопки на обычное и заменяет её текст на первоначальный. $().button('reset')
.button(string) Метод "string" сбрасывает состояние кнопки на обычное и заменяет её текст на любое значение заданное в скобках $().button(string)
<!-- Пример с методом "toogle" -->

<script type="text/javascript">
$(document).ready(function(){
  $("#myButtons1 .btn").click(function(){
    <!-- Метод "toogle" -->
    $(this).button('toggle');
  });
});
</script>

<p>Пример с методом "toogle"</p>

<div id="myButtons1">
  <button type="button" class="btn btn-default">По умолчанию</button>
  <button type="button" class="btn btn-primary">Основная</button>
  <button type="button" class="btn btn-success">Успех</button>
  <button type="button" class="btn btn-info">Информация</button>
  <button type="button" class="btn btn-warning">Предупреждение</button>
  <button type="button" class="btn btn-danger">Опасность</button>
</div>

<!-- Пример с методом "loading" -->
<script type="text/javascript">  
$(document).ready(function(){ 
  $("#myButtons2 .btn").click(function(){
    <!-- Метод "loading" -->
    $(this).button('loading').delay(1000).queue(function(){
      $(this).dequeue();
    });        
  });
});   
</script>

<p>Пример с методом "loading"</p>

<div id="myButtons2">
  <form action="#" autocomplete="off">
    <button type="button" class="btn btn-default">По умолчанию</button>
    <button type="button" class="btn btn-primary">Основная</button>
    <button type="button" class="btn btn-success">Успех</button>
    <button type="button" class="btn btn-info">Информация</button>
    <button type="button" class="btn btn-warning">Предупреждение</button>
    <button type="button" class="btn btn-danger">Опасность</button>
  </form>
</div>

<!-- Пример с методом "reset" -->
<script type="text/javascript">  
$(document).ready(function(){ 
  $("#myButtons3 .btn").click(function(){
    $(this).button('loading').delay(1000).queue(function() {
      <!-- Метод "reset" -->
      $(this).button('reset');
      $(this).dequeue();
    });        
  });
});   
</script>

<p>Пример с методом "reset"</p>

<div id="myButtons3">
  <form action="#" autocomplete="off">
    <button type="button" class="btn btn-default">По умолчанию</button>
    <button type="button" class="btn btn-primary">Основная</button>
    <button type="button" class="btn btn-success">Успех</button>
    <button type="button" class="btn btn-info">Информация</button>
    <button type="button" class="btn btn-warning">Предупреждение</button>
    <button type="button" class="btn btn-danger">Опасность</button>
  </form>
</div>

<!-- Пример с методом "string" -->
<script type="text/javascript">  
$(document).ready(function(){ 
  $("#myButton4").click(function(){
    $(this).button('loading').delay(1000).queue(function() {
      <!-- Метод "string" -->
      $(this).button('complete');
      $(this).dequeue();
    });        
  });
});   
</script>

<p>Пример с методом "string"</p>

<div>
  <button type="button" class="btn btn-info" id="myButton4" data-complete-text="Загрузка завершена" autocomplete="off">Нажми на меня</button>
</div>

Пример с методом "toogle"


Пример с методом "loading"


Пример с методом "reset"


Пример с методом "string"



   Bootstrap 0    38773 0

Комментарии (12)

  1. Дамир # 0
    Привет отличный обзор кнопок
    Есть одна ошибка: 'Кнопки, занимающую всю ширину' тут наверно нужно 'Кнопка, занимающая всю ширину' или 'Кнопки, занимающие всю ширину'

    Вопрос: можно ли
    btn-group-justified
    как нибудь применить в меню navbar?
    1. Александр Мальцев # 0
      Привет, спасибо.
      Попробуй так.
      Код HTML:
      <nav class="navbar navbar-default">
        <ul class="nav nav-justified navbar-nav">
          <li><a href="/">Home</a></li>
          <li><a href="#">Ссылка 1</a></li>
          <li><a href="#">Ссылка 2</a></li>
          <li><a href="#">Ссылка 3</a></li>
        </ul>
      </nav>
      
      Код CSS:
      .navbar-nav>li {
        float: none;
      }
      
    2. Сергей # 0
      Здравствуйте. В самом первом примере опечатка — открывающий тег input, закрывающий — /button
      <input type="button" class="btn btn-default">Default</button>
      1. Александр Мальцев # 0
        Здравствуйте, Сергей.
        Спасибо, поправил.
      2. Lukasss # 0
        Помогите сделать кнопку для спойлера!
        Сначала кнопка «Показать», после нажатия сполйер завернулся она менялась на «Скрыть».
        1. Александр Мальцев # 0
          Это можно сделать с помощью плагина Bootstrap collapse:
          <a id="aCollapse" class="btn btn-primary" data-toggle="collapse" href="#myCollapse">
            <span class="glyphicon glyphicon-chevron-down"></span> Открыть
          </a>
          
          <div class="collapse" id="myCollapse">
            Некоторое содержимое...
          </div>
          
          <script>
          $(function() {
            $('#myCollapse').on('hide.bs.collapse', function () {
              $('#aCollapse').html('<span class="glyphicon glyphicon-chevron-down"></span> Открыть');
            });
            $('#myCollapse').on('show.bs.collapse', function () {
              $('#aCollapse').html('<span class="glyphicon glyphicon-chevron-up"></span> Закрыть');
            });
          });
          </script>
          
          1. Lukasss # 0
            Огромнейшее спасибо!!!
        2. Денис # 0
          Добрый день.
          Подскажите пожалуйста по поводу кнопок как сделать код чтобы:

          По умолчанию кнопка 1 была с классом btn-danger после нажатия на кнопку два чтобы класс btn-danger был на кнопке 2, а на кнопке 1 остался только btn-default.
          <div class="btn-group btn-group-justified grid-view">
           <div class="btn-group grid-1">
          	<button type="button" class="btn btn-default btn-danger">
          	  <i class="fa fa-th-large"></i><span class="hidden-xs hidden-sm"> Сетка кнопка 1</span>
          	</button>
           </div>
           
           <div class="btn-group grid-2">
          	<button type="button" class="btn btn-default">
          	 <i class="fa fa-th-list"></i><span class="hidden-xs hidden-sm"> Список кнопка 2</span>
          	 </button>
           </div>
          </div>
          
          И можно ли это сохранить в куку чтобы после перехода на другую страницу класс сохранялся на той кнопки что мы нажали.

          Спасибо
          1. Александр Мальцев # 0
            1. Добавить к кнопкам id. Например, к 1 кнопке btn1, а ко 2 — btn2.
            2. Убрать не нужные классы у 1 кнопки, оставить только btn и btn-danger.
            Т.е. будет так:
            ...
            <button id="btn1" type="button" class="btn btn-danger">
            ...
            <button id="btn2" type="button" class="btn btn-default">
            
            3. Написать js скрипт. Cookies предлагаю заменить на localStorage.
            $(function(){
              $('#btn1,#btn2').click(function(){
                if ($(this).attr('id')=='btn1') {
                  $(this).addClass('btn-danger').removeClass('btn-default');
                  $('#btn2').removeClass('btn-danger').addClass('btn-default');    
                }
                else {
                  $(this).addClass('btn-danger').removeClass('btn-default');
                  $('#btn1').removeClass('btn-danger').addClass('btn-default');  
                }
                //сохраняем состояние кнопок в localStorage
                localStorage.setItem('btn1',$('#btn1').attr('class'));
                localStorage.setItem('btn2',$('#btn2').attr('class'));
              });
              //извлекаем сохранённые данные и применяем их к кнопкам
              if (localStorage.getItem('btn1')) {
                $('#btn1').attr('class',localStorage.getItem('btn1'));
              }
              if (localStorage.getItem('btn2')) {
                $('#btn2').attr('class',localStorage.getItem('btn2'));
              }
            });
            
            1. Денис # 0
              Спасибо в очередной раз выручили)
          2. Александр # 0
            Здравствуйте. Помогите пожалуйста вставить ссылку в кнопку, чтобы при нажатии прикрепленная к кнопке ссылка открывалась в другой вкладке.
            Вот код кнопки, который мне необходимо изменить:
            var button = '<input type="submit" class="btn btn-primary btn-lg" value="Take it, Easy">';
            1. Александр Мальцев # 0
              Тип submit предназначен для отправки формы.
              Для этого лучше использовать обычную ссылку:
              <a href="https://www.yandex.ru/" class="btn btn-primary btn-lg" target="_blank">Take it, Easy</a>
              

            Вы должны авторизоваться, чтобы оставлять комментарии.