English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основы Bootstrap4

Настройка форм Bootstrap4 Контроллеры форм Bootstrap4

Группы ввода Bootstrap4

Мы можем использовать класс .input-group для добавления дополнительного стиля к полям ввода формы, например, иконок, текста или кнопок.

Используйте класс .input-group-prepend для добавления текстовой информации перед полем ввода, а класс .input-group-append - после.

В конце концов, нам также нужно использовать класс .input-group-text для настройки стиля текста.

Bootstrap4 пример

<!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　mt-3">
　　<h2>Группы ввода</h2>
　　<p>Используйте класс .input-group для добавления дополнительного стиля к полям ввода формы, например, иконок, текста или кнопок. Класс .input-group-prepend добавляется перед полем ввода, а .input-group-append - после.</p>
　　<p>Используйте класс .input-group-text для настройки стиля текста.</p>
　　
　　<form action="/action_page.php">
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">@</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="Имя пользователя" id="usr" name="username">
　　　　</div>
　　　　<div class="input-group mb-3">
　　　　　　<input type="text" class="form-control" placeholder="Email" id="mail" name="email">
　　　　　　<div class="input-group-append">
　　　　　　　　<span class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Подтвердить</button>
　　</form>
</div>
</body>
</html>

Проверьте, ›/›

Результат выполнения будет следующим:

Размер поля ввода

Используйте класс .input-group-sm для настройки маленьких полей ввода, .input-group-lg для больших полей ввода:

Bootstrap4 пример

<!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　mt-3">
　　<h1>Размер поля ввода</h1>
　　<p>Используйте класс .input-group-sm для настройки маленьких полей ввода, .input-group-lg для больших полей ввода:</p>
　　<form>
　　　　<div class="input-group mb-3 input-group-sm">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Small</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Default</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div class="input-group mb-3 input-group-lg">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Large</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, ›/›

Результат выполнения будет следующим:

Множественные поля ввода и текст

Bootstrap4 пример

<!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　mt-3">
　　<h2>Множественные поля ввода и текст</h2>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Person</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="Имя">
　　　　　　<input type="text" class="form-control" placeholder="Фамилия">
　　　　</div>　　
　　</form>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">One</span>
　　　　　　　　<span class="input-group-text">Two</span>
　　　　　　　　<span class="input-group-text">Three</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, ›/›

Результат выполнения будет следующим:

Контрольные рамки и рамки выбора

Текстовую информацию можно заменить контрольными рамками и рамками выбора:

Bootstrap4 пример

<!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　mt-3">
　　<h2>Контрольные рамки и рамки выбора</h2>
　　Информационный текст можно заменить флажками и переключателями:</p>
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<div class="input-group-text">
　　　　　　　　　　<input type="checkbox">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="w3codebox">
　　　　</div>
　　</form>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<div class="input-group-text">
　　　　　　　　　　<input type="radio">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="GOOGLE">
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, ›/›

Результат выполнения будет следующим:

Добавление группы кнопок в поля ввода

Bootstrap4 пример

<!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　mt-3">
　　<h1>Добавление группы кнопок в поля ввода</h1>
　　<div class="input-group mb-3">
　　　　<div class="input-group-prepend">
　　　　　　<button class="btn btn-outline-secondary" type="button">Основная кнопка</button>　　
　　　　</div>
　　　　<input type="text" class="form-control" placeholder="Некоторый текст">
　　</div>
　　<div class="input-group mb-3">
　　　　<input type="text" class="form-control" placeholder="Search">
　　　　<div class="input-group-append">
　　　　　　<button class="btn btn-success" type="submit">Go</button>　　
　　　　　</div>
　　</div>
　　<div class="input-group mb-3">
　　　　<input type="text" class="form-control" placeholder="Что-то умное..">
　　　　<div class="input-group-append">
　　　　　　<button class="btn btn-primary" type="button">OK</button>　　
　　　　　　<button class="btn btn-danger" type="button">Отмена</button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, ›/›

Результат выполнения будет следующим:

Настройка выпадающего списка

Добавление выпадающего списка в поля ввода не требует использования класса .dropdown.

Bootstrap4 пример

<!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　mt-3">
　　Настройка выпадающего списка
　　Добавление выпадающего списка в поля ввода не требует использования класса .dropdown.
　　<form>
　　　　<div class="input-group mt-3 mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　Выберите сайт
　　　　　　　　</button>
　　　　　　　　<div　class="dropdown-menu">
　　　　　　　　　　<a　class="dropdown-item"　href="https://www.google.com">GOOGLE</a>
　　　　　　　　　　<a　class="dropdown-item"　href="https://ru.oldtoolbag.com">w3codebox</a>
　　　　　　　　　　<a　class="dropdown-item"　href="https://www.taobao.com">TAOBAO</a>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="Адрес сайта">
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, ›/›

Результат выполнения будет следующим:

Метка группы полей ввода

В группе полей ввода через label вокруг группы полей ввода устанавливаются метки, атрибут for метки должен соответствовать id группы полей ввода, после нажатия на метку полю ввода можно сосредоточиться:

Bootstrap4 пример

<!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　mt-3">
　　<h2>Тег группы ввода</h2>
　　<p>Тег можно установить вокруг группы ввода, используя label, атрибут for которого должен соответствовать id группы ввода.</p>
　　<p>После нажатия на тег можно сосредоточиться на поле ввода:</p>
　　<form>
　　　　<label for="demo">Введите свою электронную почту:</label>
　　　　<div class="input-group mb-3">
　　　　　　<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
　　　　　　<div class="input-group-append">
　　　　　　　　<span class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　</form>
</div>
</body>
</html>

Проверьте, ›/›

Результат выполнения будет следующим:

Настройка форм Bootstrap4 Контроллеры форм Bootstrap4