Кнопки в Bootstrap 4 (button)

Кнопки в Bootstrap 4 (button)

Для стилизации кнопки в Bootstrap используйте класс .btn и через пробел необходимый стиль кнопки. Например, class="btn btn-primary" применяется для основных кнопок.

Ниже показан пример использования различных стилей кнопок в Bootstrap:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Элементы кнопок в Bootstrap

Стили кнопок Bootstrap 4 предназначены для использования с элементом <button>, но их также можно применять к элементам <input> и <a>. Внешне они будут выглядеть одинаково.

Вы также можете применять стили кнопок к элементу <label> при работе с флажками и переключателями (подробнее об этом далее).

<a class="btn btn-primary" href="#" role="button">Anchor</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">

Прозрачные кнопки с границей (бордером)

Для того, чтобы создать прозрачную кнопку с бордером в 1 пиксель соответствующего цвета, используйте класс .btn-outline-* где вместо звездочки нужно добавить ключевое слово соответствующего стиля. Например:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Размер кнопок в Bootstrap

Вы можете указать размер кнопки классами .btn-lg и .btn-sm. Первый сделает кнопку больше, второй меньше. Разместите их в дополнение к другим классам кнопок. Например:

<button type="button" class="btn btn-success btn-sm">Small</button>
<button type="button" class="btn btn-success">Default</button>
<button type="button" class="btn btn-success btn-lg">Large</button>

Блочные кнопки (кнопки на всю ширину)

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

<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>

Отключенные кнопки

Bootstrap предоставляет определенные стили для отключенного состояния disabled (а также для других состояний, например, активных).

Если вам нужно отключить кнопку, которая использует элемент <a>, вы так же можете использовать класс .disabled.

<p><a href="#" class="btn btn-primary btn-lg disabled" role="button">The 'a' Element</a></p>
<p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element</button></p>
<p><input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="The 'input' Element"></p>

Флажки (чекбоксы) и радио кнопки

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

Для этого вложите флажки или переключатели в элемент <label>, к которому применен соответствующий класс кнопок.

Кроме того, вложите элементы в элемент .btn-group, к которому также применены data-toggle="buttons".

Флажки

Пример использования стиля button с флажками:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" name="options" id="option1" autocomplete="off" checked> Кнопка 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" name="options" id="option2" autocomplete="off"> Кнопка 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" name="options" id="option3" autocomplete="off"> Кнопка 3
  </label>
</div>

Радио кнопки

Так же, это работает и для переключателей (радио кнопок):

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Переключатель 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Переключатель 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Переключатель 3
  </label>
</div>

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*