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
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

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

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

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

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

17 коментарів

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

Спасибо за урок. В конце в общей справке не хватает 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

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

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