+321 123 4567
info@test.com
My Account
  • La escuela
    • Codespacer
    • Partners
    • Eventos
  • Nuestros cursos
  • Si eres empresa
  • Blog
  • <Contacto/>
CAMPUS VIRTUAL
  • La escuela
    • Nosotros
    • Alumni
    • Partners
  • Nuestros cursos
  • Si eres empresa
  • Blog
  • <Contacto/>
  • Mi cuenta

¿Qué es Bootstrap? Aprende Bootstrap con esta guía completa

Publicado 13/10/2021
qué es Bootstrap

Si quieres aprender a programar te va a ser de muy buena ayuda saber qué es Bootstrap. Esto es un framework para desarrollar sitios web responsive y aplicaciones web.

En este artículo vamos a explicarte para qué se usa, cómo configurarlo, las ventajas de este framework y mucho más. ¡No te lo pierdas que empezamos!

¿Qué es Bootstrap?

Bootstrap es un framework CSS que se utiliza en el frontend para desarrollar aplicaciones que se adapta a todos los dispositivos, ya sea móvil, PC o tablet.

Fue desarrollado por Twitter para unificar todas las herramientas internas de su compañía, llamado Twitter Blueprint. Tras varias actualizaciones, este framework se liberó como un proyecto de código abierto y, es aquí cuando cambió su nombre al actual.

Bootstrap combina JavaScript y CSS para aumentar el estilo de una página hecha en HTML y puede hacer mucho más que cambiar colores.

Esta herramienta ofrece gran variedad de recursos para configurar los estilos de una página web de forma simple y eficiente. Además, están diseñadas para funcionar en cualquier tipo de dispositivo de una forma organizada.

Para qué se usa Bootstrap

Ya sabemos bootstrap qué es, ahora vamos a explicar para qué se utiliza:

Diseño adaptado a todos los dispositivos

El diseño responsive es una característica fundamental para que Google tenga en cuenta en su buscador una página web. Para ello, Bootstrap funciona con el elemento “div” y la utilización del class container.

El elemento “div” sirve para crear tablas y estructurar una página, haciendo un diseño web responsive. Sin embargo, existen limitaciones para establecer el tamaño de las columnas, por lo que no se pudo utilizar para dispositivos pequeños.

Para solucionar esto, Bootstrap asigna una característica de class container al elemento “div” para que establezca las dimensiones determinadas de los elementos que se inserte en ese espacio.

Bootstrap funciona con 3 tipos de containers:

  • Container: conjunto de una propiedad de ancho máximo, que establece el tamaño de la pantalla idea para elaborar el diseño web.
  • Container-fluid: el tamaño total de la pantalla del dispositivo para determinar el diseño. Esto es el ancho 100% en todos los límites de la pantalla.
  • Container-{breakpoint}: considera el ancho 100% hasta alcanzar un determinado tamaño.

Biblioteca de componentes

Otra característica de Bootstrap es la cantidad de componentes que se pueden utilizar para facilitar una mejor interacción y comunicación con el usuario, como carruseles, barras de navegación, etc.

Bootstrap funciones

Este framework está compuesto por un conjunto de archivos CSS y JavaScript que se encarga de atribuir unas características determinadas a los elementos de una página.

Encontramos un archivo principal que se llama bootstrap.css y contiene una definición para cada uno de los elementos que se utilizan. Está compuesto por dos directorios:

  • CSS: tiene todos los archivos que se necesitan para estilizar los elementos.
  • JS: es el que se encarga de ejecutar el estilo en las aplicaciones que necesitan una manipulación interactiva.

Para atribuir una característica a un elemento, tenemos que informar a la clase en la propiedad “class” del elemento que será estilizado.

Cómo descargar Bootstrap

Para saber cómo instalar bootstrap, hay varias maneras. Las formas que más se utilizan son utilizando su CDN o descargando el código en local. También hay otras formas que las puedes ver en la página web de Bootstrap.

Utilizando CDN

En esta forma de configurar Bootstrap tenemos que tener en cuenta que hay que estar conectado siempre a Internet. Para ello, tenemos que añadir a la etiqueta link el enlace al archivo bootstrap.min.css en el head:

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” integrity=”sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” crossorigin=”anonymous”>

Y agregar a las etiquetas script los enlaces a los archivos javascript al finalizar el body:

<script src=“https://code.jquery.com/jquery-3.4.1.slim.min.js” integrity=“sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n” crossorigin=“anonymous“></script> <script src=“https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=“sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=“anonymous“></script> <script src=“https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js“ integrity=“sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6” crossorigin=“anonymous“></script> 

Descargando el código

En este método, al contrario que en el caso anterior, no hace falta internet para poder usar este framework. Para la instalación de Bootstrap en la página web, tienes que seguir los siguientes pasos.

  1. Vamos a la documentación de la página web de Bootstrap y nos descargamos el CSS y JS compilado.
  2. Además, nos tenemos que descargar Jquery, desde su página oficial, y seleccionamos la opción comprimida.
  3. A continuación, nos descargamos Popper. Esto es una librería de JavaScript.
  4. Por último, incluimos todos los archivos en el código HTML.

Ventajas de usar Bootstrap

Ya hemos visto Bootstrap qué es y para qué sirve. Ahora tenemos que hablar de las ventajas que tiene utilizar ese framework para los desarrolladores.

1. Imágenes responsive

Gracias al código de Bootstrap, redimensiona de forma automática las imágenes en función del tamaño de la pantalla. Solamente tienes que agregar la clase .img-responsive a tus imágenes y listo.

2. Componentes

Este framework cuenta con un montón de componentes que puedes añadir fácilmente a tu página web. Además, cualquier elemento que añadas se hará responsive en cualquier dispositivo.

3. Gran Comunidad

Al ser un framework de código abierto, Bootstrap tiene una comunidad muy activa. Esta comunidad es muy interesante ya que contribuyen a actualizar sus versiones, mantener al día su documentación y, además, tiene un blog con noticias y consejo sobre esta herramienta.

4. Customización

Con Bootstrap puedes personalizar la funcionalidad que quieres añadir en tu descarga, para evitar que tu web pese demasiado. Para hacer esto tan solo tienes que ir a la página de personalización y descarga e indicar las funciones que no necesitar. Con esto reducirás el peso de tu archivo y obtendrás una mayor velocidad de carga web.

Si quieres saber más sobre bootstrap y dedicarte al desarrollo web, en CODE SPACE tenemos el Bootcamp Full Stack Web Development donde te prepararemos trabajar de ello.

¡Nos vemos en el siguiente artículo!

Entrada anterior
Alliantum, empresa partner de CODE SPACE
Entrada siguiente
Ejercicio IMINT de Enrique Lauroba

Entradas recientes

  • Qué es un data scientist y sus funciones
  • JavaScript vs. TypeScript – principales diferencias
  • Ventajas y desventajas en una base de datos relacional

Categorías

  • Blockchain (2)
  • BlueTeam (2)
  • Ciberseguridad (20)
  • Data Science (1)
  • Inteligencia Artificial (2)
  • IoT (2)
  • Programación (22)
  • Realidad Virtual (1)
  • Videojuegos (8)

¿Dónde estamos?
C/ Compositor Lehmberg Ruiz, 13
29007 Málaga

952 300 426

682 82 70 17

logo-code-space-blanco

© Codespace | Todos los derechos reservados

Facebook
Instagram
Twitter
LinkedIn
YouTube
Telegram
Meetup

¿Quieres estar al día de nuestras frikadas?

Suscríbete y se uno de los nuestr@s !!!

Aviso Legal | Política de cookies | Política de privacidad | Condiciones Contratación | Tablón de anuncios | | Condiciones de pago con Sequra |

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarte publicidad relacionada con tus preferencias mediante el análisis de tus hábitos de navegación.. Configuración CookiesAceptar
Política de Privacidad y Cookies

Resumen de Privacidad

Utilizamos cookies para que podamos ofrecerle la mejor experiencia de usuario posible.
La información de las cookies se almacena en su navegador y realiza funciones tales como reconocerlo cuando regresa a nuestro sitio web y ayudar a nuestro equipo a comprender qué secciones del sitio web le resultan más interesantes y útiles. Estas cookies se guardarán en tu navegador solo con tu consentimiento. Tienes la opción de configurar y rechazar estas cookies, aunque puede afectar a algunas funciones de navegación.
Necessary
Siempre activado
Las cookies principales son necesarias para el correcto funcionamiento de la web. Esta categoría únicamente incluye cookies que garantizan las funciones básicas y la seguridad del sitio y no almacenan ninguna información personal.
Non-necessary
Cualquier cookie que puede no ser imprescindible para el funcionamiento de la web. Se utilizan para recopilar datos personales del usuario a través de anuncios y otros contenidos incrustados. Son cookies denominadas no necesarias y para las que se requiere el consentimiento expreso del usuario antes de ejecutarlas.
GUARDAR Y ACEPTAR