Saltar al contenido

¿Cómo usar los Componentes de Bootstrap en Nuestra Web?

6 junio, 2019

Si estás haciendo algo relacionado con la web, es probable que hayas oído hablar de Bootstrap. Si a estas alturas todavía no sabe qué es Bootstrap. ¿Cómo Incluir los Componentes de Bootstrap en Nuestra Web?

O simplemente quiere obtener una mejor visión general de qué es y qué es lo que mejor funciona, ha venido al lugar correcto.

¿Cómo Incluir los Componentes de Bootstrap en Nuestra Web?

Plantilla HTML Bootstrap básica
Una plantilla HTML básica de Bootstrap debería tener este aspecto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Es importante comenzar cualquier HTML con una declaración de HTML 5 Doctype, para que los navegadores sepan qué tipo de documento pueden esperar.

La cabecera contiene tres etiquetas <meta> importantes que se deben declarar primero y todas las etiquetas de cabecera adicionales se deben agregar después de estas.

Plantillas Bootstrap y Componentes UI

Bootstrap viene con plantillas de diseño básicas de HTML y CSS que incluyen muchos componentes comunes de IU. Estos incluyen tipografía, tablas, formularios, botones, glifos, menús desplegables, botones y grupos de entrada.

Navegación, paginación, etiquetas y distintivos, alertas, barras de progreso, modales, pestañas, acordeones, carruseles y muchos más. Muchos de estos utilizan extensiones de JavaScript y complementos de jQuery.

Sistema de Cuadrículas Bootstrap

Las cuadrículas proporcionan estructura al diseño, definiendo las pautas horizontales y verticales para organizar el contenido y hacer cumplir los márgenes.

Las cuadrículas también ofrecen una estructura intuitiva para los espectadores, porque es fácil seguir un flujo de contenido de izquierda a derecha o de derecha a izquierda que se desplaza por la página.

El sistema de cuadrícula Bootstrap tiene cuatro niveles de clases: xs para teléfonos (<768px), sm para tabletas (≥768px), md para escritorios (≥992px) y lg para escritorios más grandes (≥1200px).

Estos básicamente definen los tamaños en los cuales las columnas se colapsarán o se extenderán horizontalmente. Los niveles de clase se pueden usar en cualquier combinación para obtener diseños dinámicos y flexibles.

Por ejemplo, si queremos obtener dos filas, una con dos columnas y otra con cuatro, podríamos escribir:

<div class="row">
<div class="col-md-6">First column</div>
<div class="col-md-6">Second column</div>
</div>
<div class="row">
<div class="col-md-3">First column</div>
<div class="col-md-3">Second column</div>
<div class="col-md-3">Third column</div>
<div class="col-md-3">Fourth column</div>
</div>

Tipografía Bootstrap

Los desarrolladores principiantes a menudo asumen que su HTML puro y sin estilo se verá igual en todos los navegadores.

Desafortunadamente, cada navegador tiene su propia hoja de estilo de “agente de usuario” que se aplica al HTML y no hay dos navegadores que tengan los mismos valores predeterminados.

Bootstrap establece la visualización global básica, tipografía y estilos de enlace. Específicamente:

  • Establecer background-color: #fff; en el body
  • Utilice los atributos @font-family-base, @font-size-base y @line-height-base como nuestra base tipográfica
  • Establezca el color del enlace global a través de @link-color y aplique los subrayados del enlace solo en :hover
  • Estos estilos se pueden encontrar dentro de scaffolding.less.

Formas

Si bien HTML5 introdujo una serie de nuevos atributos de formulario, tipos de entrada y otros elementos auxiliares, los navegadores no han mejorado mucho la forma visual.

Esta es un área en la que Bootstrap realmente brilla, porque alinear y estilizar las etiquetas o entradas, validar formularios y mostrar mensajes de error, puede ser complicado sin ayuda.

Imágenes e Iconos

Bootstrap viene con más de 260 glifos en formato de fuente, lo que es increíble. Los íconos de fuente tienen muchas ventajas sobre las imágenes de mapa de bits simples, una de ellas es que son escalables.

También se pueden personalizar fácilmente usando solo CSS, por lo que manipular el tamaño o el color, o incluso agregar una sombra, es muy fácil.

Botones, Grupos de Botones y Menús Desplegables

Los botones son una de las cosas que cada navegador presenta de manera totalmente diferente. Si desea tener un diseño coherente en todos los navegadores, este es potencialmente un gran problema.

Afortunadamente, Bootstrap tiene una solución elegante para los botones también. Y además de hacerlos consistentes, trae muchas variaciones para jugar.

Puede aplicar la clase .btn a los elementos <a> e <input>. Puede agrupar una serie de botones en una sola línea usando la clase .btn-group en el <div> principal.

Con un poco de ayuda de JavaScript, puede crear un comportamiento de estilo de radio y casilla de verificación en los botones.

O puede convertir sus botones en menús desplegables colocándolos dentro de un grupo .btn y proporcionando el marcado de menú adecuado de la lista de elementos no ordenados.

¿Cómo usar los Componentes de Bootstrap en Nuestra Web?
5 (100%) 1 vote[s]