Адаптивные кнопки 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 могут быть видимыми или скрытыми для определённых устройств, ниже предоставлена таблица, указаны классы и размеры дисплеев устройств в которых кнопки будет или не будет видно. Достаточно добавить класс для устройства или использовать классы нескольких устройств одновременно, отсутствие классов подобного типа делает видимым кнопки на всех устройствах.

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

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

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

Кнопки 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, ниже предоставлен онлайн редактор, в котором Вы сможете изменить свойства и добавить элементы кнопок по своему усмотрению. Проверяйте изменения путём выполнения, если страница результата не будет закрыта, данные на ней после очередного выполнения - обновятся.

• Комментарии
• Комментировать
• Сведения