Cómo agregar y usar componentes de Bootstrap en una página o aplicación web

Si estás haciendo algo relacionado con la web, es probable que hayas oído hablar de Bootstrap. En esta podemos aprender a utilizar CSS y JavaScript. El objetivo es facilitar la organización de contenido, la aplicación de estilos y el desarrollo de páginas webs adaptables a dispositivos móviles. Es por eso, que vamos a explicarte a como agregar y usar los diferentes componentes de Bootstrap.

Cómo usar Componentes Bootstrap en tu Página Web

Índice()
  1. ¿Cómo incluir los componentes de Bootstrap en una página o aplicación web?
  2. Descargar e instalar Bootstrap
  3. Plantillas Bootstrap y Componentes UI
    1. Imágenes, iconos, botones, grupos de botones y menús desplegables

¿Cómo incluir los componentes de Bootstrap en una página o aplicación web?

Lo primero que hay que hacer antes de empezar a utilizar Bootstrap y usar sus componentes, es que es muy importante que comencemos cualquier HTML con una declaración de HTML 5 Doctype, para que los navegadores sepan qué tipo de documento pueden esperar, para luego proceder a descargar la aplicación. Y que con  Bootstrap Validator incluso podemos validar un formulario con Java Script

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. Una Plantilla HTML Bootstrap básica debería tener el siguiente aspecto y seguir las mismas reglas para poder agregar sus componentes correctamente:

<! 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>

pagina oficial para descargar bootstrap

El sitio web puede ser descargado como un archivo ZIP desde Github y Bitbucket, o puede ser clonado desde una terminal. Esto creará un directorio con todas las páginas e imágenes del sitio web. El objetivo es utilizar Bootstrap para organizar el contenido, mejorar la tipografía y las imágenes y aplicar estilos a todas las páginas del sitio.

Descargar e instalar Bootstrap

A continuación, es necesario descargar e instalar Bootstrap. Para esto, nos dirigimos a la página oficial de descargas de Bootstrap Al finalizar la descarga, obtendremos el archivo bootstrap-3.3.6-dist.zip el cual vamos a descomprimir. El directorio resultante tiene la siguiente estructura:

bootstrap-3.3.6-dist/
CSS/
fonts/
JS/

Copiamos los directorios CSS/, fonts/ y JS,  al directorio donde se encuentra el sitio web al que le vamos a agregar los componentes. Y para finalizar la instalación, es necesario incluir los archivos CSS de Bootstrap.

Estos los encontramos en la sección <head> de cada uno de los archivos HTML que se encuentran en el directorio del sitio estático. También debemos incluir el archivo JavaScript de Bootstrap al final de cada archivo HTML, antes del cierre de la etiqueta.

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.

Aparte de eso también incluye componentes de 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.

logo de bootstrap con fondo azul

Imágenes, iconos, botones, grupos de botones y menús desplegables

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.

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. Aunque 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, se 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.

Subir