Кнопки в Bootstrap

Кнопка или ссылка?

В классическом понимании web'а, кнопки — управляющий элемент интерфейса, который меняет состояние содержимого на сайте. Когда элемент меняет адрес страницы, он является ссылкой, ведь ссылки для этого и предназначены.

Ссылка и кнопка — не одно и то же.

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

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

Теги кнопок

Как кнопки могут быть оформлены следующие HTML-теги: <a>, <button> или <input>.

Ссылка Кнопка

<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="Кнопка">
<input class="btn btn-default" type="submit" value="Отправка">

Обратите внимание кнопка имеет два класса .btn и .btn-default, они указываются через пробел. Чуть позже в этом уроке, вы поймете, почему так.

Стилизация кнопок

Для стилизации кнопок, используются CSS классы. Так .btn-default в предыдущем примере оформляет кнопку «по умолчанию». Модель кнопок в Bootstrap имеет поведенческий фактор, т.е. цвет кнопке назначается в зависимости от того, какое событие она вызывает. Отсюда и названия классов. Пример:

Default Primary Success Info Warning Danger Link

<!-- Обычная кнопка -->
<button type="button" class="btn btn-default">Default</button>

<!-- Обозначает ключевое действие -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Обеспечивает успешное или положительное действие -->
<button type="button" class="btn btn-success">Success</button>

<!-- Кнопка с контекстом информационного сообщения -->
<button type="button" class="btn btn-info">Info</button>

<!-- Кнопка, нажатие которое требует осторожности -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Опасное или негативное действие -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Обычная ссылка -->
<button type="button" class="btn btn-link">Link</button>

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

Размеры кнопок

Размер кнопки может быть задан за счет добавления CSS класса: .btn-lg, .btn-sm или .btn-xs.

Пример:

Большая кнопка Большая кнопка

Обычная кнопка Обычная кнопка

Маленькая кнопка Маленькая кнопка

Очень маленькая кнопка Очень маленькая кнопка

Исходный код:

<p>
 <button type="button" class="btn btn-primary btn-lg">Большая кнопка</button>
 <button type="button" class="btn btn-default btn-lg">Большая кнопка</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Обычная кнопка</button>
 <button type="button" class="btn btn-default">Обычная кнопка</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>
 <button type="button" class="btn btn-default btn-sm">Маленькая кнопка</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Очень маленькая кнопка</button>
 <button type="button" class="btn btn-default btn-xs">Очень маленькая кнопка</button>
</p>

Обратите внимание, ширина кнопок устанавливается в соответствии с их содержимым (текстом). Когда нужна кнопка на всю доступную ширину, можно использовать класс .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>

Состояния кнопок

После нажатия кнопка меняет свое состояние на активное, для этого в CSS есть даже специальный псевдо-класс ::active. Чтобы сделать кнопку активной принудительно, можно добавить к ней класс .active:

Нажатая кнопка Обычная кнопка

<button type="button" class="btn btn-default btn-lg active">Активная кнопка</button>
<button type="button" class="btn btn-default btn-lg">Обычная кнопка</button>

Еще одно состояние — выключенная кнопка:

Кнопка выключена Кнопка выключена Обычная кнопка

Этого можно добиться за счет класса .disabled или атрибута кнопки disabled="disabled". Последний, кстати, не работает для <a>:

<button type="button" class="btn btn-default btn-lg disabled" >Кнопка выключена</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Кнопка выключена</button>
<button type="button" class="btn btn-default btn-lg">Обычная кнопка</button>

На этом урок окончен. Вы еще не раз вернетесь к нему, когда будете работать непосредственно с шаблоном сайта. Поэтому рекомендую добавить урок в закладки.