Назар Токар
Опубліковано: 15 Лютого 2015
Оновлено: 13 Січня 2018

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

← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

19 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією

Добрый день. Помогите пожалуйста вставить ссылку с именем кнопки [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

стили кнопок можно применять не только к инпутам, батонам или анкорам, кстати.. я по незнанию фигачил их и в , и к , и в прочее.. эффекты достаточно необычные получаются) поэкспериментируйте

Автор
Назар Токар

@Роман, к чему, например? :)

@Назар Токарь, не знаю)) я юзаю)) только курсор в стиле поменял. Ничего зато придумывать не надо

@Назар Токарь, да просто применять стили кнопок к указанным элементам http://jsfiddle.net/Laroux/vdorzurk/

Автор
Назар Токар

@Роман, а, неплохо :). Блок будет выглядеть как кнопка, только на практике вряд ли будет очень полезно.

@Назар Токарь, тэги "съелись")) к div, к i, к b и т.д. Получается иногда достаточно интересно.. к div мне больше всего понравилось)

Автор
Назар Токар

@Роман, а приведите пример кода пож-та, хочу увидеть, как вы это делаете. На jsfiddle или куда хотите можете загрузить.

Назар, спасибо, подача хороша. По кнопкам, правда, хотелось бы еще видеть инфу по btn-group, btn-group-* (с добавлением размеров). Тут интересно, что btn-group-* обладает большим приоритетом, чем btn-*, и перекрывает заданный в кнопке размер. Плюс по стилям для соседних кнопок и групп было бы интересно. Но это не критика), прошу принять это во внимание )

Автор
Назар Токар

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

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

Спасибо!

Оч. доступноизложено.

Еще раз благодарю.

Разбогатею куплю лицензию.

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

Автор
Назар Токар

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

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

Автор
Назар Токар

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