Как создать кнопку контура в Bootstrap 4?
Прежде чем приступить к работе с классами контура начальной загрузки, просто узнайте немного о контуре кнопки. Контур на кнопках означает создание контура вокруг кнопок. Этот класс '.btn-outline' удаляет все фоновые цвета или стили с кнопки, чтобы придать внешней кнопке эффективный, более светлый и яркий вид. По сути, кнопка контура отвечает за нарисованную выделенную рамку вокруг кнопки.
Наброски кнопок используются для многих целей, таких как –
- Чтобы придать эффектный вид кнопкам.
- Для обозначения действия, выходящего за рамки текущего рабочего механизма.
- Чтобы нарисовать контуры выделения вокруг кнопок, чтобы они выглядели иначе, чем обычные кнопки.
- Сделать кнопку «Выделиться».
- Дать разные стили для действий в формах и диалогах.
Подход: в Bootstrap 4 есть контекстные классы по умолчанию или предопределенный класс с классом «.btn-outline». Есть несколько встроенных цветных кнопок, которые выделяют классы в bootstrap 4, которые используются для другой цели.
Классы контуров кнопок:
- .btn-контур-основной
- .btn-контур-вторичный
- .btn-контур-успех
- .btn-схема-опасность
- .btn-контур-предупреждение
- .btn-схема-информация
- .btn-контур-свет
- .btn-контур-темный
Включите Bootstrap4 и jQuery CDN в тег <head> перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
Пример 1. В этом примере мы можем увидеть все типы контекстных классов контуров кнопок в начальной загрузке и узнать, как они используются на веб-странице.
Выход:
Пример 2: В этом примере мы используем счетчик внутри кнопки структуры, в которой кнопки указывают, что действие в настоящее время обрабатывается или происходит.
Выход:
Пример 3: В этом примере мы видим контекстные классы контура кнопок с разными глифами и размерами.
Выход: