Учебник по Bootstrap 4

BS4 ГЛАВНАЯ BS4 Начать Контейнеры BS4 Базовая сетка BS4 Типография BS4 Цвета BS4 Таблицы BS4 Изображения BS4 BS4 Джамботрон Оповещения BS4 Кнопки БС4 Группы кнопок BS4 Значки BS4 Индикаторы выполнения BS4 Спиннеры BS4 BS4 Пагинация Группы списков BS4 Карты BS4 Выпадающие списки BS4 Свернуть BS4 BS4 Навс BS4 навигационная панель БС4 Формы Входы БС4 Входные группы BS4 Пользовательские формы BS4 BS4 Карусель BS4 модальный Подсказка BS4 BS4 всплывающее окно BS4 Тост BS4 прокрутки Утилиты BS4 BS4 Flex Иконки BS4 Медиа-объекты BS4 Фильтры BS4

Bootstrap 4 Сетка

Сетевая система BS4 BS4 Сложенный/горизонтальный BS4 Сетка XSмаленький BS4 Малая сетка Сетка BS4 средняя BS4 Сетка большая BS4 Сетка XLarge Примеры сетки BS4

Начальная загрузка 4 Другое

Базовый шаблон BS4 Упражнения BS4 Викторина БС4

Начальная загрузка 4 Ссылка

Все классы JS-оповещение JS-кнопка JS Карусель Свернуть JS Выпадающий список JS Модальный JS JS всплывающее окно JS прокрутка Вкладка JS JS тосты JS-подсказка


Кнопка Bootstrap 4 JS


Классы CSS кнопок

Учебник по кнопкам можно найти в нашем учебнике по кнопкам Bootstrap .

Приведенные ниже классы можно использовать для стилизации любого элемента <a>, <button> или <input>:

Class Description Example
.btn Adds basic styling to any button
.btn-block Makes a block-level button (spans the full width of the parent element)
.btn-danger Indicates a dangerous or potentially negative action
.btn-dark Dark grey button
.btn-default Indicates a default/standard button
.btn-info Contextual button for informational alert messages
.btn-lg Makes a large button
.btn-light Light grey button
.btn-link Makes a button look like a link (will still have button behavior)
.btn-outline-* Creates an outlined/bordered button. Use any of the contextual classes as * (btn-outline-primary, btn-outline-success, etc)
.btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
.btn-sm Makes a small button
.btn-success Indicates a successful or positive action
.btn-secondary Indicates a "less" important action
.btn-toolbar Combine sets of button groups into button toolbars for more complex components
.btn-warning Indicates caution should be taken with this action
.active Makes the button appear pressed
.disabled Makes the button disabled

Через JavaScript

Включить вручную с помощью:

$('.btn').button();

Параметры кнопки

None

Методы кнопки

В следующей таблице перечислены все доступные методы кнопок.

Примечание. Методы также можно передавать через атрибуты данных; добавьте имя метода к data-, как в data-toggle или data-dispose.

Method Description Try it
.button("toggle") Makes the button look pressed
.button("dispose") Destroys an element's button