Qué es bootstrap y cómo usar: formularios, botones, colores y más

Si estás buscando ser más eficiente y eficaz en tu código, con el diseño de tu web o front end, usar bootstrap es clave para obtener este resultado. Dando una clara y gratuita forma de usar diferentes elementos html con ventajas increíbles en estilo, bootstrap es por lejos, una de las mejores opciones hoy en día para el desarrollo web.

Aunque como tal bootstrap abarca cientos de opciones para diferentes elementos, hoy me concentraré en dar unos primeros pasos para comenzar a usar: instalación, configuración, algunos elementos html y consejos. Así que vamos a comenzar.

Lo que vas a necesitar

En el video de este post, hablo sobre algunos enlaces que si o si vas a necesitar así que aquí te dejo los principales para que, a medida que avancemos, puedas seguir el paso sin problema:

  • Bootstrap docs: este enlace contiene básicamente toda la información de la versión vigente para usar bootstrap.
  • Repositorio: código usado en el video de explicación para conocer los primeros pasos en bootstrap.
  • Pesticide extesión: la uso en el video de este post para mostrar los contenedores y estuctura html en chrome.

Qué es bootstrap y para qué sirve

Qué es bootstrap
Qué es Gas y GasPrice: transacciones y congestión en blockchain

Cuando ejecutamos transacciones en blockchain es probable que desconozcamos los costos o tiempos de …

truffle ganache nodejs
Entorno de prueba blockchain con truffle ganache Nodejs: sesión 1

Si estás iniciando en la programación blockchain, es demasiado importante conocer los entornos de pr…

Cómo subir y eliminar imágenes en AWS S3 NODEJS y React

En la construcción de nuestra aplicación web, el gestor de archivos es tal vez uno de los pasos más …

Por definición, bootstrap es un framework enfocado en la creación de interfaces adaptables o responsivas. Es un conjunto de herramientas de código abierto, o biblioteca para la creación y diseño de sitios web o aplicaciones.

El término responsiva significa que responder a la ventana gráfica: si lo vemos desde un teléfono, portatil o monitor. Por ende, si trabajamos en un único programa o código, lo ideal siempre sería que fuera adaptativo y de esta manera evolucionar al mismo paso de internet, sin omitir diferentes tipos de pantallas. Un sitio web a la vanguardia.

Cómo funciona bootstrap

Si bien sabemos que podemos crear nuevas clases CSS en nuestra hoja de estilos, sabemos que para la creación completa de una web, se va a necesitar mucho más que una clase. Pues bien, Bootstrap nos ofrece diferentes clases prediseñadas para acelerar este proceso.

Lo que debemos hacer para dar uso a todas las herramientas de bootstrap es, instalar, seleccionar sobre cuál elemento html vamos a brajar, escoger una clase y listo! comenzar a a modificar lo que deseemos. Se que suena algo “fácil” pero debemos como siempre, hacerlo con cuidado para entender y así poder avanzar a clases más avanzadas de bootstrap.

Instalar Bootstrap

Instalar bootstrap

Desde la web oficial, podremos encontrar dos formas de instalar: vía paquete directamente al programa, o bien usar CDN. Como lo he explicado en anteriores post, es una gran ventaja usar la red de entrega de contenido (CDN) para así tener un sitio con mayor velocidad de carga alrededor del mundo.

Claro que la opción de instalación directa como paquete también es posible. Entonces para resumir, haz click aquí y escoge:

  1. Paquete: copia y pega el comando en la terminal con la última versión de bootstrap.
  2. CDN: copia la primera línea de código CSS dentro del HEAD de tu programa. Tal cual como si fuera una hoja de estilos, solo copia y pega.

Una vez esté instalado veras un cambio inmediato en la tipografía de tu sitio web. Inclusive en algunos elementos html que ya tengas, es probable que los tome ya como clases de Bootstrap y sean modificados en ese momento.

Cómo usar Bootstrap

Cómo usar bootstrap

Teniendo claro que bootstrap tendrá un efecto sobre cualquier elemento html, podemos añadir clases DENTRO del mismo elemento. Por ejemplo, uno de los más usados es un contendor en html y lo usamos como div. Pero si añadimos la clase “.container” al div, veremos cómo se vuelve responsivo, márgenes tanto en izquierda como derecha, arriba y abajo, manteniendo un orden estructural dentro y fuera del mismo.

<!-- Primer contenedor SIN bootstrap -->
<div>
    <h1>Mi sitio web</h1>

    <p>Bienvenidos a mi sitio web.</p>
</div>


<!-- Segundo contenedor contenedor: bootstrap -->
<div class="container" style="background-color: red;">
    <h1>Segundo contenedor</h1>

    <p>Bienvenidos a mi sitio web.</p>
</div>
Ejemplo de contenedores

Esto sin necesidad de crear una clase o id para el contenedor en la hoja de estilos, sin añadir “style” al mismo elemento, solamente añadiendo .container al div, y listo. Así es como funciona bootstrap para todos los elementos html.

Mis elementos HTML favoritos en Bootstrap

Como bien lo mencioné, hay muchas posibles opciones sobre un mismo elemento, pero generalmente los que más uso en sus proyectos lo de mis clientes son: formularios, botones, contenedores, grid y tablas. Aunque son bastantes a continuación te voy a mostrar algunos ejemplos de estos.

Formulario en Bootrstrap

Formularios bootstrap

Los formularios los usamos en todo momento, ya sea para un registro, una compra, contacto. En sí, para todo se usan y más para back-end, por lo mismo debemos conocer las opciones que tenemos disponibles con Bootstrap. Haz click aquí para ver todo sobre fomularios.

Ahora como lo vemos en la imagen, bootstrap nos ofrece 8 diferentes tópicos sobre los formularios. Debes buscar uno a uno para saber cuál es el que más te va a servir en tu proyecto, pero en lo general el formulario sencillo siempre se usará. A continación verás el primer código de bootstrap para un formulario sencillo.

<form>

  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>

  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1"
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

El anterior tiene: input email, intput password, input check y botón de submit. Todos con sus respectivas clases y estilos de bootrap. Pero y ¿si queremos modificar algo? claro que podemos hacerlo.

Floating labels – inputs

Floating labels

Para mi, floating labels son perfectos para cualquier tipo de formulario y a diferencia de un input normal, flotaing labels superpone el label del input hasta que se ingrese un dato. Por ejemplo, si el label es “nombre” se verá solo nombre hasta que se ingrese un dato, en este momento, el label pasa a la parte superior izquierda del input de una forma muy muy elegante.

Aquí te dejo el código de comparación sobre el primer formulario, usando esta característica de bootstrap. Igualmente, haz click aquí para ver todo sobre floating labels en bootstrap.

<div class="container mt-5">

    <h2 class="pb-3" >Formulario</h2>

    <form  class="form-floating" method="post" >
        
        <!-- Email - floating label -->
        <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
        <label for="floatingInputValue">Input with value</label>


        <!-- Password -->
        <div class="mb-3">

          <label for="exampleInputPassword1" class="form-label">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <!-- check -->
        <div class="mb-3 form-check">

          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>

        
        <!-- Botón submint -->
        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-warning btn-lg">Submit</button>
        </div>

    </form>
</div>

Botones y colores

Botones bootstrap

Hay muchisimas posibilidades con los botones y lo digo por experiencia. Bootstrap permite crear muchas configuraciones con un solo botón, incluso convertir enlaces en botones lo cual es extremendadmente útil. Haz click aquí para ver todo lor eferente a botones en bootstrap.

Podemos modificar básicamente todo: tipo de botón, largo, ancho del botón, color del botón con respecto a los colores básicos de bootstrap como los estás viendo en la anterior imagen:

  • primary
  • secondary
  • success
  • Danger
  • warning
  • info
  • light
  • dark

Todos estos tienen un color ya establecido, pero en dado caso que quieras modificar el color primario con respecto a la paleta de colores de tu marca, solo basta con modificar la clase .primary dentro de tu hoja de estilos y listo! todos los elementos html con este color primary cambiarán! ASÍ DE FÁCIL!

Aquí te comparto algunas formas de añadir botones a tu programa usando bootstrap.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">

De los anteriores, los que más uso es el enlace “a” y button. Ambos son excelentes pero el enlace, como tal es una clase que modifica un texto normal y crea un contorno para hacerlo ver como botón. Incluso con superposición (cuando pasas el cursor encima cambia de color). Es muy muy completo.

Margen y relleno: margin – padding

Margin padding bootstrap

Por último y siendo uno de los temas más importantes (por que lo usarás básicamente en todos los elementos html) es margen y relleno. Haz click aquí para ver más información sobre el espaciado en bootstrap.

Ahora los aspectos realmente importantes es que como todas las clases de bootstrap, funcionan únicamente añadiendo las letras o palabras dentro de la clase del elemento html. Para padding usamos “p”, para margin usamos “m”. Así de sencillo, pero ¿hacia donde?

Cada una de estas tiene diferentes direcciones: arriba, abajo, derecha, izquierda. Usamos “t” para top y “b” para bottom. Añadimos pegado a la letra principal y luego, con un guión indicamos cuándo de esta caraterística queremos añadir: 1, 2, 3, 4, 5. Cada uno de estos números ya cuenta con un espaciado predefinido por clases por en deolo basta con coloarlo y probar cuál de estos sirve en tu caso.

<!-- añade un margen superior de 5 espacios bootstrap -->
<div class="container mt-5"></div>

<!-- añade un padding en izquierda y derecha de 3 espacios bootstrap -->
<div class="container px-3"></div>

Con el uso constante de irás acostumbrando a usarlos no solamente en los contenedores, sino en cualquier elemento html: h1, h2, p, a, select y más. Todos cuentan con una clase personalizada la cual, solo añadiendo las letras de espaciado reaccionarán sin problema!

Video de ayuda

Hice este video para ayudarte en el proceso. Si te gusta, no olvides dar like y suscríbete para más contenido. Ya estamos cerca a los 1000 subs!!!

Bootstrap

Producto sugerido

Comparto algunos de los productos que uso en mi set-up de desarrollador y este es uno de esos. Mi ratón ahora mismo y funciona perfecto para macbook pro m1. Si quieres ver la reseña completa haz click aquí para ver el post con video!

SSL – 39 valoraciones

Logitech Signature M650 – Ratón inalámbrico

  • Desplázate más inteligente: con el mouse inalámbrico Logitech Signature M650 obtienes precisión línea por línea para documentos y desplazamiento súper rápido para páginas web largas; simplemente cambia los modos con un movimiento de la SmartWheel
  • Ajuste óptimo para tu mano: este cómodo ratón está diseñado para manos pequeñas y medianas, para un ajuste óptimo
  • Mejora tu comodidad: este mouse de trabajo proporciona largas horas de comodidad gracias a una forma contorneada, zona de pulgar suave y agarres laterales de goma que mantienen tu mano cómoda y en su lugar
  • Conecta la forma que quieras: conecta este mouse inalámbrico para computadora en un instante a través del receptor USB Bluetooth de baja energía o Logi Bolt
  • Menos ruido, más enfoque: ya sea trabajando en la oficina o en casa, Logitech Signature M650 es un mouse silencioso, lo que te permite disfrutar del 90% menos de ruido de clic con la tecnología SilentTouch*

VER EN AMAZON

Conclusión

Bootstrap nos presenta cientos o miles de opciones para personalizar nuestro sitio web y no solamente en estilo si no en una aplicación web más correcta, efectiva y eficaz. Es importante aprender a usar para que, con el avance de las actualizaciones, podramos usar más y mejores elementos para nuestros sitios!

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuar!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

Resumen
Qué es Bootstrap | Cómo funciona | Formularios | Botones 🚀
Nombre del artículo
Qué es Bootstrap | Cómo funciona | Formularios | Botones 🚀
Descripción
Si estás buscando cómo mejorar el diseño de tu web de una forma más rápida y eficiente, debes usar Bootstrap. Haz click aquí para ver ✅
Autor
Publisher Name
Eduardo Arias
Publisher Logo

Deja un comentario

Carrito de compra