Bootstrap включає оформлення для семи видів кнопок:
Щоб кнопка відображалася в потрібному вам стилі, надайте їй відповідний клас:
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Даний приклад показує, яким повинен бути код для кнопок з прикладу:
<button type="button" class="btn btn-default">Стандартна</button> <button type="button" class="btn btn-primary">Основна</button> <button type="button" class="btn btn-success">Підтвердити</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
і один з класів, щоб додати їй стиль. Для прикладу візьмемо .btn-default
.
<a class="btn btn-default" href="#" role="button">Кнопка</a> <button class="btn btn-default" type="submit">Кнопка</button> <input class="btn btn-default" type="button" value="Кнопка">
В результаті ми отримаємо три елемента, що виглядають однаково.
Розміри кнопок
Bootstrap дозволяє змінювати розмір кнопки за допомогою додаткового класу. За замовчуванням у вас є вибір з чотирьох розмірів кнопки:
Код кнопок з прикладу:
<button type="button" class="btn btn-primary btn-lg">Велика</button> <button type="button" class="btn btn-primary btn-md">Середня</button> <button type="button" class="btn btn-primary btn-sm">Маленька</button> <button type="button" class="btn btn-primary btn-xs">Ще менша</button>
Класи, які визначають розміри кнопок:
.btn-lg
.btn-md
.btn-sm
.btn-xs
Блочні кнопки
Ви можете перетворити рядкові кнопки в блокові елементи. Для цього надайте їм клас .btn-block
.
<button type="button" class="btn btn-primary btn-lg btn-block">Блочна кнопка</button> <button type="button" class="btn btn-default btn-lg btn-block">Блочна кнопка</button>
Активні і заблоковані кнопки
Кнопці можна призначити активний (натиснутий) вид, а також їхній заблокований статус. Клас .active
відображає, як кнопка виглядає під час натискання, а клас .disabled
робить її неактивною.
Повна довідка по кнопкам в Bootstrap
Клас | Опис |
---|---|
.btn |
Додає базове оформлення кнопці |
.btn-default |
Стандартний вид кнопки |
.btn-primary |
Основна кнопка |
.btn-success |
Підтвердження |
.btn-info |
Кнопка для інформаційних повідомлень |
.btn-warning |
Кнопка для попереджень |
.btn-danger |
Кнопка відміни, очистки форми |
.btn-link |
Кнопка, що виглядає як посилання |
.btn-lg |
Великий розмір кнопки |
.btn-sm |
Маленький розмір |
.btn-xs |
Ще менший розмір |
.btn-block |
Блочний вид кнопки (вона займає всю ширину батьківського елементу) |
.active |
Кнопка вигладяє натиснутою |
.disabled |
Неактивна кнопка |
Подскажите пожалуйста, как настроить цвет кнопки класса btn btn-block btn-default btn-lg?
Заранее спасибо:))
Добрый день. Помогите пожалуйста вставить ссылку с именем кнопки [pricing_table style=”2″][plan name=’Plan 1′ price=’10’ before=’$’ period=’weekly’ background=’#f94320′ color=’#500707′ border=’#faf675′ shadow=’none’ icon=’icon: camera’ icon_color=’#333333′ icon_size=’48’ btn_target=’self’ btn_background=’#999999′ btn_color=’#ffffff’]
Заранее благодарен
Вопрос а как присвоить одновременно несколько стилей?
Спасибо за урок. В конце в общей справке не хватает btn-md. Так-же попробовал класс btn-active(как для ячеек), вроде работает(серого цвета кнопка) и с active конфликтов не возникает, интересно, таким классом можно кнопку оформлять?
Очень круто написано, очень понятно, даже для самых новичков, есть маленькая ошибочка в Полная справка по кнопкам в Bootstrap , пропущен средний размер кнопки .btn-md
стили кнопок можно применять не только к инпутам, батонам или анкорам, кстати.. я по незнанию фигачил их и в , и к , и в прочее.. эффекты достаточно необычные получаются) поэкспериментируйте
@Роман, к чему, например? :)
@Назар Токарь, тэги “съелись”)) к div, к i, к b и т.д. Получается иногда достаточно интересно.. к div мне больше всего понравилось)
@Роман, а приведите пример кода пож-та, хочу увидеть, как вы это делаете. На jsfiddle или куда хотите можете загрузить.
@Назар Токарь, да просто применять стили кнопок к указанным элементам http://jsfiddle.net/Laroux/vdorzurk/
@Роман, а, неплохо :). Блок будет выглядеть как кнопка, только на практике вряд ли будет очень полезно.
@Назар Токарь, не знаю)) я юзаю)) только курсор в стиле поменял. Ничего зато придумывать не надо
Назар, спасибо, подача хороша. По кнопкам, правда, хотелось бы еще видеть инфу по btn-group, btn-group-* (с добавлением размеров). Тут интересно, что btn-group-* обладает большим приоритетом, чем btn-*, и перекрывает заданный в кнопке размер. Плюс по стилям для соседних кнопок и групп было бы интересно. Но это не критика), прошу принять это во внимание )
@Андрей, о группировке кнопок не написал, надо добавить, спасибо.
Действительн овсес очень круто…Спасибо
Спасибо!
Оч. доступноизложено.
Еще раз благодарю.
Разбогатею куплю лицензию.
Назар, все гуд. Информация ценная. Удобно в одном месте читать все о бутстрапе без воды.
Спасибо!
Спасибо, я соберу мелкими уроками основные тезисы по работе с этим фреймворком. Как верно заметили, это из мануала и других сайтов по мелочи, без лишнего и с пояснениями. Именно то, чего лично мне не хватало для начала работы.
Ты просто копируешь документацию bootstrap
Спасибо, ваш комментарий очень ценен.