Bootstrap4 Tutorial Básico

Bootstrap4 Controles de Formulário Bootstrap4 Navegação de Pão deforma

Bootstrap4 Formulário

O formulário HTML é uma parte inseparável das páginas da web e das aplicações, mas criar layouts de formulários ou estilizar controles de formulário um por um com CSS pode ser monótono. Bootstrap simplifica significativamente a estilização e alinhamento dos controles de formulário (como rótulos, campos de entrada, caixas de seleção, áreas de texto, botões, etc.) com um conjunto pré-definido de classes.

Neste capítulo, vamos aprender como usar Bootstrap para criar formulários. Bootstrap permite criar diferentes estilos de formulários apenas com algumas tags HTML e classes estendidas.

elements de formulário <input>, <textarea>, e elements ao usar .form-em que a classe .form está presente, a largura é configurada para 100%。

Bootstrap4 Layout de formulário

Formulário empilhado (largura da tela completa): direção vertical
Formulário inline: direção horizontal

O Bootstrap oferece dois tipos de layout de formulário:

Formulário empilhado

A seguir, um exemplo de formulário empilhado usando dois campos de entrada, uma caixa de seleção e um botão de envio:

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo 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>Formulário empilhado</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="email">E-mail:</label>/label>
　　　　　　<input type="email" class="form-control" id="email" placeholder="Insira email">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Senha:</label>/label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="Insira a senha">
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> Lembrar-me
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Enviar</button>
　　</form>
</div>
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Formulário inline

Todos os elementos do formulário inline estão alinhados à esquerda.

Atenção: Quando a largura da tela for menor que 576px eles serão empilhados verticalmente. Se a largura da tela for maior ou igual a576px os elementos do formulário serão exibidos na mesma linha horizontal.

O formulário inline precisa ter a classe .form adicionada ao elemento <form>-classe inline.

A seguir, um exemplo de formulário inline usando dois campos de entrada, uma caixa de seleção e um botão de envio:

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo 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>Formulário inline</h2>
　　<p>A largura da tela é maior ou igual a　576px ele será exibido horizontalmente. Se for menor que　576px então será gerado um formulário empilhado.</p>
　　<form class="form-inline">
　　　　<label for="email">E-mail:</label>/label>
　　　　<input type="email" class="form-control" id="email" placeholder="Insira email">
　　　　<label for="pwd">Insira a senha:</label>
　　　　<input type="password" class="form-control" id="pwd" placeholder="Insira a senha">
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> Lembrar-me
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Enviar</button>
　　</form>
</div>
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Bootstrap4 Controles de Formulário Bootstrap4 Navegação de Pão deforma