18. Componentes Bootstrap: botones, formularios, carrusel.

Componentes de Bootstrap: botones, formularios, carrusel

Bootstrap es una de las bibliotecas más populares cuando se trata de desarrollo front-end. Ofrece una variedad de componentes listos para usar que pueden acelerar significativamente el proceso de desarrollo. En este capítulo, nos centraremos en tres componentes principales: botones, formularios y carrusel.

Botones

Los botones son una parte esencial de cualquier interfaz de usuario y Bootstrap ofrece una amplia gama de estilos de botones. Para crear un botón en Bootstrap, debe usar el botón <button> con la clase .btn y una de las clases de estilo de botón, por ejemplo .btn-primary para un botón azul.

<button type="button" class="btn btn-primary">Botón principal</button>

Además de los estilos de botones, Bootstrap también ofrece clases para diferentes tamaños de botones, botones de borde, botones de grupo y más.

Formularios

Los formularios son otra parte crucial de cualquier aplicación web. Bootstrap ofrece clases para crear formularios de apariencia profesional con validación de formularios, estilos de entrada, áreas de texto, casillas de verificación, botones de opción, etc.

Para crear un formulario en Bootstrap, necesita utilizar el método <form> con la clase .form. Luego, cada campo del formulario se crea utilizando la función <div> con la clase .form-group para agrupar la etiqueta y el campo de entrada.

<formulario>
  <div class="form-group">
    <label for="exampleInputEmail1">Dirección de correo electrónico</label>
    <input type="correo electrónico" class="form-control" id="ejemploInputEmail1" aria-describedby="emailHelp">
  </div>
  <div class="form-group">
    <label for="ejemploInputPassword1">Contraseña</label>
    <tipo de entrada="contraseña" clase="control-formulario" id="ejemploInputPassword1">
  </div>
  <button type="enviar" class="btn btn-primary">Enviar</button>
</formulario>

Este es un ejemplo de un formulario simple con dos campos: uno para el correo electrónico y otro para la contraseña. Bootstrap también ofrece clases para agregar información sobre herramientas, mensajes de error y más.

Carrusel

El carrusel es un componente que le permite mostrar una serie de imágenes (u otro contenido) en una secuencia giratoria. Se utiliza comúnmente para mostrar una serie de imágenes destacadas en la página de inicio de un sitio web.

Para crear un carrusel en Bootstrap, necesitas usar la función <div> con la clase .carrusel. Luego, cada elemento del carrusel se crea utilizando la función <div> con la clase .carousel-item.

<div id="carouselExampleIndicators" class="carrusel de diapositivas" data-ride="carrusel">
  <ol class="indicadores-carrusel">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carrusel-interior">
    <div class="elemento-carrusel activo">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carrusel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carrusel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carrusel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carrusel-control-next" href="#carouselExampleIndicators" role="botón" data-slide="next">
    <span class="carrusel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Siguiente</span>
  </a>
</div>

Este es un ejemplo de un carrusel simple con tres imágenes. Bootstrap también ofrece opciones para agregar títulos de imágenes, controles de navegación y marcadores.

En resumen, Bootstrap ofrece una variedad de componentes que pueden hacer que el proceso de desarrollo sea mucho más rápido y sencillo. Sin embargo, es importante recordar que Bootstrap es sólo una herramienta y no reemplaza un buen conocimiento de HTML, CSS y JavaScript.

Siguiente página del libro electrónico gratuito:

65Introducción a Javascript: variables, tipos de datos, operadores

3 minutos