1. Использование предопределенных классов: Bootstrap предоставляет предопределенные классы для управления размером кнопок. Вы можете использовать такие классы, как btn-lgдля больших кнопок, btn-smдля маленьких кнопок и btn-block, чтобы сделать кнопку полноразмерной. ширина.

Пример:

<button class="btn btn-lg">Large Button</button>
<button class="btn btn-sm">Small Button</button>
<button class="btn btn-block">Full-width Button</button>

2. Настройка размеров кнопок с помощью CSS. Вы также можете настроить размер кнопок, добавив свои собственные правила CSS. Используйте свойства paddingи font-size, чтобы настроить размер кнопки в соответствии с вашими требованиями.

Пример:

<button class="btn custom-btn">Custom Button</button>

.custom-btn {
  padding: 10px 20px;
  font-size: 16px;
}

3. Использование служебных классов определения размера Bootstrap: Bootstrap предоставляет набор служебных классов определения размера, которые можно применять к кнопкам. К этим классам относятся btn-sm, btn-lg, btn-xlи т. д. Вы можете комбинировать их с другими классами для получения нужной кнопки. размер.

Пример:

<button class="btn btn-primary btn-sm">Small Primary Button</button>
<button class="btn btn-secondary btn-lg">Large Secondary Button</button>

4. Изменение переменных Sass Bootstrap. Если вы используете Sass для настройки Bootstrap, вы можете изменить переменные Sass, связанные с размерами кнопок. Переопределив значения по умолчанию для переменных, таких как $btn-padding-*и $btn-font-size-*, вы можете контролировать размер кнопок во всем проекте.

Пример:

$btn-padding-sm: 5px 10px;
$btn-font-size-sm: 14px;
.custom-btn {
  padding: $btn-padding-sm;
  font-size: $btn-font-size-sm;
}