Bootstrap4 Tutorial Básico

Bootstrap4 Carousel Bootstrap4 Grupo de Caixas de Entrada

Bootstrap4 Formulário personalizado

　　 Bootstrap4 Você pode personalizar alguns estilos de formulário para substituir os estilos padrão do navegador.

Campo de seleção personalizado

Se você quiser personalizar um campo de seleção, configure o <div> como o elemento pai, com a classe .custom-control e .custom-checkbox, o campo de seleção como elemento filho colocado dentro do <div>, e em seguida, o campo de seleção configurado como type="checkbox", classe .custom-control-input.

Texto da caixa de seleção é usado label 标签，标签使用 .custom-control-label 类，label 的 for o valor do atributo deve coincidir com o id da caixa de seleção.

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>Caixa de seleção personalizada</h2>
　　<p>Se você deseja personalizar uma caixa de seleção, você pode configurar <div> como pai, classe .custom-control e .custom-checkbox, a caixa de seleção é colocada como filho dentro da <div>, e a caixa de seleção é configurada como type="checkbox", classe .custom-control-input.</p>
　　<p>Texto da caixa de seleção é usado com a etiqueta label, a etiqueta usa .custom-control-label classe, o valor do atributo for da label deve coincidir com o id da caixa de seleção.</p>
　　<form action="/action_page.php">
　　　　<div class="custom-controle custom-checkbox mb-3">
　　　　　　<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
　　　　　　<label class="custom-control-label for="customCheck">Caixa de seleção personalizada</label>
　　　　</div>
　　　　<input type="checkbox" id="defaultCheck" name="example2">
　　　　<label for="defaultCheck">Caixa de seleção padrão</label>
　　　　<br>
　　　　<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:

Opção de rádio personalizada

Se você deseja personalizar uma opção de rádio, você pode configurar <div> como pai, classe .custom-control e .custom-radio, o campo de opção é colocado como filho dentro da <div> dentro, e o campo de opção é configurado como type="radio", classe .custom-control-input.

Texto do campo de opção é usado label 标签，标签使用 .custom-control-label 类，label 的 for o valor do atributo deve coincidir com o id do campo de opção. 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>Opção de rádio personalizada</h2>
　　<p>Se você deseja personalizar uma opção de rádio, você pode configurar a div como pai, classe .custom-control e .custom-radio, a caixa de seleção é colocada como filho dentro da div, e o campo de opção é configurado como type="radio", classe .custom-control-input.</p>
　　<p>Texto do campo de opção é usado com a etiqueta label, a etiqueta usa .custom-control-label classe, o valor do atributo for da label deve coincidir com o id do campo de opção.</p>
　　<form action="/action_page.php">
　　　　<div class="custom-controle custom-radio">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio" name="example1">
　　　　　　<label class="custom-control-label for="customRadio">Opção de rádio personalizada</label>
　　　　</div>　　　　
　　　　<input type="radio" id="defaultRadio" name="example2">
　　　　<label for="defaultRadio">Caixa de seleção de padrão</label>
　　　　<br>
　　　　<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:

Exibição de controle personalizado na mesma linha

Nós podemos usar .custom no elemento externo-control-usar a classe inline para envolver os controles de formulário personalizados, dessa forma, os controles de formulário personalizados poderão ser exibidos na mesma linha:

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>Exibição de controle personalizado na mesma linha</h2>
　　<p>Nós podemos usar .custom no elemento externo-control-usar a classe inline para envolver os controles de formulário personalizados, dessa forma, os controles de formulário personalizados poderão ser exibidos na mesma linha:</p>
　　<form action="/action_page.php">
　　　　<div class="custom-controle custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio1" name="example1">
　　　　　　<label class="custom-control-label" for="customRadio1">Caixa de seleção personalizada　1</label>
　　　　</div>
　　　　<div class="custom-controle custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio2" name="example2">
　　　　　　<label class="custom-control-label" for="customRadio2">Caixa de seleção personalizada　2</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:

Menu de seleção personalizado

Pode criar um menu de seleção personalizado adicionando <select> adicionando .custom ao elemento-classe select:

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>Menu de seleção personalizado</h2>
　　<p>Pode criar um menu de seleção personalizado adicionando .custom ao elemento select-classe select:/p>
　　<form>
　　<select name="cars" class="custom-select-sm">
　　　　<option selected>Menu de seleção personalizado</option>
　　　　<option value="Google">Google</option>
　　　　<option value="w3codebox">w3codebox</option>
　　　　<option value="Taobao">Taobao</option>
　　</select>
　</form>
</div>
</body>
</html>

Teste e veja ‹/›

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

Se quisermos ajustar o tamanho do menu de seleção personalizado, podemos usar .custom-select-sm, .custom-select-usar lg para configurar seus tamanhos:

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>Tamanho do menu de seleção personalizado</h2>
　　<p>Se quisermos ajustar o tamanho do menu de seleção personalizado, podemos usar .custom-select-sm, .custom-select-usar lg para configurar seus tamanhos:</p>
　　<form>
　　　　<!--　pequeno　-->
　　　　<select name="cars" class="custom-select-sm">
　　　　　　<option selected>Menu de seleção personalizado pequeno</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　　
　　　　<!--　grande　-->
　　　　<select name="cars" class="custom-select-lg">
　　　　　　<option selected>Menu de seleção personalizado grande</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　</form>
</div>
</body>
</html>

Teste e veja ‹/›

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

Controle deslizante personalizado

Nós podemos adicionar input 　para type="range" adicionar .custom ao campo de entrada-usando a classe range para configurar o controle deslizante personalizado:

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>Controle deslizante personalizado</h2>
　　<p>Nós podemos adicionar .custom ao campo de entrada cujo tipo é "range"-range 类来设置自定义滑块控件:</p>
　　<form action="/action_page.php">
　　　　<label for="customRange">自定义滑块控件</label>
　　　　<input type="range" class="custom-range" id="customRange" name="points1">
　　　　<label for="defaultRange">默认滑块控件</label>
　　　　<input type="range" id="defaultRange" name="points2">
　　　　<p><button type="submit" class="btn btn-primary">Enviar</button></p>
　　</form>
</div>
</body>
</html>

Teste e veja ‹/›

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

自定义文件上传控件

我们可以在父元素添加 .custom-file 类，然后在　input 设置为 type="file" 并添加 .custom-file-input:

上传控件的文本使用 label 标签，标签使用 .custom-file-label 类，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>我们可以在父元素添加 .custom-file 类，然后在 input 设置为 type="file" 并添加 .custom-control-label:</p>
　　<form action="/action_page.php">
　　　　<p>Estilo personalizado de upload de arquivo:</p>/p>
　　　　<div class="custom-file mb-3">
　　　　　　<input type="file" class="custom-file-input" id="customFile" name="filename">
　　　　　　<label class="custom-file-label" for="customFile">Selecione o arquivo</label>
　　　　</div>
　　　　
　　　　<p>Estilo padrão de upload de arquivo:</p>/p>
　　　　<input type="file" id="myFile" name="filename2">
　　
　　　　<div class="mt-3">
　　　　　　<button type="submit" class="btn btn-primary">Enviar</button>
　　　　</div>
　　</form>
</div>
</body>
</html>

Teste e veja ‹/›

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

Bootstrap4 Carousel Bootstrap4 Grupo de Caixas de Entrada