Кнопки в Bootstrap

Bootstrap содержит заготовленные оформления для 7 видов кнопок, а также дополнительные стили для указания размеров и стилей для нажатых кнопок.
Основные виды кнопок и их соответствия классам:
- Обычная - btn-default
- Основная - btn-primary
- Кнопка Ok - btn-success
- Уведомление - btn-info
- Предупреждение - btn-warning
- Отмена - btn-danger
- Ссылка - btn-link
Код кнопок
1 2 3 4 5 6 7 |
<button type="button" class="btn btn-default">Обычная</button> <button type="button" class="btn btn-primary">Основная</button> <button type="button" class="btn btn-success">Кнопка Ok</button> <button type="button" class="btn btn-info">Уведомление</button> <button type="button" class="btn btn-warning">Предупреждение</button> <button type="button" class="btn btn-danger">Отмена</button> <button type="button" class="btn btn-link">Ссылка</button> |
Стили кнопок в Bootstrap могут быть использованы для элементов <button>, <input type="button"> и гиперссылкам <a>. Для этого кнопке нужно присвоить класс .btn и один из классов для применения стиля. Для тэга <a> это будет выглядеть так:
1 |
<a class="btn btn-danger" href="#">Attention!</a> |
Аналогично для тэгов <input> и <button>.
Размеры кнопок Bootstrap
Кроме цвета, можно управлять и размером кнопок. В Bootstrap заложено 4 размера кнопок – btn-lg, btn-md, btn-sm, btn-xs:
1 2 3 4 |
<button type="button" class="btn btn-success btn-lg">Большая</button> <button type="button" class="btn btn-success btn-md">Средняя</button> <button type="button" class="btn btn-success btn-sm">Маленькая</button> <button type="button" class="btn btn-success btn-xs">Очень маленькая</button> |
Задать кнопкам блочные свойства
Кнопки в HTML являются строчными элементами управления. Для того, чтобы кнопка превратилась в блочный элемент, в Bootstrap есть класс .btn-block. Кнопка с классом .btn-block занимает 100% от ширины родительского элемента.
Активные и заблокированные кнопки
Для привлечения внимания к кнопке можно сделать ее активной, добавив для нее класс .active, а также можно отключить кнопку с помощью класса .disabled. Для кнопки с классом .disabled будут отключены нажатия.
Комментариев нет »
No comments yet.
RSS feed for comments on this post. TrackBack URL
Leave a comment
Популярное за месяц
- Excel. Как сделать выбор значения ячейки из списка
- Правила оформления текстовых документов по ГОСТ 7.32 - 2001
- Windows 8.1 – не меняется яркость экрана. Решение проблемы
- Как под рисунком сделать надпись в Word
- Изменить формат ссылок R1C1 в Excel
- Настроить автоматическую сортировку писем по папкам в Outlook
- Удалить ненужные профили в Xbox 360
- Как записать диск с MP3 программой Nero Burning Rom
- Условия в PowerShell
- Подключение мыши CBR CM530Bt к компьютеру
Новое на сайте
- Разрезать клип на части в Vegas Pro
- Разрешить воспроизведение видео MP4 на сайте
- Не отправляются сообщения при нажатии Enter в веб-версии WhatsApp в Chrome
- Не запрашивать пароль после отключения экрана в Windows 10
- Программа для склеивания видео MP4Joiner
- Не открывается крышка бензобака в Opel Antara
- Офигенные стекла для Honor 8 Lite на AliExpress
- Запросы для обновления базы данных WordPress при изменении адреса сайта
- Программы для контроля и ограничения использования телефона ребенка
- Запретить запуск приложений Windows
Популярное за 24 часа
- Windows 8.1 – не меняется яркость экрана. Решение проблемы
- Удалить ненужные профили в Xbox 360
- Как под рисунком сделать надпись в Word
- Подключение мыши CBR CM530Bt к компьютеру
- Excel. Как сделать выбор значения ячейки из списка
- Правила оформления текстовых документов по ГОСТ 7.32 - 2001
- Как записать диск с MP3 программой Nero Burning Rom
- Калибровочная карта для Xbox 360
- Исправление ошибки "FATAL ERROR: wglCreateContextAttribsARB failed" при запуске 3D игр на ноутбуке
- Добавить чекбокс (флажок, крыжик) в документе Word