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

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

Формы Bootstrap4

HTML-формы являются неразрывной частью веб-страниц и приложений, но создание макета форм или настройка стилей элементов форм (например, этикеток, полей ввода, списков выбора, текстовых областей, кнопок и т.д.) вручную с помощью CSS обычно утомительно. Bootstrap значительно упрощает процесс стилизации и выравнивания элементов форм с помощью предопределенного набора классов.

В этой главе мы рассмотрим, как использовать Bootstrap для создания форм. Bootstrap позволяет создавать различные стили форм с помощью простых тегов HTML и расширенных классов.

Элементы форм <input>, <textarea> и Элементы <select> В случае использования класса .form-control ширина всегда установлена в 100%.

Макет форм Bootstrap4

  • Слоеная форма (полная ширина экрана): вертикальное направление

  • Статическая форма: горизонтальное направление

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>Слоеная форма</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="email">Электронная почта:</label>
　　　　　　<input type="email" class="form-control" id="email" placeholder="Ввести email">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Пароль:</label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="Ввести пароль">
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> запомнить меня
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Подтвердить</button>
　　</form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения таков:

Строка форм

Все элементы строки формы выравниваются по левому краю.

Примечание: При ширине экрана менее 576px элементы будут отображаться вертикально堆叠, а при ширине экрана 576px и более элементы будут отображаться на одном горизонтальном уровне.

Строка форм требует добавления класса .form-inline к элементу <form>.

В данном примере используются два поля ввода, один флажок и кнопка отправки для создания строки формы:

<!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>
　　<p>Экранная ширина должна быть равна или превышать 576px, чтобы элементы отображались горизонтально. Если ширина меньше 576px,则会生成堆叠表单。</p>
　　<form class="form-inline">
　　　　<label for="email">Электронная почта:</label>
　　　　<input type="email" class="form-control" id="email" placeholder="Ввести email">
　　　　<label for="pwd">Ввести пароль:</label>
　　　　<input type="password" class="form-control" id="pwd" placeholder="Ввести пароль">
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> запомнить меня
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Подтвердить</button>
　　</form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения таков:


Контроллеры форм Bootstrap4Навигация по breadcrumb Bootstrap4