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 Неактивна кнопка

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
Егор

Подскажите пожалуйста, как настроить цвет кнопки класса 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’]

Заранее благодарен

Djal

Вопрос а как присвоить одновременно несколько стилей?

lKaSTieL

Спасибо за урок. В конце в общей справке не хватает 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-*, и перекрывает заданный в кнопке размер. Плюс по стилям для соседних кнопок и групп было бы интересно. Но это не критика), прошу принять это во внимание )

Назар Токарь

@Андрей, о группировке кнопок не написал, надо добавить, спасибо.

Павел

Действительн овсес очень круто…Спасибо

Вася

Спасибо!
Оч. доступноизложено.
Еще раз благодарю.
Разбогатею куплю лицензию.

Олег

Назар, все гуд. Информация ценная. Удобно в одном месте читать все о бутстрапе без воды.
Спасибо!

Назар Токарь

Спасибо, я соберу мелкими уроками основные тезисы по работе с этим фреймворком. Как верно заметили, это из мануала и других сайтов по мелочи, без лишнего и с пояснениями. Именно то, чего лично мне не хватало для начала работы.

Artur

Ты просто копируешь документацию bootstrap

Назар Токарь

Спасибо, ваш комментарий очень ценен.