Основной учебник Bootstrap4

Группы кнопок Bootstrap4 Информационные сообщения Bootstrap4

Кнопки Bootstrap4

Кнопки являются частью веб-сайтов и приложений. Они используются для различных целей, таких как отправка или сброс HTML-форм, выполнение интерактивных операций, таких как нажатие на кнопку для отображения или скрытия某些 содержимого на веб-странице, перенаправление пользователя на другую страницу и т.д. Bootstrap предоставляет быстрый и удобный способ создания и настройки кнопок.

Bootstrap 4 предоставляет различные стили кнопок.

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Стиль кнопки</h2>
　　<button type="button" class="btn">Основная кнопка</button>
　　<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-dark">Черный</button>
　　<button type="button" class="btn btn-light">Светлый</button>
　　<button type="button" class="btn btn-link">Ссылка</button>　　　　　　
</div>
</body>
</html>

Тестирование看看 ‹/›

Класс кнопки можно использовать для <a>, <button> или Элемент <input>:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Элементы кнопки</h2>
　　<a href="#" class="btn btn-info" role="button">Кнопка-ссылка</a>
　　<button type="button" class="btn btn-info">Кнопка</button>
　　<input type="button" class="btn btn-info" value="Кнопка ввода">
　　<input type="submit" class="btn btn-info" value="Кнопка отправки">　
</div>
</body>
</html>

Тестирование看看 ‹/›

Настройка рамки кнопки

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Настройка рамки кнопки</h2>
　　<button type="button" class="btn btn-outline-primary">Основная кнопка</button>
　　<button type="button" class="btn btn-outline-secondary">Второстепенная кнопка</button>
　　<button type="button" class="btn btn-outline-success">Успех</button>
　　<button type="button" class="btn btn-outline-info">Информация</button>
　　<button type="button" class="btn btn-outline-warning">Предупреждение</button>
　　<button type="button" class="btn btn-outline-danger">Опасность</button>
　　<button type="button" class="btn btn-outline-dark">Черная</button>
　　<button type="button" class="btn btn-outline-light text-dark">Светлая</button>
</div>
</body>
</html>

Тестирование看看 ‹/›

Кнопки различных размеров

Bootstrap 4 позволяет настраивать размер кнопок:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Кнопки различных размеров</h2>
　　<button type="button" class="btn btn-primary btn-lg">Большая кнопка</button>
　　<button type="button" class="btn btn-primary">Стандартная кнопка</button>
　　<button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>
</div>
</body>
</html>

Тестирование看看 ‹/›

Блоковые кнопки

Добавление класса .btn-block позволяет настроить блоковые кнопки:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Блоковые кнопки</h2>
　　<button type="button" class="btn btn-primary btn-block">Кнопка 1</button>
　　<button type="button" class="btn btn-default btn-block">Кнопка 2</button>
　　<h2>Большие блоковые кнопки</h2>
　　<button type="button" class="btn btn-primary btn-lg btn-block">Кнопка 1</button>
　　<button type="button" class="btn btn-default btn-lg btn-block">Кнопка 2</button>
　　<h2>Маленькие блоковые кнопки</h2>
　　<button type="button" class="btn btn-primary btn-sm btn-block">Кнопка 1</button>
　　<button type="button" class="btn btn-default btn-sm btn-block">Кнопка 2</button>
</div>
</body>
</html>

Тестирование看看 ‹/›

Активированные и заблокированные кнопки

Кнопка может быть установлена в состояние активации или блокировки нажатия.

Класс .active позволяет установить кнопку в состояние доступности, а атрибут disabled устанавливает кнопку в состояние недоступности. Обратите внимание, что элемент <a> не поддерживает атрибут disabled Атрибуты, вы можете запретить нажатие на ссылку, добавив класс .disabled.

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Состояние кнопки</h2>
　　<button type="button" class="btn btn-primary">Основная кнопка</button>
　　<button type="button" class="btn btn-primary active">Нажатая кнопка</button>
　　<button type="button" class="btn btn-primary" disabled>Запрещено нажимать на кнопку</button>
　　<a href="#" class="btn btn-primary disabled">Запрещено нажимать на ссылку</a>
</div>
</body>
</html>

Тестирование看看 ‹/›

Группы кнопок Bootstrap4 Информационные сообщения Bootstrap4