Адаптивные кнопки bootstrap 3

Адаптивные кнопки bootstrap 3

Подробное описание настройки, и примеры применения адаптивных кнопок плагина bootstrap 3 на сайте, кнопки подстраиваются под разные любые размеры дисплеев включая планшеты и мобильные телефоны.

Примеры применения кнопок bootstrap 3

Адаптивные кнопки bootstrap 3 имеют индивидуальные class="" селекторы, которыми устаналиваются цвета, размеры групповые свойства и дополнительные возможности для кнопок. Рекомендуется применять кнопки bootstrap 3, при использовании основных элементов, формирующих макет вёрстки сайта.

Установка цвета кнопкам

Цветовая палитра кнопок bootstrap 3, при использовании "по умолчанию".

class="btn btn-default"
Белый цвет.
class="btn btn-primary"
Синий цвет.
class="btn btn-success"
Зелёный цвет.
class="btn btn-info"
Голубой цвет.
class="btn btn-warning"
Оранжевый цвет.
class="btn btn-danger"
Красный цвет.
class="btn 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 3, заключается в добавлении классов для тегов, которые можно использовать в качестве кнопок.

class="btn"
Класс для установления размера "Кнопка по умолчанию".
class="btn btn-lg"
Класс для установления размера "Большая кнопка".
class="btn btn-sm"
Класс для установления размера "Не большая кнопка".
class="btn btn-xs"
Класс для установления размера "Маленькая кнопка".
class="btn btn-lg btn-block"
Класс для установления размера "Кнопка блок", займёт всю свободную ширину родительского элемента.


<button type="button" class="btn btn-default">Кнопка по умолчанию</button>
<button type="button" class="btn btn-default btn-lg">Большая кнопка</button>
<button type="button" class="btn btn-default btn-sm">Не большая кнопка</button>
<button type="button" class="btn btn-default btn-xs">Маленькая кнопка</button>
<br>
<button type="button" class="btn btn-default btn-lg btn-block">Кнопка блок</button>

Смещение кнопок

Если требуется сместить кнопки bootstrap 3, используйте дополнительные class="btn btn-default pull-left" для смещения в левую часть родителского элемента и class="btn btn-default pull-right" для смещения в право.
Имейте в виду, данные классы актуальны при доступности плавающего состояния в родительском элементе.


<button type="button" class="btn btn-default pull-left">Кнопка с лева</button>
<button type="button" class="btn btn-default pull-right">Кнопка с права</button>

Центровка кнопок

Для установки кнопки bootstrap 3 по центру, используйте class="btn btn-default center-block".



<button type="button" class="btn btn-default center-block">Кнопка по центру</button>
<br>
<button type="button" class="btn btn-default center-block">Кнопка в центре</button>

Группирование кнопок

Вы можете группировать кнопки bootstrap 3, используя class="btn-group".


<div class="btn-group">
<button type="button" class="btn btn-default">Левая кнопка</button>
<button type="button" class="btn btn-default">Средняя кнопка</button>
<button type="button" class="btn btn-default">Правая кнопка</button>
</div>

Для группирования кнопок bootstrap 3 в панели инструментов, используйте class="btn-toolbar".


<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
</div>
</div>

Чтобы сгруппировать кнопки bootstrap 3, и добавить выпадающий список используйте class="btn-group" в который поместите аналогичный class="btn-group" с элементами выпадающего списка.


<div class="btn-group">
<button type="button" class="btn btn-default">Кнопка</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Список
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Пункт №1</a></li>
<li><a href="#">Пункт №2</a></li>
</ul>
</div>
</div>

Для вертикального группирования кнопок bootstrap 3, используйте class="btn-group-vertical". В вертикальном положении могут находиться отдельные кнопки, а так же вложенные class="btn-group" и элементы списка.


<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Кнопка 1</button>
<button type="button" class="btn btn-default">Кнопка 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Список
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Пункт №1</a></li>
<li><a href="#">Пункт №2</a></li>
</ul>
</div>
</div>

Если требуется растянуть группу кнопок bootstrap 3 на всю ширину родительского элемента, воспользуйтесь дополнительным классом class="btn-group btn-group-justified", при этом каждая из кнопок должна быть помещена в class="btn-group".
Имейте в виду, адаптивность при подобном применении может быть нарушена.


<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Левая кнопка</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Средняя кнопка</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Правая кнопка</button>
</div>
</div>

Видимость кнопок на дисплее

Кнопки bootstrap 3 могут быть видимыми или скрытыми для определённых устройств, ниже предоставлена таблица, указаны классы и размеры дисплеев устройств в которых кнопки будет или не будет видно. Достаточно добавить класс для устройства или использовать классы нескольких устройств одновременно, отсутствие классов подобного типа делает видимым кнопки на всех устройствах.

class="" Устройства (<768px) Устройства (≥768px) Устройства (≥992px) Устройства (≥1200px)
.visible-xs Видно Скрыто Скрыто Скрыто
.visible-sm Скрыто Видно Скрыто Скрыто
.visible-md Скрыто Скрыто Видно Скрыто
.visible-lg Скрыто Скрыто Скрыто Видно
.hidden-xs Скрыто Видно Видно Видно
.hidden-sm Видно Скрыто Видно Видно
.hidden-md Видно Видно Скрыто Видно
.hidden-lg Видно Видно Видно Скрыто

Видимость кнопок при печати

Кнопки bootstrap 3 будут видут отображены или скрыты при печати, ниже предоставлена таблица классов и определение видимости кнопок в браузере и при печати. При отсутствии подобных классов, кнопки будут отображены в браузере и при печати.

class="" В браузере При печати
.visible-print Скрыто Видно
.hidden-print Видно Скрыто

Блокировка кнопок

Кнопки bootstrap 3 могут быть заблокированы от нажатия, если Вам нужно блокировать кнопку, добавьте атрибут disabled="disabled" и кнопка будет заблокирована.


<button type="button" class="btn btn-default">Обычная кнопка</button>
<button type="button" disabled="disabled" class="btn btn-default">Заблокированная кнопка</button>
<button type="button" class="btn btn-default">Обычная кнопка</button>

Дополнительно

Под кнопками bootstrap 3 могут подразумеваться не только теги применяемые в примерах!

Проверить себя

Вы можете проверить себя на способность практического использования кнопок bootstrap 3, ниже предоставлен онлайн редактор, в котором Вы сможете изменить свойства и добавить элементы кнопок по своему усмотрению. Проверяйте изменения путём выполнения, если страница результата не будет закрыта, данные на ней после очередного выполнения - обновятся.


Рейтинг: 4.5/5 из 15



Добавлено Автор Ник Источник Просмотров Комментариев Теги
22-10-2014 Михаил Меренков aTmpl © 8148 0 бутстрап 3, bootstrap 3, BUTTON, Кнопки