Bootstrap4 Tutorial Básico

Bootstrap4 Grupo de Entrada Bootstrap4 Formulário

Bootstrap4 Controles de formulário

Bootstrap4 Supporta os seguintes controles de formulário:

input
textarea
checkbox
radio
select

Bootstrap Input

Bootstrap suporta todos os HTML5 Tipo de entrada: text, password, datetime, datetime-local, data, mês, hora, semana, número, email, url, pesquisa, tel, e cor。

Atenção： Se o atributo type do input não for declarado corretamente, o estilo da caixa de entrada não será exibido.

Os seguintes exemplos usam dois elementos input, um text e um password ：

exemplo

<!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>Controle de formulário: input</h2>
　　<p>Os seguintes exemplos usam dois elementos input, um text e um password：</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="usr">Nome de usuário:</label>/label>
　　　　　　<input type="text" class="form-control" id="usr">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Senha:</label>/label>
　　　　　　<input type="password" class="form-control" id="pwd">
　　　　</div>
　　</form>
</div>
</body>
</html>

Teste Veja ‹/›

Textarea Bootstrap

Os seguintes exemplos demonstram o estilo do textarea.

exemplo

<!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>Controle de formulário: textarea</h2>
　　<p>Os seguintes exemplos demonstram o estilo do textarea.</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="comment">Comentário:</label>/label>
　　　　　　<textarea class="form-control" rows="5" id="comment"></textarea>
　　　　</div>
　　</form>
</div>
</body>
</html>

Teste Veja ‹/›

Caixas de seleção Bootstrap (checkbox)

Caixas de seleção são usadas para permitir que o usuário escolha entre uma série de opções pré-definidas, podendo selecionar uma ou mais.

Os seguintes exemplos incluem três opções. A última é desativada:

exemplo

<!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>Controle de formulário: checkbox</h2>
　　<p>Os seguintes exemplos incluem três opções. A última é desativada: </p>
　　<form>
　　　　<div class="form-check">
　　　　　　<label class="form-marcar-label">
　　　　　　　　<input type="checkbox" class="form-marcar-input" value="">Opção　1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-marcar-label">
　　　　　　　　<input type="checkbox" class="form-marcar-input" value="">Opção　2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check disabled">
　　　　　　<label class="form-marcar-label">
　　　　　　　　<input type="checkbox" class="form-marcar-input" value="" disabled>Opção　3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Teste Veja ‹/›

usando .form-marcar-inline classe permite que as opções sejam exibidas na mesma linha:

exemplo

<!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>Controle de formulário: checkbox</h2>
　　<p>Os seguintes exemplos incluem três opções. A última é desativada, usando .form-marcar-inline classe permite que as opções sejam exibidas na mesma linha：</p>
　　<form>
　　　　<div class="form-check form-marcar-inline">
　　　　　　<label class="form-marcar-label">
　　　　　　　　<input type="checkbox" class="form-marcar-input" value="">Opção　1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-marcar-inline">
　　　　　　<label class="form-marcar-label">
　　　　　　　　<input type="checkbox" class="form-marcar-input" value="">Opção　2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-marcar-inline disabled">
　　　　　　<label class="form-marcar-label">
　　　　　　　　<input type="checkbox" class="form-marcar-input" value="" disabled>Opção　3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Teste Veja ‹/›

Botão de opção Bootstrap (Radio)

Os botões de opção são usados para permitir que o usuário escolha entre uma série de opções pré-definidas, permitindo apenas uma seleção.

Os seguintes exemplos incluem três opções. A última é desativada:

exemplo

<!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>Controles de formulário: radio</h2>
　　<p>Os seguintes exemplos incluem três opções. A última é desativada: </p>
　　<form>
　　　　<div class="radio">
　　　　　　<label><input type="radio" name="optradio">Opção　1</label>
　　　　</div>
　　　　<div class="radio">
　　　　　　<label><input type="radio" name="optradio">Opção　2</label>
　　　　</div>
　　　　<div class="radio disabled">
　　　　　　<label><input type="radio" name="optradio" disabled>Opção　3</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Teste Veja ‹/›

Use .radio-inline classe permite que as opções sejam exibidas na mesma linha:

exemplo

<!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>Controles de formulário: radio</h2>
　　<p>Os seguintes exemplos incluem três opções. A última é desativada, usando .radio-inline classe permite que as opções sejam exibidas na mesma linha: </p>
　　<form>
　　　　<label class="radio-inline"><input type="radio" name="optradio">Opção　1</label>
　　　　<label class="radio-inline"><input type="radio" name="optradio">Opção　2</label>
　　　　<label class="radio-inline"><input type="radio" name="optradio" disabled>Opção　3</label>
　　</form>
</div>
</body>
</html>

Teste Veja ‹/›

Menu suspenso do Bootstrap select

Quando você deseja que o usuário possa escolher entre várias opções, mas, por padrão, apenas uma opção pode ser selecionada, use a caixa de seleção.

Os seguintes exemplos incluem dois menus suspensoes:

exemplo

<!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>Controles de Formulário: select</h2>
　　<p>Este formulário contém dois menus de seleção (listas select):</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="sel1">Menu de Seleção Única:</label>
　　　　　　<select class="form-control" id="sel1"
　　　　　　　　">1</<option>
　　　　　　　　">2</<option>
　　　　　　　　">3</<option>
　　　　　　　　">4</<option>
　　　　　　</select>
　　　　　　<br>
　　　　　　<label for="sel2">Menu de Seleção Múltipla (Pressione a tecla Shift para selecionar múltiplas opções):</label>
　　　　　　<select multiple class="form-control" id="sel2"
　　　　　　　　">1</<option>
　　　　　　　　">2</<option>
　　　　　　　　">3</<option>
　　　　　　　　">4</<option>
　　　　　　　　">5</<option>
　　　　　　</select>
　　　　</div>
　　</form>
</div>
</body>
</html>

Teste Veja ‹/›

Bootstrap4 Grupo de Entrada Bootstrap4 Formulário