Bootstrap Кнопки
В этой главе на примерах будет объяснено, как использовать кнопки Bootstrap. Любой элемент с классом.btnунаследует внешний вид скруглённых серых кнопок по умолчанию. Однако Bootstrap предоставляет некоторые параметры для определения стилей кнопок, как показано в таблице ниже:
Следующие стили можно использовать для элементов <a>, <button> или <input>:
| Класс |
Описание |
Пример |
| .btn |
Добавить базовые стили к кнопкам |
Попробуйте |
| .btn-default |
Кнопка по умолчанию/стандартная |
Попробуйте |
| .btn-primary |
Стиль основной кнопки (не активен) |
Попробуйте |
| .btn-success |
Обозначает успешное действие |
Попробуйте |
| .btn-info |
Этот стиль можно использовать для кнопок, выводящих информацию |
Попробуйте |
| .btn-warning |
Обозначает кнопку, требующую осторожного обращения |
Попробуйте |
| .btn-danger |
Обозначает операцию кнопки, представляющую опасное действие |
Попробуйте |
| .btn-link |
Сделать кнопку похожей на ссылку (при этом сохраняя поведение кнопки) |
Попробуйте |
| .btn-lg |
Сделать кнопку большой |
Попробуйте |
| .btn-sm |
Сделать кнопку маленькой |
Попробуйте |
| .btn-xs |
Создать очень маленькую кнопку |
Попробуйте |
| .btn-block |
Блочная кнопка (растягивается на 100% ширины родительского элемента) |
Попробуйте |
| .active |
Кнопка нажата |
Попробуйте |
| .disabled |
Неактивная кнопка |
Попробуйте |
Следующие примеры демонстрируют все классы кнопок, приведённые выше:
Пример
<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>
Попробуйте »
Результат следующий:
В следующей таблице перечислены классы для получения кнопок различных размеров:
| Класс | Описание |
|---|
| .btn-lg | Это сделает кнопку визуально больше. |
| .btn-sm | Это сделает кнопку визуально меньше. |
| .btn-xs | Это заставит кнопку выглядеть очень маленькой. |
| .btn-block | Это создаёт блочную кнопку, которая занимает всю ширину родительского элемента. |
В следующем примере демонстрируются все приведённые выше классы кнопок:
Пример
<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>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">块级主要按钮</button>
<button type="button" class="btn btn-default btn-lg btn-block">块级按钮</button>
</p>
Попробуйте »
Результат следующий:
Bootstrap 提供了用于按钮状态的类，例如 active 和 disabled，下面将详细解释。
激活
当按钮处于激活状态时，它会呈现按下状态（背景更暗、边框更暗，并带有阴影）。
В следующей таблице перечислены классы, которые делают элементы button и элементы anchor активными:
| Элемент | Класс |
|---|
| Элемент button | Добавьте класс.active, чтобы показать, что он активен. |
| Элемент anchor | Добавьте класс .activeк кнопке <a>, чтобы показать, что она активна. |
Следующий пример демонстрирует это:
Пример
<p>
<button type="button" class="btn btn-default btn-lg ">Кнопка по умолчанию</button>
<button type="button" class="btn btn-default btn-lg active">Активная кнопка</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">Основная кнопка</button>
<button type="button" class="btn btn-primary btn-lg active">Активная основная кнопка</button>
</p>
Попробуйте сами »
Результат следующий:
Отключённое состояние
Когда вы отключаете кнопку, её цвет тускнеет на 50% и она теряет градиент.
В следующей таблице перечислены классы, которые заставляют элементы button и элементы anchor выглядеть отключёнными:
| Элемент | Класс |
|---|
| Элемент button | Добавьтеdisabled атрибутк кнопке <button>. |
| Элемент anchor | Добавьтеdisabled класск кнопке <a>. |
Следующий пример демонстрирует это:
Пример
<p>
<button type="button" class="btn btn-default btn-lg">Кнопка по умолчанию</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Отключённая кнопка</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">Основная кнопка</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Отключённая основная кнопка</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">Ссылка</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Отключённая ссылка</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">Основная ссылка</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Отключённая основная ссылка</a>
</p>
Попробуйте сами »
Результат следующий:
Вы можете использовать классы кнопок на элементах <a>, <button> или <input>. Однако рекомендуется использовать классы кнопок на элементах <button>, чтобы избежать кроссбраузерных несоответствий.
Следующий пример демонстрирует это:
Пример
<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-group непосредственно внутри div, чтобы создать группу кнопок:
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуйте сами »
Используйте .btn-group-lg|sm|xs для управления размером группы кнопок:
Пример
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуйте сами »
Чтобы создать вертикально расположенные кнопки, используйте класс .btn-group-vertical:
Пример
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуйте сами »
Адаптивные группы кнопок
Вы можете создавать группы кнопок с выравниванием по ширине с помощью класса .btn-group-justified.
В следующем примере используется тег a для демонстрации:
Пример
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Попробуйте сами »
Примечание:Если это<button>элемент, вам нужно использовать на внешнем слое.btn-groupclass для обертывания:
Пример
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Попробуйте сами »
Группы кнопок с выпадающими меню
Кнопки внутри группы кнопок могут иметь выпадающие меню, как в следующем примере:
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Планшет</a></li>
<li><a href="#">Смартфон</a></li>
</ul>
</div>
</div>
Попробуйте сами »
Раздельные кнопки
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="меню">
<li><a href="#">Планшет</a></li>
<li><a href="#">Смартфон</a></li>
</ul>
</div>
Попробуйте сами »
Другие расширения
