ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap 4 JS Button


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

Для учебника о кнопках, прочитайте наши загрузочные кнопки учебник.

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

Класс Описание
.btn Добавление базовой стилизации к любой кнопке
.btn-block Делает кнопку уровня блока (охватывает всю ширину родительского элемента)
.btn-danger Указывает на опасное или потенциально отрицательное действие
.btn-dark Темная серая кнопка
.btn-default Указывает кнопку по умолчанию/Стандартная
.btn-info Контекстная кнопка для информационных предупреждающих сообщений
.btn-lg Делает большую кнопку
.btn-light Светлая серая кнопка
.btn-link Делает кнопку выглядеть как ссылка (все равно будет иметь поведение кнопки)
.btn-outline-* Создание контурной/обрамленной кнопки. Используйте любой из контекстуальных классов как * (BTN-контур-основной, BTN-план-успех, и т.д.)
.btn-primary Обеспечивает дополнительный визуальный вес и определяет основное действие в наборе кнопок
.btn-sm Делает маленькую кнопку
.btn-success Указывает на успешное или положительное действие
.btn-secondary Указывает на "менее" важное действие
.btn-toolbar Объединение наборов кнопок в панели инструментов кнопок для более сложных компонентов
.btn-warning Указывает на осторожность следует принимать с этим действием
.active Делает нажатой кнопку
.disabled Делает кнопку отключенной

Через JavaScript

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

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

Button Options

None

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

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

Примечание: Методы также могут передаваться через атрибуты данных; Добавьте имя метода в Data-, как при переключении данных или в методе Data-Dispose.

Метод Описание
.button("toggle") Makes the button look pressed
.button("dispose") Destroys an element's button