Bootstrap4 базовый курс

Группы полей ввода Bootstrap4 Формы Bootstrap4

Форма управления Bootstrap4

Bootstrap4 поддерживает следующие контроллеры форм:

input
textarea
checkbox
radio
select

Bootstrap Input

Bootstrap поддерживает все типы ввода HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, и color.

Внимание: Если атрибут type элемента input не объявлен правильно, стиль ввода не будет отображаться.

Ниже приведен пример использования двух элементов input,之一的 text, и之一的 password:

Пример

<!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>Контроллеры форм: input</h2>
　　<p>Ниже приведен пример использования двух элементов input,之一的 text, и之一的 password:</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="usr">Имя пользователя:</label>
　　　　　　<input type="text" class="form-control" id="usr">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Пароль:</label>
　　　　　　<input type="password" class="form-control" id="pwd">
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Bootstrap textarea

Ниже приведен пример стиля textarea.

Пример

<!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>Контроллеры форм: textarea</h2>
　　<p>Ниже приведен пример стиля textarea.</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="comment">Комментарий:</label>
　　　　　　<textarea class="form-control" rows="5" id="comment"></textarea>
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Bootstrap флажок (checkbox)

Чекбоксы позволяют пользователю выбирать один или несколько из ряда предварительно установленных вариантов.

Следующий пример содержит три варианта. Последний является отключенным:

Пример

<!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>Формы управления: checkbox</h2>
　　<p>Следующий пример содержит три варианта. Последний является отключенным:</p>
　　<form>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">Опция 1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">Опция 2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check disabled">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="" disabled>Опция 3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Использование класса .form-check-inline позволяет отображать варианты в одном ряду:

Пример

<!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>Формы управления: checkbox</h2>
　　<p>Следующий пример содержит три варианта. Последний является отключенным, использование класса .form-check-inline позволяет отображать варианты в одном ряду:</p>
　　<form>
　　　　<div class="form-check form-check-inline">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">Опция 1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-check-inline">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">Опция 2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-check-inline disabled">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="" disabled>Опция 3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Bootstrap переключатели (Radio)

Переключатели позволяют пользователю выбирать один из ряда предварительно установленных вариантов.

Следующий пример содержит три варианта. Последний является отключенным:

Пример

<!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>Формы управления: radio</h2>
　　<p>Следующий пример содержит три варианта. Последний является отключенным:</p>
　　<form>
　　　　<div class="radio">
　　　　　　<label><input type="radio" name="optradio">Опция 1</label>
　　　　</div>
　　　　<div class="radio">
　　　　　　<label><input type="radio" name="optradio">Опция 2</label>
　　　　</div>
　　　　<div class="radio disabled">
　　　　　　<label><input type="radio" name="optradio" disabled>Опция 3</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Использование класса .radio-inline позволяет отображать варианты в одном ряду:

Пример

<!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>Формы управления: radio</h2>
　　<p>В данном примере приведены три варианта. Последний вариант отключен, использование класса .radio-inline позволяет вариантам отображаться на одном ряду:</p>
　　<form>
　　　　<label class="radio-inline"><input type="radio" name="optradio">Опция 1</label>
　　　　<label class="radio-inline"><input type="radio" name="optradio">Опция 2</label>
　　　　<label class="radio-inline"><input type="radio" name="optradio" disabled>Опция 3</label>
　　</form>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Выпадающий список Bootstrap

Если вы хотите, чтобы пользователи могли выбирать из нескольких вариантов, но по умолчанию можно выбрать только один вариант, то используйте выпадающий список.

В данном примере приведены два выпадающих списка:

Пример

<!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>Формы управления: select</h2>
　　<p>Следующая форма содержит два списка выбора (select):</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="sel1">Односелектный список:</label>
　　　　　　<select class="form-control" id="sel1">
　　　　　　　　<option>1</option>
　　　　　　　　<option>2</option>
　　　　　　　　<option>3</option>
　　　　　　　　<option>4</option>
　　　　　　</select>
　　　　　　<br>
　　　　　　<label for="sel2">Многоселектный список (удерживая клавишу shift, можно выбрать несколько вариантов):</label>
　　　　　　<select multiple class="form-control" id="sel2">
　　　　　　　　<option>1</option>
　　　　　　　　<option>2</option>
　　　　　　　　<option>3</option>
　　　　　　　　<option>4</option>
　　　　　　　　<option>5</option>
　　　　　　</select>
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Группы полей ввода Bootstrap4 Формы Bootstrap4