Si nunca has oído hablar de Bootstrap, un marco desarrollado por Twitter para crear sitios web hermosos, ¡te lo estás perdiendo! Bootstrap hace que sea bastante rápido y fácil diseñar un sitio web sin mucho conocimiento en CSS (hojas de estilo en cascada). Si eres nuevo en la programación para la web, no necesitas saber nada sobre CSS para comenzar a aprender cómo funciona Bootstrap; todo lo que necesita es un solo documento HTML. Vamos a echar un vistazo a Bootstrap, mostrándole de qué se trata, cómo funciona y si es una buena opción para cada sitio web que construya.
Insertar la API Bootstrap en su archivo HTML
Tiene algunas opciones para insertar Bootstrap en su archivo de proyecto principal. La primera opción es insertar todos los archivos Bootstrap necesarios en su proyecto. Puede hacerlo descargando el paquete y cargándolo en la carpeta de su proyecto. Por supuesto, tendrá que vincular el archivo CSS Bootstrap primario a su documento. El sitio web oficial de Bootstrap tiene una guía paso a paso sobre cómo hacer esto.
La otra opción es omitir la descarga del paquete y usar una red de entrega de contenido (CDN). Un CDN le permite vincular los archivos Bootstrap principales a su documento HTML sin descargarlo nunca. Esto, por supuesto, no siempre es algo bueno para los sitios web profesionales, ya que no sería demasiado rápido dejar mi página de negocios o cartera al destino si ese servidor fuera a caer. Es mejor tener los archivos en su proyecto, pero con el propósito de aprender, el CDN funcionará bien.
Para insertar Bootstrap en su documento HTML, solo tendrá que poner el siguiente código dentro del
etiqueta en tu documento HTML:Una vez que esos enlaces se insertan en esa etiqueta de encabezado, debe estar listo para comenzar a usar las clases Bootstrap. Su documento debería verse así:
Bootstrap y clases
Los elementos de Bootstrap se dividen en clases, que son solo un montón de CSS pre-escritos que puede insertar en su marcado. Insertar clases en su marcado es fácil, solo necesita saber el nombre de la clase que desea usar y luego aplicarlo a uno de sus elementos HTML usando el valor class = ”classname”, como se discutió en un artículo anterior.
La parte difícil es descubrir cómo funciona todo eso para crear algo hermoso. Puede consultar todas las diferentes clases disponibles en Bootstrap directamente desde la documentación oficial. Ahora, dominar Bootstrap es otra historia. Eso no es algo que nosotros o cualquier otra persona podamos enseñarte. Puedes ver un tutorial tras otro, pero para ser bueno en el uso del marco, eso viene con muchas pruebas y errores. Y eso requiere que lo practiques en tus propios proyectos.
Con eso en mente, le imploro que comience su propio proyecto HTML en su computadora usando Atom u otro editor de texto, revise de qué se tratan las clases HTML y CSS, y luego comience a jugar con Bootstrap. Y si conoce suficiente marcado, tal vez incluso cree su propio sitio web de cartera como ejercicio de prueba.
¿Bootstrap es una opción viable para cada sitio web?
Bootstrap es un gran marco, pero ¿es una opción viable para cada sitio web que cree? Realmente depende del desarrollador, así como de los requisitos del proyecto. En muchos entornos profesionales, realmente no podrá elegir qué tecnologías está utilizando, ya que eso dependerá en gran medida del Project Manager. Si dicho gerente de proyecto elige usar Bootstrap, también lo combinará con una tonelada de CSS personalizado. Esto es lo que generalmente hace que su sitio web sea único y diferente de otros sitios web que usan Bootstrap.
Yo, personalmente, no veo Bootstrap como una gran opción para cada sitio web. Claro, puede ayudar y proporcionar algunos atajos, pero finalmente descubrí que diseñar desde cero con CSS es la mejor ruta en gran parte debido al control que tienes sobre él. Pero una vez más, si recién estás comenzando en la programación web, no es malo usar Bootstrap, pero no confíes en él para tu carrera.
Vale la pena señalar que si eres un desarrollador principiante, no deberías usar Bootstrap para todos los proyectos en tu cartera. Puede parecer que puede ser competente con la API, pero no conoce completamente el CSS. Dicho esto, es bueno tener una mezcla decente de ambos en su cartera (o incluso exclusivamente CSS, ya que es fácil recoger Bootstrap).
Clausura
Eso es todo lo que Bootstrap es en pocas palabras. Como mencioné anteriormente, le animo a que comience su propio proyecto HTML y agregue algunas de las diferentes clases a los elementos para comenzar a jugar con el marco. Puede encontrar todos los diferentes componentes que Bootstrap ofrece con explicaciones y ejemplos de código aquí.
Bootstrap es realmente una buena herramienta, ¡pero recuerda no confiar solo en ella! Es bueno estar familiarizado con él y conocer el marco, pero también asegúrese de sumergirse en CSS para comprender realmente lo que está sucediendo detrás de escena. No solo eso, sino que un conocimiento firme en CSS complementa mucho a Bootstrap, permitiéndole crear sitios web únicos y hermosos con su propia personalización.
