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

logo de bootstrap con persona utilizando pc en el fondo

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()

    驴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.

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

    驴Qu茅 te pareci贸 este art铆culo?

    Subir

    Este sitio web utiliza cookies para garantizar que obtenga la mejor experiencia en nuestro sitio web. Leer M谩s