Bootstrap4 Tutoriales básicos

Bootstrap4 Formulario personalizado Bootstrap4 Control de formulario

Bootstrap4 Grupo de entrada

Podemos usar .input-La clase group se utiliza para agregar más estilos a los campos de entrada del formulario, como íconos, texto o botones.

Use .input-group-La clase prepend se puede usar para agregar información de texto antes de la caja de entrada, .input-group-La clase append se agrega detrás de la caja de entrada.

Finalmente, también necesitamos usar .input-group-La clase text se utiliza para establecer el estilo del 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 entrada</h2>
　　<p> .input-group .input-La clase group se utiliza para agregar más estilos a los campos de entrada del formulario, como íconos, texto o botones, .input-group-prepend class add at the beginning, .input-group-append add at the end.</p>
　　<p>Use .input-group-text class to set the style of text.</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="Username" 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">Submit</button>
　　</form>
</div>
</body>
</html>

Prueba y mira ‹/›

Running effect as follows：

Input box size

Use .input-group-sm class to set a small input box, .input-group-lg class sets a large input box：

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>Input box size</h1>
　　<p>Use .input-group-sm class to set a small input box, .input-group-lg class sets a large input box：</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>

Prueba y mira ‹/›

Running effect as follows：

Multiple input boxes and text

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>Multiple input boxes and text</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>

Prueba y mira ‹/›

Running effect as follows：

Checkboxes and radio buttons

Text information can be replaced by checkboxes and radio buttons：

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>Checkboxes and radio buttons</h2>
　　<p>Text information can be replaced by checkboxes and radio buttons：</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>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Input box adds button group

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>Input box adds button group</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">Aceptar</button>　　
　　　　　　<button　class="btn　btn-danger"　type="button">Cancelar</button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Configurar el menú desplegable

No es necesario usar la clase .dropdown en el campo de entrada para agregar un menú desplegable.

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 el menú desplegable</h2>
　　<p>No es necesario usar la clase .dropdown en el campo de entrada para agregar un menú desplegable.</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">
　　　　　　　　　　Elegir sitio web
　　　　　　　　</button>
　　　　　　　　<div　class="dropdown-menu">
　　　　　　　　　　<a　class="dropdown-item"　href="https://www.google.com">GOOGLE</a>
　　　　　　　　　　<a　class="dropdown-item"　href="https://es.oldtoolbag.com">w3codebox</a>
　　　　　　　　　　<a　class="dropdown-item"　href="https://www.taobao.com">TAOBAO</a>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control"　placeholder="Dirección del sitio web">
　　　　</div>
　　</form>
</div>
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Etiqueta del grupo de campos de entrada

En el grupo de campos de entrada, configure las etiquetas mediante el label que rodea el grupo de campos de entrada. La propiedad for del etiqueta debe coincidir con el id del grupo de campos de entrada. Al hacer clic en la etiqueta, se puede enfocar el campo 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>Etiqueta del grupo de campos de entrada</h2>
　　<p>En el grupo de campos de entrada, se puede configurar la etiqueta mediante la etiqueta label exterior del grupo de campos de entrada, y el atributo for de la etiqueta debe coincidir con el id del grupo de campos de entrada.</p>
　　<p>Al hacer clic en la etiqueta, se puede enfocar en el campo de entrada:</p>
　　<form>
　　　　<label for="demo">Ingrese su correo electrónico aquí:</label>
　　　　<div class="input-group mb-3">
　　　　　　<input type="text" class="form-control" placeholder="Correo electrónico" id="demo" name="email">
　　　　　　<div class="input-group-append">
　　　　　　　　<span class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　</form>
</div>
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Bootstrap4 Formulario personalizado Bootstrap4 Control de formulario