Bootstrap 4 proporciona una variedad de componentes personalizables y reutilizables que hacen que el desarrollo sea más rápido y sencillo. Se basan en gran medida en la nomenclatura del modificador base, es decir, la clase base tiene muchos grupos de propiedades compartidas juntas, mientras que la clase modificadora tiene un grupo de estilos individuales. Por ejemplo, .btn es una clase base y .btn-primary o .btn-success es una clase modificadora . Los componentes de arranque van desde alertas, botones, insignias, tarjetas hasta varios otros componentes.
Lista de componentes:
- Jumbotron : simplemente pone más atención a un contenido o información en particular haciéndolo más grande y más llamativo.
- Alertas : Es una ventana emergente con un mensaje predefinido que aparece después de una acción en particular.
- Botones : Son botones personalizados que se utilizan para realizar una acción en el formulario, cuadro de diálogo, etc. Se encuentran en múltiples estados, tamaños y tienen estilos predefinidos.
- Grupo de botones : Es un grupo de botones alineados en una sola línea y pueden estar dispuestos tanto vertical como horizontalmente.
- Insignia : Es un componente de etiquetado que se utiliza para agregar información adicional.
- Barra de progreso : se utiliza para mostrar el progreso de una operación en particular con una barra de progreso personalizada. Tienen etiquetas de texto, barras apiladas y fondos animados.
- Rueda giratoria: la rueda giratoria muestra el estado de carga de sitios web o proyectos. Están construidos con HTML, CSS y no requieren JavaScript.
- Scrollspy : sigue actualizando la barra de navegación al enlace actualmente activo en función de la posición de desplazamiento en la ventana gráfica.
- Grupo de lista : se utiliza para mostrar una serie de contenido desordenado de manera adecuada.
- Tarjeta : proporciona un contenedor de contenido personalizable, extensible y flexible.
- Desplegable : se utiliza para desplegar el menú en el formato de una lista de enlaces, son superposiciones contextuales y alternables.
- Navs : Se utiliza para crear un menú de navegación básico y sencillo con una clase base .nav.
- Barra de navegación: la barra de navegación son los encabezados en la parte superior de un sitio web o página web.
- Formularios : los formularios se utilizan para tomar múltiples entradas a la vez del usuario. Bootstrap tiene dos diseños disponibles apilados y en línea.
- Grupos de entrada : tienen controles de formulario extendidos al agregar un botón, un grupo de botones o texto a cada lado de las entradas.
- Breadcrumb : proporciona la ubicación de la página actual en una jerarquía de navegación y también agrega separadores a través de CSS.
- Carrusel : Es una presentación de diapositivas de contenido de imagen o texto construido con CSS 3D y JavaScript.
- Brindis : Muestra un mensaje durante un breve período de tiempo, unos segundos. Son mensajes de alerta diseñados para imitar las notificaciones automáticas populares en los sistemas móviles y de escritorio.
- Información sobre herramientas : proporciona información pequeña sobre el elemento/enlace cuando el mouse se desplaza sobre el elemento.
- Ventanas emergentes : muestra información adicional sobre el elemento/enlace cuando se hace clic en él.
- Collapse : es un complemento de JavaScript que se utiliza para mostrar u ocultar el contenido.
- Modal : es una pequeña ventana emergente colocada sobre la ventana real.
- Paginación : se utiliza para navegar fácilmente entre diferentes páginas, se utiliza un gran bloque de enlaces conectados para hacerlos accesibles.
- Objeto multimedia : el objeto multimedia se utiliza para componentes repetitivos y complejos como tweets o blogs. Las imágenes o videos se colocan/alinean a la izquierda o a la derecha del contenido.
Ejemplo 1: En este ejemplo, usaremos algunos de los componentes de la lista.
HTML
<!DOCTYPE html> <html> <head> <title>Components of BootStrap 4</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <!-- A nav code--> <br /> <h3>Nav:</h3> <ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Active link</a> </li> <li class="nav-item"> <a class="nav-link" href="#provide link url here"> First link </a> </li> <li class="nav-item"> <a class="nav-link" href="#provide link url here"> second link </a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#provide link url here" tabindex="-1" aria-disabled="true" >Disabled</a> </li> </ul> <!-- A nav code--> <!-- A small alert code--> <h3>Alert:</h3> <div class="alert alert-info" role="alert"> A simple alert! </div> <!-- A small alert code--> <h3>Modal:</h3> <!-- Button trigger modal--> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal"> geeksforgeeks </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> geeksforgeeks </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Hello, thanks for checking out geeksforgeeks! </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Save </button> </div> </div> </div> </div> <!-- A button trigger modal--> </html>
Producción:
Ejemplo 2: Este ejemplo ilustra el uso de Bootstrap jumbotron.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> </head> <body> <div class="container"> <div class="jumbotron"> <h1 class="text-center text-success"> GeeksforGeeks </h1> <h3>Bootstrap Jumbotron Tutorial</h3> <p> Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. </p> </div> </div> </body> </html>
Producción:
Jumbotrón de arranque
Ejemplo 3: Este ejemplo ilustra el uso de Tostadas Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Toast Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3 class="text-success">GeeksforGeeks</h3>
<h5>Toast Example</h5>
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">
GeeksforGeeks
</strong>
<button type="button"
class="ml-2 mb-1 close"
data-dismiss="toast">
×
</button>
</div>
<div class="toast-body">
A Computer Science portal for geeks.
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".toast").toast("show");
});
</script>
</body>
</html>
Salida :
Tostada de arranque
Publicación traducida automáticamente
Artículo escrito por pateljkhushbu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA