Эта статья научит вас:
- Как сделать кнопки в Bootstrap?
- Как создать кнопки контура в Bootstrap?
- Как настроить размеры кнопок Bootstrap?
- Как сделать кнопку уровня блока в Bootstrap?
- Как создать кнопки активного состояния в Bootstrap?
- Как создать кнопки отключенного состояния в Bootstrap?
Как сделать кнопки в Bootstrap?
Начальная загрузка» бтн ” используется для создания кнопок. Чтобы добавить стилизованные кнопки, вы можете использовать « бтн ” с классом цвета, например “ btn-успех », чтобы создать зеленую кнопку.
В HTML « <кнопка> », « <а> ', и ' <ввод> ” теги типа “ кнопка ” используются для создания кнопок. “ бтн ” имеет предопределенные стили, которые добавляют основные стили к элементам кнопок.
Для ясности концепции ознакомьтесь с примером ниже.
Пример
В файле HTML выполните шаги для создания кнопок с использованием разных тегов:
- Добавлять ' <кнопка> ' и ' <а> ” элементы и назначьте им “ бтн ' и ' btn-основной ” классы.
- Затем добавьте « <ввод> ” с типом “ кнопка ». Назначьте ему « бтн ' и ' btn-успех » для оформления первых двух кнопок синим цветом, а третьей — зеленого цвета:
< а класс знак равно 'btn btn-основной' href знак равно '#' > Открыть < / а >
< вход тип знак равно 'кнопка' класс знак равно 'бтн бтн-успех' ценить знак равно 'Поиск' >
Вывод
Как создать кнопки контура в Bootstrap?
Чтобы добавить контуры кнопок, Bootstrap « кнопка-схема-* используется класс ». В его синтаксисе « * ” здесь представляет цвет контура. Например, ' btn-схема-опасность ” размещает красный контур, “ btn-контур-основной » задает синий контур и многое другое.
Проанализируйте приведенный ниже код:
< кнопка тип знак равно 'кнопка' класс знак равно 'btn btn-контур-основной' >Далее< / кнопка >< кнопка тип знак равно 'кнопка' класс знак равно 'btn btn-контур-опасность' >Отмена< / кнопка >
< кнопка тип знак равно 'кнопка' класс знак равно 'btn btn-контур-успех' >Успех< / кнопка >
Можно заметить, что « Следующий кнопка имеет синюю окантовку, кнопка « Отмена ” с красным контуром, а “ Успех Кнопка имеет зеленый контур:
Как настроить размеры кнопок Bootstrap?
Некоторые классы Bootstrap применяются для настройки размеров кнопок, например:
- “ бтн-лг ” применяется для создания большой кнопки. Этот класс может увеличить размер шрифта и отступы.
- “ бтн-мд ” создает кнопку среднего размера.
- “ бтн-см ” создает маленькую кнопку.
Пример
Теперь мы создадим три кнопки разных размеров и с понятными именами:
< кнопка тип знак равно 'кнопка' класс знак равно 'бтн бтн-вторичный бтн-лг' >Большой< / кнопка >< кнопка тип знак равно 'кнопка' класс знак равно 'бтн бтн-предупреждение бтн-мд' >средний< / кнопка >
< кнопка тип знак равно 'кнопка' класс знак равно 'бтн бтн-опасность бтн-см' >Маленький< / кнопка >
Вывод
Как сделать кнопку уровня блока в Bootstrap?
Кнопки блочного уровня — это те, которые содержат размер полной ширины. Чтобы создать кнопки блочного уровня, « btn-блок ” класс используется следующим образом
< кнопка тип знак равно 'кнопка' класс знак равно 'btn btn-предупреждение btn-блок' > кнопка< / кнопка >< кнопка тип знак равно 'кнопка' класс знак равно 'btn btn-вторичный btn-блок' >кнопка< / кнопка >
Вывод
Как создать кнопки активного состояния в Bootstrap?
Кнопки активного состояния относятся к кнопкам, которые активны в данный момент. Эти кнопки немного темнее, чем обычно. Чтобы создать такие кнопки, Bootstrap « активный используется класс ».
Пример
Код ниже создает две кнопки. Первый находится в нормальном состоянии, а другой применяется с « активный ' класс:
< кнопка тип знак равно 'кнопка' класс знак равно 'бтн бтн-успех' >Успех< / кнопка >< кнопка тип знак равно 'кнопка' класс знак равно 'btn btn-успех активен' >Успех< / кнопка >
Вывод
Как создать кнопки отключенного состояния в Bootstrap?
Кнопки отключенного состояния относятся к кнопкам, на которые нельзя нажать и которые нельзя использовать. В Bootstrap « отключен » используется для создания кнопки отключенного состояния. “ отключен Атрибут ” также может быть использован для этой цели.
Пример
Ознакомьтесь с приведенным ниже примером:
- Первая кнопка не находится в отключенном состоянии.
- Второй использует « отключен », чтобы создать кнопку отключенного состояния.
- Третий использует « отключен атрибут:
< кнопка тип знак равно 'кнопка' класс знак равно 'btn btn-успех отключен' >Успех< / кнопка >
< кнопка тип знак равно 'кнопка' класс знак равно 'бтн бтн-успех' отключен>Успех< / кнопка >
Вывод
Мы рассмотрели различные аспекты, связанные с кнопками Bootstrap и их стилем в CSS.
Заключение
“ бтн ” используется для создания кнопок Bootstrap с простым дизайном. Чтобы создать цветные и контурные кнопки, « кнопка-* ' и ' кнопка-схема-* » классы используются там, где « * ” символизирует любой цветовой класс. Например, ' кнопка-предупреждение ” создает желтую кнопку, “ btn-схема-предупреждение ” создает кнопку с желтым контуром и многое другое. Чтобы сделать кнопки активными или отключенными, применяются классы «активный» и «отключенный» соответственно. Этот пост содержит подробное руководство по кнопкам Bootstrap.