15 Лютий 2015
Рубрика: уроки

Уроки по Bootstrap. Урок №4: кнопки

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 Неактивная кнопка
Тепер я хочу бачити коментарі 16