Основной курс Bootstrap

Bootstrap плагины

Кнопки 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	Отключенная кнопка	Попробуйте

Ниже приведены примеры всех классов кнопок, упомянутых выше:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap　-　варианты кнопок</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--　Стандартная кнопка　-->
<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>
</body>
</html>

Проверьте, посмотрите ‹/›

Результат будет выглядеть так:

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

В таблице ниже перечислены классы, используемые для получения кнопок различных размеров:

Класс	Описание
.btn-lg	Это сделает кнопку несколько большой.
.btn-sm	Это сделает кнопку несколько маленькой.
.btn-xs	Это сделает кнопку особенно маленькой.
.btn-block	Это создаст блоковую кнопку, которая будет занимать всю ширину родительского элемента.

Ниже приведены примеры всех классов кнопок, упомянутых выше:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Размер кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

Проверьте, посмотрите ‹/›

Результат будет выглядеть так:

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

Bootstrap предоставляет классы для различных состояний кнопок, таких как активация, отключение и т.д., которые будут подробно рассмотрены ниже.

Состояние активации

При активации кнопка будет呈现 вид, как если бы она была нажата (темный фон, темные рамки, тень).

В таблице ниже перечислены классы, позволяющие элементам кнопки и якоря быть активными:

Элемент	Класс
Элемент кнопки	Добавить .active Класс для отображения ее активного состояния.
Контурный элемент	Добавить .active Класс к кнопке <a> для отображения ее активного состояния.

Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Активированное состояние кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

Проверьте, посмотрите ‹/›

Результат будет выглядеть так:

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

Когда кнопку отключают, ее цвет становится более бледным на 50% и теряется градиент.

В таблице ниже перечислены классы, позволяющие элементам кнопки и якоря быть отключенными:

Элемент	Класс
Элемент кнопки	Добавить disabled Атрибут До <button> кнопки.
Контурный элемент	Добавить disabled class До <a> кнопки.

Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Запрещенный статус кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

Проверьте, посмотрите ‹/›

Результат будет выглядеть так:

Тег кнопки

Вы можете использовать класс "кнопка" на элементах <a>, <button> или <input>. Однако рекомендуется использовать класс "кнопка" на элементе <button>, чтобы избежать проблем с不一致ностью между браузерами.

Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Тег кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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="Подтвердить">
</body>
</html>

Проверьте, посмотрите ‹/›

Результат будет выглядеть так:

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

Кнопочные группы можно создать, используя .btn-group direkt в div:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Плагин для выбора одной из кнопок</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Группа кнопок</h2>
　　<p>Класс .btn-group используется для создания кнопочных групп:</p>
　　<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>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Размер кнопочных групп можно контролировать с помощью .btn-group-lg|sm|xs:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Группа кнопок</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Группа кнопок Button - Настройка размера кнопок</h2>
　　<p>Размер кнопок в кнопочных группах можно контролировать с помощью класса .btn-group-*.</p>
　　<h2>Большие кнопки:</h2>
　　<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>
　　<h2>Кнопки стандартного размера:</h2>
　　<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>
　　<h2>Маленькие кнопки:</h2>
　　<div　class="btn-group　btn-group-sm">
　　　　<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>
　　<h2>Супермаленькие кнопки:</h2>
　　<div　class="btn-group　btn-group-xs">
　　　　<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>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Чтобы настроить вертикальное расположение кнопок, можно использовать класс .btn-group-vertical:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap　-　кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Вертикальная кнопочная группа</h2>
　　<p>Чтобы настроить вертикальное расположение кнопок, можно использовать класс .btn-group-vertical:</p>
　　<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>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Адаптивные размеры кнопочных групп

Адаптивные размеры кнопочных групп можно настроить с помощью класса .btn-group-justified.

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

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap　-　кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Адаптивная группа кнопок</h2>
　　<p>Настройка адаптивных размеров кнопочных групп с помощью класса .btn-group-justified.</p>
　　<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>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Внимание: Если это элемент <button>, вам нужно обернуть его .btn-group классом вне:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap　-　кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Адаптивная группа кнопок</h2>
　　<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>
</body>
</html>

Проверьте, посмотрите ‹/›

Группа кнопок с включенной下拉-меню

Кнопки, включенные в группу, могут иметь выпадающее меню, как в следующем примере:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap　-　кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Внутренняя группа кнопок</h2>
　　<p>Внутренняя группа кнопок создания выпадающего меню：</p>
　　<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">
　　　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　　　　　<ul class="dropdown-menu" role="menu">
　　　　　　　　<li><a href="#">Планшет</a></li>
　　　　　　　　<li><a href="#">Smartphone</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Разделительные кнопки

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap　-　кнопки</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Разделительные кнопки</h2>
　　<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="menu">
　　　　　　<li><a href="#">Планшет</a></li>
　　　　　　<li><a href="#">Smartphone</a></li>
　　　　</ul>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Изображения Bootstrap Формы Bootstrap