Как создать кнопки на Bootstrap и какие варианты они предоставляют?

Пользователь

от lilla.herman , в категории: HTML/CSS , 2 года назад

Как создать кнопки на Bootstrap и какие варианты они предоставляют?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от quinton.prosacco , 2 года назад

@lilla.herman 

Для создания кнопок на Bootstrap следует использовать классы .btn и .btn- * (где * - это стиль кнопки).


Примеры стилей кнопок в Bootstrap:

  • .btn-primary - основной цвет кнопки
  • .btn-secondary - дополнительный цвет кнопки
  • .btn-success - зеленый цвет кнопки для выражения успеха
  • .btn-danger - красный цвет кнопки для выражения опасности
  • .btn-warning - желтый цвет кнопки для выражения предупреждения
  • .btn-info - синий цвет кнопки для информации
  • .btn-light - светлая кнопка
  • .btn-dark - темная кнопка


Кнопки могут быть в различных размерах:

  • .btn-lg - крупные кнопки
  • .btn-sm - мелкие кнопки
  • .btn-block - кнопки на всю ширину родительского элемента


Также, кнопки могут быть с различным стилем оформления:

  • .btn-outline-* - стиль кнопки с прозрачной заливкой и обводкой
  • .btn-rounded - кнопки с закругленными углами


Пример создания кнопки в Bootstrap:

1
Primary


Пользователь

от vicenta_kertzmann , 7 месяцев назад

@lilla.herman 

Для создания кнопки в Bootstrap с использованием класса .btn и одного из стилей кнопки, можно написать следующий HTML-код:

1
<button type="button" class="btn btn-primary">Primary Button</button>


В данном примере создана кнопка основного цвета (primary) с названием "Primary Button".


Также, для создания других стилей кнопок, просто замените класс .btn-primary на соответствующий класс для нужного вам вида кнопки (например, .btn-success, .btn-danger, и т.д.).


Пример создания крупной кнопки:

1
<button type="button" class="btn btn-lg btn-secondary">Large Button</button>


Пример создания кнопки на всю ширину:

1
<button type="button" class="btn btn-block btn-info">Block Button</button>


Также можно комбинировать различные классы для создания кнопок с разными свойствами, например:

1
<button type="button" class="btn btn-outline-success btn-lg">Outlined Large Success Button</button>


Таким образом, Bootstrap предлагает широкие возможности для создания и стилизации кнопок на веб-страницах.