Как создавать кнопки в Bootstrap 5?

Теги кнопок — использование классов кнопок с разными тегами

Классы кнопок поддерживаются в элементах , и . Ниже приведены примеры кода для использования классов кнопок Bootstrap с различными тегами HTML:

<a class="btn btn-primary" href="https://www.webnots.com/bootstrap-buttons-tutorial/#" role="button" style="color:white;">Anchor Tag</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input tag with type button">
<input class="btn btn-primary" type="submit" value="Input tag with type submit">
<input class="btn btn-primary" type="reset" value="Input tag with type reset">

Хотя элементы и атрибуты разные, внешний вид будет определяться на основе используемых классов CSS. В приведенном выше примере мы использовали «btn-primary», поэтому все кнопки будут созданы с основным синим цветом.

Кнопки контура

Начиная с Bootstrap 4 и 5, у вас также есть новый вариант для создания выделенных кнопок вместо обычных кнопок с заполненными цветами. Вам нужно добавить класс схемы, как показано ниже, чтобы создать кнопки с разным цветом:

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

Обведенные кнопки будут выглядеть так, как показано ниже, и при наведении курсора будут отображать соответствующие цвета:

Не забудьте включить дополнительный служебный класс текста «.text-dark» с кнопкой со светлым контуром. В противном случае текст может быть нечетко виден.

Различных размеров

Bootstrap позволяет создавать кнопки трех размеров: большие, стандартные и маленькие. Сверхмаленькая опция, доступная в Bootstrap 3, была удалена в версии Bootstrap 4 и далее. Различные размеры показаны ниже со стилем предупреждения:

Вот кнопка создания кода с разными размерами:

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

Классы «.btn-lg» и «.btn-sm» используются для большего и меньшего размеров.

Кнопки блока полной ширины

Во всех приведенных выше примерах создаются кнопки, размер которых зависит от длины текста, заполнения и полей. Также есть возможность создать кнопку блока, которая унаследует ширину от родительского элемента. Это полезно для создания кнопок полной ширины, заключая код кнопки в любой родительский элемент (например, тег

) шириной 100%.

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

<div>
<button type="button" class="btn btn-success btn-block">Full Width Success Block Button</button>
<button type="button" class="btn btn-secondary btn-block">Full width Secondary Block Button</button>
</div>

Активные и отключенные кнопки

По умолчанию, когда кнопка нажата, она меняется на более темный цвет, чтобы указать, что она находится в активном состоянии. Вы также можете вручную установить активное состояние кнопки при ее загрузке, добавив класс «.active» вместе с aria-press = «правда» атрибут. . Точно так же вы можете отключить нажатие кнопок, добавив класс «.disabled».

<a href="https://www.webnots.com/bootstrap-buttons-tutorial/#" class="btn btn-info active" role="button" aria-pressed="true" style="color:white;">Active Link Info Button</a>
<button type="button" class="btn btn-success" disabled aria-disabled="true">Disabled Success Button</button>

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

На заметку:

1. Обратите внимание, что элемент «.disabled» не поддерживается тегом . Хотя кнопка выглядит неактивной с тусклым цветом, гиперссылка будет продолжать работать как обычно при нажатии.
2. Класс «.disabled» использует «события-указатели: нет;» для отключения щелчков мышью. Но элемент все еще можно сфокусировать и нажать с помощью клавиш клавиатуры.
3. Класс «.disabled» не является частью базового класса «.btn», его следует добавлять вне классов кнопок.

Плагин кнопок

На данный момент мы обсудили кнопки, стилизованные под «bootstrap.min.css». В следующих разделах вы увидите создание эффектов переключения с помощью JavaScript, включенного в файл «bootstrap.min.js».

Переключение кнопки с помощью щелчка

Просто добавьте data-toggle = «кнопка» для переключения кнопки в активное состояние при нажатии.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Click the button to see the toggle effect
</button>

Если вы хотите загрузить кнопку с переключенным активным состоянием, вам необходимо вручную добавить класс «.active», как описано ранее для создания активных кнопок. Также добавьте aria-press = «правда» чтобы сообщить программам чтения с экрана, что кнопка загружена в активном состоянии.

Кнопка переключения с флажком

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

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Option 1 (selected)
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Option 2
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Option 3
</label>
</div>

В этом примере первая кнопка загружается в активном состоянии с использованием класса «.active» с параметром «checked» для тега . На рисунке ниже показано состояние после нажатия второй кнопки (первая и вторая кнопки выбраны как флажок).

Переключение кнопок с помощью радиокнопок

Опция переключателей используется для переключения одной кнопки за раз, аналогично выбору обычных переключателей.

Ниже приведен код для создания групп кнопок с переключателями-переключателями.

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (selected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Option 3
</label>
</div>

---

Изучите Bootstrap 5 (Индекс)

---