¿Qué es Bootstrap?

Bootstrap es lo que se conoce como un framework o librería del lenguaje de estilos CSS. Para entender lo que es un framework, tenemos que tener en cuenta una serie de cosas. En primer lugar, hay que dejar claro que al ser una librería de CSS, significa que está escrito en CSS, por lo que todo lo que nos da Bootstrap, se puede hacer utilizando CSS básico.

De este modo, podemos decir que Bootstrap es perfectamente sustituible, pero aun así, tiene una serie de ventajas que lo han convertido en uno de los frameworks más populares de CSS.

En primer lugar, por cómo está diseñado, hace que sea bastante fácil de utilizar, incluso sin tener un amplio conocimiento de CSS. Al fin y al cabo, con Bootstrap podemos crear páginas web que se adapten completamente a cualquier tipo de pantalla y que estén adaptadas a los estándares estéticos de las páginas web de hoy en día.

Esto hace que en algunos casos en los que no se quiera emplear mucho tiempo en la maquetación de una página web, se utilice Bootstrap para conseguir una página vistosa y creada en muy poco tiempo.

¿Cómo usar Bootstrap?

Para usar Bootstrap, en primer lugar tendremos que importar el contenido de la biblioteca en nuestra página web. Para ello, podemos hacerlo de dos formas, o utilizando el link al servidor de la página de Bootstrap o directamente descargando el contenido de Bootstrap en nuestro ordenador. Ambas opciones tienen sus ventajas e inconvenientes.

Si utilizamos el link que nos proporciona Bootstrap para acceder a su biblioteca, no hace falta que descarguemos nada en nuestro ordenador y además, podremos obtener la última versión del framework simplemente añadiendo un nuevo link. De este modo, no tenemos que preocuparnos de si la versión que descargamos fue la última o no, ya que con cambiar el link que estamos utilizando, podremos obtener las últimas mejoras del framework. Dicho esto, el hecho de no haber descargado el framework en nuestro ordenador, hará que no podamos ver el código de Bootstrap, por lo que no sabremos exactamente cómo afecta su código en los elementos de nuestra página.

Por otro lado, si descargamos toda la librería, tendremos la ventaja de que podremos ver el código de Bootstrap y además, podremos cambiarlo en caso de que haya algo que no nos convenza del todo. Además, podremos descargarnos solo las partes que necesitemos, por lo que no es necesario que descarguemos la biblioteca entera.

Por otro lado, en caso de que salga alguna nueva versión, tendremos que estar atentos para descargar el nuevo contenido, ya que si no, no podremos disponer de él en nuestra página web.

¿Cómo funciona Bootstrap?

Podríamos decir que Bootstrap nos proporciona principalmente, dos cosas. En primer lugar, tendríamos el grid system, para conseguir que nuestras páginas se adapten automáticamente a cada tipo de pantalla. Y por otro lado, los componentes de Bootstrap, que son una serie de clases de CSS que podremos utilizar en nuestros elementos html para que automáticamente se implanten los estilos de Bootstrap.

En cuanto al grid system, podemos decir que Bootstrap divide cada pantalla de forma horizontal en 12 columnas. Esto es muy importante porque dependiendo de la cantidad de columnas que asignemos a cada elemento, éste se verá más grande o más pequeño en la pantalla.

Si por ejemplo, creamos una fila y dentro de esa fila le asignamos 6 columnas a un elemento y 6 columnas a otro, tendremos que ambos elementos ocupan exactamente el mismo espacio en pantalla. Si metemos tres elementos y a cada uno le asignamos 4 columnas, cada elemento tendrá el mismo espacio, pero la pantalla estará dividida en 3 espacios. En caso de que no indiquemos cuántos espacios queremos para cada elemento, Bootstrap automáticamente dejará un espacio equitativo para todos los elementos que tengamos en la pantalla, por lo que todos tendrán el mismo espacio.

Para ello, Bootstrap nos ofrece una serie de clases que podemos usar en nuestros elementos html que sean contenedores y que así el resto de elementos se coloquen automáticamente. Además, estas clases incluyen media queries, por lo que si se usa una pantalla de móvil o de ordenador, nuestra aplicación se adaptará automáticamente al tipo de pantalla.

Además del grid system, tenemos los componentes de Bootstrap. Como hemos mencionado anteriormente, estos componentes son una serie de clases de CSS que llevan unos estilos predefinidos. Estos estilos, se han diseñado para que los elementos cumplan con los estándares estéticos de las páginas web de hoy en día, por lo que siempre que usemos las clases de Bootstrap para nuestros elementos, siempre se verán bien en pantalla.

Conclusión

Dicho esto, podemos concluir con que Bootstrap es una herramienta bastante útil que nos va a permitir crear la vista de una página web de una forma sencilla y rápida. Además, la página estará adaptada a todos los dispositivos, por lo que nos ahorrará todo el trabajo de hacer las media queries por nuestra cuenta.

Cabe destacar que aun así, como todas las bibliotecas de estilos, Bootstrap también tiene sus inconvenientes. En primer lugar, todas las páginas que hagamos con Bootstrap var a quedar bastante parecidas, ya que las formas y los colores se repiten en muchas ocasiones. Además, si queremos usar Bootstrap, es bastante fácil, pero si queremos cambiar alguna cosa de Bootstrap, es bastante más complicado.

Aun así, en la mayoría de los casos, con Bootstrap podremos ser mucho más eficientes y si sabemos utilizarlo, es una herramienta que va a conseguir que la maquetación de nuestras páginas sea mucho más sencilla.