En este video, aprenderemos a utilizar los checkboxes y los radio buttons de Bootstrap 5 en nuestros proyectos. Exploraremos las clases y atributos necesarios para crear formularios estilizados y funcionales.
Introducción
Bootstrap 5 ofrece una variedad de clases para estilizar checkboxes y radio buttons de manera sencilla y efectiva. Vamos a explorar cómo implementarlas en nuestros proyectos utilizando Visual Studio Code.
Estructura Básica
Primero, creamos una estructura básica de contenedor, fila y columna para nuestros checkboxes y radio buttons.
<div class="container">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">
Acepta los términos
</label>
</div>
</div>
</div>
</div>Implementación en Visual Studio Code
Crear un Archivo HTML: Crea un archivo HTML en Visual Studio Code y pega el ejemplo anterior.
Ver en el Navegador: Usa la extensión "Live Server" en Visual Studio Code para abrir el archivo HTML en el navegador y ver los cambios en tiempo real.
Checkbox Básico
Para crear un checkbox en Bootstrap, utilizamos las clases form-check y form-check-input para el input, y form-check-label para el label.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">
Acepta los términos
</label>
</div>Para crear un radio button en Bootstrap, utilizamos las mismas clases que con los checkboxes, pero cambiamos el tipo del input a radio.
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1">
<label class="form-check-label" for="radio1">
Opción 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio2" value="option2">
<label class="form-check-label" for="radio2">
Opción 2
</label>
</div>Switches
Para convertir un checkbox en un switch, añadimos la clase form-switch.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>Checkboxes en Línea
Para mostrar los checkboxes en línea, añadimos la clase form-check-inline.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>Para crear botones que actúan como toggles, utilizamos la clase btn-check.
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label>
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="option1">Radio 1</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-outline-secondary" for="option2">Radio 2</label>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
<label class="btn btn-outline-secondary" for="option3">Radio 3</label>Ejemplo Completo
Aquí tienes un ejemplo completo que incluye varios tipos de checkboxes y radio buttons:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkboxes y Radio Buttons Bootstrap</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">
Acepta los términos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1">
<label class="form-check-label" for="radio1">
Opción 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio2" value="option2">
<label class="form-check-label" for="radio2">
Opción 2
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Switch</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label>
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="option1">Radio 1</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-outline-secondary" for="option2">Radio 2</label>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
<label class="btn btn-outline-secondary" for="option3">Radio 3</label>
</div>
</div>
</div>
</body>
</html>Conclusión
Bootstrap 5 simplifica la creación y estilización de checkboxes y radio buttons. Utilizando las clases proporcionadas, puedes crear formularios funcionales y atractivos con poco esfuerzo.
