TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Introducción a Bootstrap

3

Hace una década, tener un sitio web era un sueño y solo era posible para los fanáticos de la tecnología. Hoy en día, todo hombre común puede iniciar un sitio o blog gracias a la popularidad de las herramientas gratuitas de creación de sitios y los marcos de interfaz de usuario. Dado que la industria de la construcción de sitios es de naturaleza muy competitiva, cada empresa debe centrarse en ofrecer lo mejor que las demás para atraer a los usuarios finales. Bootstrap es uno de los frameworks más populares y le explicaremos cómo puede comenzar a aprender Bootstrap para construir sus sitios web.

Hay tres tipos de herramientas para que los usuarios y desarrolladores comiencen con su sitio web:

  • Sistemas de gestión de contenido de código abierto autohospedados como WordPress.org, Drupal y Joomla.
  • Plataformas alojadas gratuitas como WordPress.com, Weebly y Wix.
  • Marcos de interfaz de usuario (UI) independientes como Bootstrap y Google Material Design.

El alcance de las plataformas autohospedadas es amplio y no es adecuado para la mayoría de los usuarios finales que no tienen tiempo para invertir. Las plataformas alojadas gratuitas son fáciles de usar pero tienen grandes dependencias que restringirán sus capacidades solo a esa plataforma. La última opción es tener una combinación de autohospedaje, desarrollo y la libertad de reutilizar bloques de elementos frontend. En este artículo, exploremos más sobre cómo comenzar con el marco frontend de Bootstrap.

Introducción a Bootstrap

Aprender Bootstrap

¿Qué es Bootstrap?

Bootstrap es uno de los marcos de interfaz de usuario más populares disponibles en este momento. Este es un marco de interfaz creado con HTML, CSS y JavaScript sin la participación de scripts del lado del servidor como PHP. Inicialmente fue desarrollado por Twitter con el nombre "Twitter Blueprint" para mejorar la visibilidad constante en múltiples dispositivos y herramientas. Más tarde, se le cambió el nombre a Bootstrap y se lanzó como un proyecto de código abierto durante agosto de 2011.

Bootstrap es uno de los proyectos populares disponibles en GitHub con más de 100k estrellas. La información más reciente sobre las versiones y actualizaciones de Bootstrap está disponible en el sitio web oficial getbootstrap.com. La popularidad de Bootstrap aumenta a lo largo del tiempo con el primer enfoque móvil y la fácil conversión de temas de Bootstrap a temas populares de administración de contenido como WordPress. También hay creadores de sitios Bootstrap populares como Mobirise para poner en marcha su sitio web sin habilidades de codificación.

Versiones de Bootstrap

La siguiente tabla muestra la actualización de la versión de Bootstrap, está en V4 alpha 6 cuando se escribió este artículo.

Versión Fecha Cambios principales
Versión 1 19 de agosto de 2011 Fuente abierta
Versión 2 31 de enero de 2012 Actualización importante con diseño de cuadrícula de 12 columnas y glifos.
Versión 3 19 de agosto de 2013 Diseño plano y primer enfoque móvil.
Versión 4 19 de agosto de 2015 Actualización importante en las clases de CSS, uso de Sass y eliminación de Glyphicons, se eliminó tether.js y se agregó popper.js.
Versión 5 05 mayo 2021 Libre de jQuery, iconos Bootstrap, nuevo logo y soporte RTL.

Uso general

En este momento, la versión estable es Bootstrap 5.01 y tienes que migrar a la última versión si estás usando versiones anteriores 3 o 4. Así que si estás desarrollando un sitio para ser publicado pronto, idealmente deberías usar la versión 5.01 que es estable. Los usuarios finales pueden descargar directamente los archivos CSS / JS precompilados y utilizarlos en su sitio. Descargue la versión 3.4.1 aquí, V4.6 aquí y V5.01 aquí. Si está desarrollando proyectos para clientes o para usted mismo, puede descargar el código fuente completo con archivos Sass de GitHub.

Nota: Instalar Bootstrap en su PC con Windows o macOS es una tarea complicada ya que tiene muchas dependencias. En resumen, debe tener Node.js y NPM instalados en su computadora junto con Grunt para la compilación. Además, puede utilizar Harp.js para generar archivos de sitios estáticos utilizando parciales o inclusiones.

Licencia

Los archivos de Bootstrap se distribuyen bajo licencia MIT con un solo requisito, ya que la información de copyright debe conservarse en todos los archivos fuente de Bootstrap.

Mantenga la licencia y el aviso de derechos de autor incluidos en los archivos CSS y JavaScript de Bootstrap cuando los use en sus trabajos.

Puede ver la licencia completa en GitHub.

Inicio de su sitio

Tiene dos formas de comenzar a construir su sitio con Bootstrap. Una es descargar y alojar archivos CSS y JS en su servidor de alojamiento y la otra es utilizar enlaces CDN. Recomendamos crear una plantilla de inicio y luego comenzar a usar todos los componentes de Bootstrap dentro de una plantilla de inicio. Puede obtener más detalles en la sección de plantillas de inicio de Bootstrap 5.

A continuación se muestran los enlaces CDN para usar en su sitio:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Asegúrese de usar Popper y luego el archivo JS Bootstrap en secuencia; de lo contrario, puede usar un solo archivo de script empaquetado que incluya el script Popper. De manera similar, agregue cualquier hoja de estilo CSS personalizada después de Bootstrap CSS, para que no tenga prioridad sobre las definiciones del marco. Bootstrap 5 usa border-box para la propiedad de tamaño de caja que puede afectar los diseños. Puede cambiar esto a content-box si es necesario solo para los elementos particulares declarando CSS en línea.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More