2. SIMAI Framework - Универсальная веб-платформа для создания интерфейса информационных систем
  3. UI
  4. Компоненты

Кнопки

Кнопки – одни из самых распространенных компонентов, которые позволяют организовать взаимодействие пользователя с интерфейсом сайта.

Структура

Для оформления кнопок вы можете использовать тег кнопок - button или ссылок - button. Кнопки обозначаются классом .btn.

Ссылка 
<button type="button" class="btn btn-default">Кнопка</button>
<a href="#" class="btn btn-default">Ссылка</a>

Модификаторы

С помощью модификаторов вы можете в широких пределах изменять отображение и поведение кнопок. Порядок использования модификаторов: .btn {цвет} {размер} {стиль} {состояние} {эффекты}

Цвет кнопок

В рамках SIMAI Framework, вы можете использовать базовые цвета, цвета темы и произвольное цветовое оформление.

Базовые цвета

Используйте базовую палитру цветов для кнопок:

  • .btn-default – цвет по умолчанию
  • .btn-primary – основной цвет сайта
  • .btn-secondary – дополнительный цвет сайта
  • .btn-success – цвет успеха
  • .btn-info – цвет информирования
  • .btn-warning – цвет предупреждения
  • .btn-danger – цвет опасности
  • .btn-ссылка – без цвета - в виде ссылки
<button type="button" class="btn btn-primary">Главный</button>
<button type="button" class="btn btn-secondary">Вторичный</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-ссылка">Ссылка</button>

Цвета темы

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

<section class="theme-light w-50 float-left p-4 t-center">
  <button href="#" class="btn btn-theme wave">Тема</button>
  <button href="#" class="btn btn-theme-inverse wave">Противоположная</button>			
</section>
<section class="theme-dark w-50 float-left p-4 t-center">
  <button href="#" class="btn btn-theme">Тема</button>
  <button href="#" class="btn btn-theme-inverse">Противоположная</button>
</section>

Произвольные цвета

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

<button type="button" class="btn bg-pink c-white">Розовая</button>
<button type="button" class="btn bg-fb c-white">Facebook</button>
<button type="button" class="btn bg-g1 c-white">SIMAI</button>
<button type="button" class="btn bg-gray-50 c-gray-800 wave">Светлая</button>

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

Адаптивный модификатор. Позволяет изменять размер кнопки. Использование: .btn{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер кнопки только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер кнопки. Принимает значения:
    • -2 – маленькие кнопки (75% от базового размера)
    • -1 – уменьшенные кнопки (87,5% от базового размера)
    • 0 – базовый размер (по умолчанию)
    • 1 – увеличенные кнопки (125% от базового размера)
    • 2 – большие кнопки (150% от базового размера)
<button type="button" class="btn btn-default btn--2">Очень маленькая</button>
<button type="button" class="btn btn-default btn--1">Маленькая</button>
<button type="button" class="btn btn-default btn-0">Стандартная</button>
<button type="button" class="btn btn-default btn-1">Большая</button>
<button type="button" class="btn btn-default btn-2">Очень Большая</button>

Пример использования в адаптивном режиме:

<button type="button" class="btn btn-default btn-0 btn-md-1 btn-xl-2">Кнопка</button>

Стили кнопок

Вы можете использовать следующие модификаторы для задания стиля кнопок:

  • .btn-square – прямоугольные кнопки
  • .btn-rounded – закругленные кнопки
  • .btn-outline – контурные кнопки
  • .btn-md – кнопки в стиле Material Design
  • .btn-flat – кнопки в стиле Flat Material Design

Прямоугольные кнопки

Используйте класс .btn-square, чтобы убрать закругление углов кнопки.

<button type="button" class="btn btn-default btn-square">По умолчанию</button>
<button type="button" class="btn btn-primary btn-square">Главный</button>
<button type="button" class="btn btn-secondary btn-square">Вторичный</button>
<button type="button" class="btn btn-success btn-square">Успех</button>
<button type="button" class="btn btn-info btn-square">Информация</button>
<button type="button" class="btn btn-warning btn-square">Предупреждение</button>
<button type="button" class="btn btn-danger btn-square">Опасность</button>

Кнопки материального дизайна

Используйте класс .btn-md чтобы сделать кнопки в стиле материального дизайна.

<button type="button" class="btn btn-default btn-md">По умолчанию</button>
<button type="button" class="btn btn-primary btn-md">Главный</button>
<button type="button" class="btn btn-secondary btn-md">Вторичный</button>
<button type="button" class="btn btn-success btn-md">Успех</button>
<button type="button" class="btn btn-info btn-md">Информация</button>
<button type="button" class="btn btn-warning btn-md">Предупреждение</button>
<button type="button" class="btn btn-danger btn-md">Опасность</button>

Плоские кнопки материального дизайна

Используйте класс .btn-flat, чтобы сделать кнопки в стиле материального дизайна.

<button type="button" class="btn btn-default btn-md">По умолчанию</button>
<button type="button" class="btn btn-primary btn-md">Главный</button>
<button type="button" class="btn btn-secondary btn-md">Вторичный</button>
<button type="button" class="btn btn-success btn-md">Успех</button>
<button type="button" class="btn btn-info btn-md">Информация</button>
<button type="button" class="btn btn-warning btn-md">Предупреждение</button>
<button type="button" class="btn btn-danger btn-md">Опасность</button>

Закругленные кнопки

Используйте класс .btn-rounded, чтобы сделать кнопки с скругленными краями.

<button class="btn btn-default btn-rounded">По умолчанию</button>
<button class="btn btn-primary btn-rounded">Главный</button>
<button class="btn btn-secondary btn-rounded">Вторичный</button>
<button class="btn btn-success btn-rounded">Успех</button>
<button class="btn btn-info btn-rounded">Информация</button>
<button class="btn btn-warning btn-rounded">Предупреждение</button>
<button class="btn btn-danger btn-rounded">Опасность</button>

Закругленные кнопки материального дизайна

Сочетайте классы .btn-md и .btn-rounded, чтобы сделать закругленные кнопки в стиле материального дизайна.

<button class="btn btn-primary  btn-md btn-rounded">Главный</button>
<button class="btn btn-default btn-md btn-rounded">По умолчанию</button>
<button class="btn btn-secondary btn-md btn-rounded">Вторичный</button>
<button class="btn btn-success btn-md btn-rounded">Успех</button>
<button class="btn btn-info btn-md btn-rounded">Информация</button>
<button class="btn btn-warning btn-md btn-rounded">Предупреждение</button>
<button class="btn btn-danger btn-md btn-rounded">Опасность</button>

Контурные кнопки

Используйте класс .btn-outline, чтобы сделать кнопку контурной.

<button type="button" class="btn btn-default btn-outline">По умолчанию</button>	
<button type="button" class="btn btn-primary btn-outline">Главный</button>
<button type="button" class="btn btn-secondary btn-outline">Вторичный</button>
<button type="button" class="btn btn-success btn-outline">Успех</button>
<button type="button" class="btn btn-info btn-outline">Информация</button>
<button type="button" class="btn btn-warning btn-outline">Предупреждение</button>
<button type="button" class="btn btn-danger btn-outline">Опасность</button>

Прямоугольные контурные кнопки

Сочетайте классы .btn-square и .btn-outline, чтобы сделать прямоугольные контурные кнопки.

<button type="button" class="btn btn-default btn-square btn-outline">По умолчанию</button>
<button type="button" class="btn btn-primary btn-square btn-outline">Главный</button>
<button type="button" class="btn btn-secondary btn-square btn-outline">Вторичный</button>
<button type="button" class="btn btn-success btn-square btn-outline">Успех</button>
<button type="button" class="btn btn-info btn-square btn-outline">Информация</button>
<button type="button" class="btn btn-warning btn-square btn-outline">Предупреждение</button>
<button type="button" class="btn btn-danger btn-square btn-outline">Опасность</button>

Закругленные контурные кнопки

Сочетайте классы .btn-rounded и .btn-outline, чтобы сделать прямоугольные контурные кнопки.

<button class="btn btn-default btn-outline btn-rounded  waves-effect">По умолчанию</button>
<button class="btn btn-primary btn-outline btn-rounded waves-effect">Главный</button>
<button class="btn btn-secondary btn-outline btn-rounded waves-effect">Вторичный</button>
<button class="btn btn-success btn-outline btn-rounded waves-effect">Успех</button>
<button class="btn btn-info btn-outline btn-rounded waves-effect">Информация</button>
<button class="btn btn-warning btn-outline btn-rounded waves-effect">Предупреждение</button>
<button class="btn btn-danger btn-outline btn-rounded waves-effect">Опасность</button>

Прозрачне кнопки

Используйте класс .btn-flat, чтобы сделать кнопку с прозрачным фоном.

<button class="btn btn-default btn-flat waves-effect">По умолчанию</button>
<button class="btn btn-primary btn-flat waves-effect">Главный</button>
<button class="btn btn-secondary btn-flat waves-effect">Вторичный</button>
<button class="btn btn-success btn-flat waves-effect">Успех</button>
<button class="btn btn-info btn-flat waves-effect">Информация</button>
<button class="btn btn-warning btn-flat waves-effect">Предупреждение</button>
<button class="btn btn-danger btn-flat waves-effect">Опасность</button>

Кнопки - иконки

Используйте класс .btn-icon и шрифтовые иконки, чтобы сделать кнопки-иконки.

<button type="button" class="btn btn-default btn-icon"><i class="fa fa-check" aria-hidden="true"></i></button>	
<button type="button" class="btn btn-primary btn-icon"><i class="fa fa-cog" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary btn-icon"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-success btn-icon"><i class="fa fa-shopping-cart" aria-hidden="true"></i></button>
<button type="button" class="btn btn-info btn-icon"><i class="fa fa-bars" aria-hidden="true"></i></button>
<button type="button" class="btn btn-warning btn-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger btn-icon"><i class="fa fa-phone" aria-hidden="true"></i></button>

Кнопки с иконкой

Используйте класс .btn-labeled, чтобы сделать кнопку с дополнительной иконкой. Иконка размещается в обертке <span class="btn-label">{иконка}</span>.

<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Успех</button>
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Опасность</button>
<button type="button" class="btn btn-labeled btn-info"><span class="btn-label"><i class="fa fa-exclamation"></i></span>Информация</button>
<button type="button" class="btn btn-labeled btn-warning"><span class="btn-label"><i class="fa fa-warning"></i></span>Предупреждение</button>
<button type="button" class="btn btn-outline btn-labeled btn-default"><span class="btn-label"><i class="fa fa-arrow-left"></i></span>Слева</button>
<button type="button" class="btn btn-outline btn-labeled btn-default">Справа<span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span></button>

Кнопки на всю ширину блока

Используйте класс .btn-block, чтобы сделать кнопку на всю ширину блока.

<button type="button" class="btn btn-primary btn-lg btn-block">Кнопка блочного уровня</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Кнопка блочного уровня</button>

Группа кнопок

<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Слева</button>
<button type="button" class="btn btn-primary">По середине</button>
<button type="button" class="btn btn-primary">Справа</button>
</div>

Активное состояние

Главная ссылка Ссылка 
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Главная ссылка</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Ссылка</a>

Отключенное состояние

Главный ссылка Ссылка 
<button type="button" class="btn btn-lg btn-primary" disabled>Главная кнопка</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Кнопка</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Главная ссылка</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Ссылка</a>

Кнопка - переключатель

<button type="button" class="btn btn-primary btn-outline" data-toggle="button" aria-pressed="false" autocomplete="off">
 Одиночный переключатель
</button>

Группа кнопок - выключателей

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active btn-outline">
	<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary btn-outline">
	<input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary btn-outline">
	<input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Группа кнопка - переключателей

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active btn-outline">
	<input type="radio" name="options" id="option1" autocomplete="off" checked> Радио 1 (preselected)
  </label>
  <label class="btn btn-primary btn-outline">
	<input type="radio" name="options" id="option2" autocomplete="off"> Радио 2
  </label>
  <label class="btn btn-primary btn-outline">
	<input type="radio" name="options" id="option3" autocomplete="off"> Радио 3
  </label>
</div>