Статья, в которой познакомимся с процессом создания кнопок с помощью 3 или 4 версии фреймворка Bootstrap. Кроме этого рассмотрим плагин Bootstrap и научимся использовать его методы на практике.

Создание кнопки

Кнопка - это элемент интерфейса, представляющий собой прямоугольник, нажатие на который приводит к выполнению некоторого действия.

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

Создание кнопки в Bootstrap 3 и 4 осуществлятся посредством добавления классов btn и btn-{theme} к элементу a или button. Вместо {theme} необходимо указать название темы.

Для создание кнопки классы btn и btn-{theme} можно конечно добавить и к другому HTML элементу, но в большинстве случаев используются именно a и button.

Bootstrap 3 - Кнопки
<!-- Bootstrap 3 -->
<!-- тема default -->
<button type="button" class="btn btn-default">Текст кнопки</button>
<!-- тема primary -->
<button type="button" class="btn btn-primary">Текст кнопки</button>
<!-- тема success -->
<button type="button" class="btn btn-success">Текст кнопки</button>
<!-- тема info -->
<button type="button" class="btn btn-info">Текст кнопки</button>
<!-- тема warning -->
<button type="button" class="btn btn-warning">Текст кнопки</button>
<!-- тема danger -->
<button type="button" class="btn btn-danger">Текст кнопки</button>
<!-- тема link -->
<button type="button" class="btn btn-link">Текст кнопки</button>
Bootstrap 4 - Кнопки
<!-- Bootstrap 4 -->
<!-- тема primary -->
<button type="button" class="btn btn-primary">Текст кнопки</button>
<!-- тема secondary -->
<button type="button" class="btn btn-secondary">Текст кнопки</button>
<!-- тема success -->
<button type="button" class="btn btn-success">Текст кнопки</button>
<!-- тема danger -->
<button type="button" class="btn btn-danger">Текст кнопки</button>
<!-- тема warning -->
<button type="button" class="btn btn-warning">Текст кнопки</button>
<!-- тема info -->
<button type="button" class="btn btn-info">Текст кнопки</button>
<!-- тема light -->
<button type="button" class="btn btn-light">Текст кнопки</button>
<!-- тема dark -->
<button type="button" class="btn btn-dark">Текст кнопки</button>
<!-- тема link -->
<button type="button" class="btn btn-link">Текст кнопки</button>

Outline кнопки (только Bootstrap 4)

Для создания кнопки с контуром (без фона), необходимо использовать классы btn и btn-outline-{theme}.

Bootstrap 4 - Outline кнопки
<!-- Bootstrap 4 -->
<!-- тема primary -->
<button type="button" class="btn btn-outline-primary">Текст кнопки</button>
<!-- тема secondary -->
<button type="button" class="btn btn-outline-secondary">Текст кнопки</button>
<!-- тема success -->
<button type="button" class="btn btn-outline-success">Текст кнопки</button>
<!-- тема danger -->
<button type="button" class="btn btn-outline-danger">Текст кнопки</button>
<!-- тема warning -->
<button type="button" class="btn btn-outline-warning">Текст кнопки</button>
<!-- тема info -->
<button type="button" class="btn btn-outline-info">Текст кнопки</button>
<!-- тема light -->
<button type="button" class="btn btn-outline-light">Текст кнопки</button>
<!-- тема dark -->
<button type="button" class="btn btn-outline-dark">Текст кнопки</button>

Изменение размера кнопки

Для увеличения или уменьшения размера кнопки, к ней нужно дополнительно добавить класс btn-{size}. Вместо {size} необходимо указать lg, sm или xs (только в Bootstrap 3).

Класс btn-lg предназначен для создания большой кнопки, sm - маленькой и xs - очень маленькой.

Bootstrap 3 - Изменение размера кнопок
<!-- Bootstrap 3 -->
<!-- Большая кнопка -->
<button type="button" class="btn btn-default btn-lg">Текст кнопки</button>
<!-- Маленькая кнопка -->
<button type="button" class="btn btn-default btn-sm">Текст кнопки</button>
<!-- Очень маленькая кнопка -->
<button type="button" class="btn btn-default btn-xs">Текст кнопки</button>
Bootstrap 4 - Изменение размера кнопок
<!-- Bootstrap 4 -->
<!-- Большие кнопки -->
<button type="button" class="btn btn-primary btn-lg">Текст кнопки</button>
<button type="button" class="btn btn-secondary btn-lg">Текст кнопки</button>
<!-- Маленькие кнопки -->
<button type="button" class="btn btn-primary btn-sm">Текст кнопки</button>
<button type="button" class="btn btn-secondary btn-sm">Текст кнопки</button>

Кнопка, занимающая всю ширину родительского элемента

Создание кнопки с шириной равной ширине родительского элемента осуществляется с помощью класса btn-block.

Bootstrap 3 - Кнопка, занимающая всю ширину родительского элемента
<!-- Bootstrap 3 -->
<button type="button" class="btn btn-warning btn-lg btn-block">Текст кнопки</button>
<button type="button" class="btn btn-primary btn btn-block">Текст кнопки</button>
<button type="button" class="btn btn-success btn-sm btn-block">Текст кнопки</button>
<button type="button" class="btn btn-danger btn-xs btn-block">Текст кнопки</button>
Bootstrap 4 - Кнопка, занимающая всю ширину родительского элемента
<!-- Bootstrap 4 -->
<button type="button" class="btn btn-primary btn-lg btn-block">Текст кнопки</button>
<button type="button" class="btn btn-secondary btn-block">Текст кнопки</button>
<button type="button" class="btn btn-success btn-sm btn-block">Текст кнопки</button>

Активное состояние кнопки

Если необходимо отображать кнопку нажатой (с более тёмным фоном и рамкой), то к ней необходимо добавить класс active.

Для поддержки вспомогательных технологий к кнопке нужно добавить атрибут aria-pressed="true".

Bootstrap 3 - Активное состояние кнопки
<!-- Bootstrap 3 -->
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Текст кнопки</a>
Bootstrap 4 - Активное состояние кнопки
<!-- Bootstrap 4 -->
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Текст кнопки</a>

Неактивное состояние кнопки

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

Для элемента button это действие осуществляется посредством добавления к нему атрибута disabled.

Bootstrap 4 - Кнопки, имеющие неактивное состояние
<!-- Bootstrap 3 -->
<button type="button" class="btn btn-primary" disabled>Текст кнопки</button>
<!-- Bootstrap 4 -->
<button type="button" class="btn btn-primary" disabled>Текст кнопки</button>

Для отключения функциональности кнопки, созданной с помощью элемента a, необходимо выполнить немного другое действие, а именно добавить к ней класс disabled.

Класс disabled отключает возможность клика по кнопке посредством установки ей (элементу a) CSS-свойства pointer-events со значением none.

Для обеспечения поддержки вспомогательных технологий, таких как программ чтения с экрана, к кнопке (элементу a) необходимо добавить атрибут aria-disabled = "true".

<!-- Bootstrap 3 -->
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Текст кнопки</a>
<!-- Bootstrap 4 -->
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Текст кнопки</a>

Плагин Buttons

Компонент "Buttons" включает в себя не только CSS, но JavaScript. Данный код (buttons.js) добавляет на страницу функционал, предназначенный для управления состоянием кнопок, как отдельных, так и находящихся в группах.

Использование кнопки в качестве переключателя

Для создания кнопки-переключателя добавьте к ней атрибут data-toggle="button". После этого при нажатии на кнопку она будет переключаться из обычного состояния в активное и наоборот.

Если кнопка изначально должна находиться в активном состоянии, то к ней необходимо добавить класс active и aria-pressed="true".

Bootstrap 4 - Кнопки-переключатели
<!-- Bootstrap 3 -->
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
    Кнопка-переключатель
</button>
<a href="#" class="btn btn-danger" data-toggle="button" aria-pressed="false" role="button">
    Кнопка-переключатель
</a>
<!-- Bootstrap 4 -->
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
    Кнопка-переключатель
</button>
<a href="#" class="btn btn-danger" data-toggle="button" aria-pressed="false" role="button">
    Кнопка-переключатель
</a>

Checkbox и radio кнопки

CSS-стили Buttons можно применить и к другим HTML элементам, таким как к label, чтобы создать checkbox или radio кнопки.

Bootstrap 4 - Checkbox и radio кнопки
<!-- Bootstrap 3 -->

<!-- Checkbox -->
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-success active">
        <input type="checkbox" checked autocomplete="off"> Показывать панель инструментов
    </label>
</div>

<!-- Radio buttons -->
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-warning active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Вариант 1
    </label>
    <label class="btn btn-warning">
        <input type="radio" name="options" id="option2" autocomplete="off"> Вариант 2
    </label>
    <label class="btn btn-warning">
        <input type="radio" name="options" id="option3" autocomplete="off"> Вариант 3
    </label>
</div>
<!-- Bootstrap 4 -->
<!-- Checkbox -->
<div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-success active">
        <input type="checkbox" checked autocomplete="off"> Показывать панель инструментов
    </label>
</div>

<!-- Radio buttons -->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-warning active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Вариант 1
    </label>
    <label class="btn btn-warning">
        <input type="radio" name="options" id="option2" autocomplete="off"> Вариант 2
    </label>
    <label class="btn btn-warning">
        <input type="radio" name="options" id="option3" autocomplete="off"> Вариант 3
    </label>
</div>

Атрибут data-toggle="buttons" предназначен для JavaScript. Он используется в его коде в качестве селектора для выбора элементов, к которым необходимо добавить поведение «переключения».

Состояние кнопок обновляется через событие click. Если необходимо использовать какой-то другой способ для обновления состояния checkbox или radio кнопок, то его нужно написать самостоятельно.

Класс btn-group-toggle (Bootstrap 4) предназначен для стилизации элементов input внутри группы.

Методы плагина Buttons

В Bootstrap 3 и 4 версии имеется метод $().button('toggle'). Он предназначен для программного переключения состояния одной или нескольких кнопок.

Например, создадим 2 кнопки, и с помощью одной кнопки будем переключать состояние другой:

<!-- Bootstrap 4 -->
<button type="button" id="toggle" class="btn btn-warning" autocomplete="off">
    Выключено
</button>
<button type="button" id="toggleState" class="btn btn-secondary" autocomplete="off">
    Переключить состояние 
</button>
...
<script>
    $('#toggleState').on('click', function () {
        var toggleBtn = $('#toggle');
        toggleBtn.button('toggle');
        toggleBtn.hasClass('active') ? toggleBtn.text('Включено') : toggleBtn.text('Выключено');
    });
</script>
Bootstrap 4 Buttons - Метод toggle

В Bootstrap 3 кроме вышеприведённого метода имеются ещё 2:

  • $().button('string') - изменяет текст кнопки на значение, хранящееся в атрибуте data-string-text (имя атрибута составляется путём сложения строки data-, строкового значения, переданного в функцию button, например string и строки -text);
  • $().button('reset') - заменяет текст на изначальный.

Пример работы с методами $().button('complete') и $().button('reset').

<!-- Bootstrap 3 -->
<button type="button" id="download" data-complete-text="Скачать ещё раз" class="btn btn-primary" autocomplete="off">
	Скачать
</button>
<button type="button" id="reset" class="btn btn-danger" autocomplete="off">
	Сбросить
</button>
...
<script>
    $('#download').on('click', function () {
        $(this).button('complete');
    });
    $('#reset').on('click', function () {
        $('#download').button('reset');
    });
</script>
Bootstrap 4 Buttons - Пример работы с методами

Этот пример состоит из 2 кнопок.

При нажатии на первую кнопку её текст изменяется на значение атрибута data-complete-text. Это действие выполняется с помощью метода $().button('complete').

При нажатии на вторую кнопку текст первой кнопки заменяется на изначальный. Осуществляется это посредством метода $().button('reset').