Bootstrap4 Tutoriais Básicos

Bootstrap4 Formulário Personalizado Bootstrap4 Controles de Formulário

Bootstrap4 Grupo de caixas de entrada

Podemos usar .input-Classe group para adicionar mais estilos a caixas de entrada de formulário, como ícones, texto ou botões.

Usar .input-group-Classe prepend para adicionar informações de texto antes da caixa de entrada, .input-group-Classe append para adicionar após a caixa de entrada.

Por fim, precisamos usar .input-group-Classe text para definir o estilo do texto.

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> Grupo de caixas de entrada</h2>
　　<p> .input-group .input-Classe group para adicionar mais estilos a caixas de entrada de formulário, como ícones, texto ou botões, .input-group-prepend class para adicionar no início，.input-group-append adicionar no final.</p>
　　<p>Usar .input-group-text class para definir o estilo do texto。</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="Nome de usuário" 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">Enviar</button>
　　</form>
</div>
</body>
</html>

Teste e veja ‹/›

Efeito de execução如下：

Tamanho da entrada

Usar .input-group-sm class para definir a entrada pequena， .input-group-lg class para definir a entrada grande：

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>Tamanho da entrada</h1>
　　<p>Usar .input-group-sm class para definir a entrada pequena， .input-group-lg class para definir a entrada grande：</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>

Teste e veja ‹/›

Efeito de execução如下：

Múltiplos campos de entrada e texto

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>Múltiplos campos de entrada e texto</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="First Name">
　　　　　　<input type="text" class="form-control" placeholder="Last Name">
　　　　</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>

Teste e veja ‹/›

Efeito de execução如下：

Caixas de seleção e opções de rádio

As informações de texto podem ser substituídas por caixas de seleção e opções de rádio：

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>Caixas de seleção e opções de rádio</h2>
　　<p>As informações de texto podem ser substituídas por caixas de seleção e opções de rádio：</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>

Teste e veja ‹/›

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

Adicionar grupo de botões de entrada

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>Adicionar grupo de botões de entrada</h1>
　　<div class="input-group mb-3">
　　　　<div class="input-group-prepend">
　　　　　　<button class="btn btn-outline-secondary" type="button">Basic Button</button>　　
　　　　</div>
　　　　<input type="text" class="form-control" placeholder="Some text">
　　</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="Something clever..">
　　　　<div class="input-group-append">
　　　　　　<button class="btn btn-primary" type="button">OK</button>　　
　　　　　　<button class="btn btn-danger" type="button">Cancelar</button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

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

Configurar menu suspenso

Não é necessário usar a classe '.dropdown' para adicionar um menu suspenso na caixa de entrada.

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>Configurar menu suspenso</h2>
　　<p>Não é necessário usar a classe '.dropdown' para adicionar um menu suspenso na caixa de entrada.</p>
　　<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">
　　　　　　　　　　Escolher site
　　　　　　　　</button>
　　　　　　　　<div class="dropdown-menu">
　　　　　　　　　　<a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
　　　　　　　　　　<a class="dropdown-item" href="https://pt.oldtoolbag.com">w3codebox</a>
　　　　　　　　　　<a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="Endereço do site">
　　　　</div>
　　</form>
</div>
</body>
</html>

Teste e veja ‹/›

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

Rótulo do grupo de caixas de entrada

Em um grupo de caixas de entrada, você pode definir o rótulo ao redor do grupo de caixas de entrada. O atributo 'for' do rótulo deve corresponder ao 'id' do grupo de caixas de entrada. Ao clicar no rótulo, o foco pode ser transferido para a caixa de entrada:

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>Rótulo do Grupo de Entrada</h2>
　　<p>Para definir o rótulo no grupo de entrada, use o rótulo externo do grupo de entrada. O atributo for do rótulo deve corresponder ao id do grupo de entrada.</p>
　　<p>Depois de clicar no rótulo, o campo de entrada se foca:</p>
　　<form>
　　　　<label for="demo">Insira seu e-mail aqui:</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>

Teste e veja ‹/›

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

Bootstrap4 Formulário Personalizado Bootstrap4 Controles de Formulário