¿Qué es, cómo lo instalo en su sitio web y cómo lo uso?

Hoy te traigo Se actualizó el antiguo artículo de Alvaro Fontela sobre Bootstrap.Es el momento de actualizarlo y aprovechar esta oportunidad para incorporar las dudas que nos han transmitido los lectores del blog de Raiola. ¡Ir!

Como saben, el mundo de Internet está cambiando gradualmente. Las necesidades de los usuarios continúan creciendo y cada vez hay más dispositivos conectados a la red. Por lo tanto, los sitios web de todo el mundo deben adaptarse y evolucionar.

En 2011, Mark Otto y Jacob Thornton de Twitter desarrollaron un conjunto de herramientas de soluciones internas para su propia empresa: Blueprint. Con el tiempo, Blueprint se publicó en GitHub como un proyecto de código abierto y evolucionó a Bootstrap como lo conocemos hoy.

Bootstrap te permite diseñar tu sitio web y adaptarlo a las necesidades actuales de tus usuarios.... Esta es una herramienta que todo desarrollador web debería conocer. En este artículo te lo explicaré ¿Qué es Bootstrap, cuál es su última versión y cuáles son los beneficios?

📑 Aquí podrás encontrar 👇

¿Qué es un gestor de arranque?

Bootstrap es un conjunto de herramientas de código abierto para el desarrollo web receptivo con HTML, CSS y JavaScript. Esto le permite diseñar su sitio web con sus bibliotecas CSS y JavaScript. Contiene diferentes componentes: modales, menús, campos, botones, formularios ... eso significa que hay que posicionar los elementos de la página.

Elemento de guía

Bootstrap es una gran herramienta para crear interfaces de usuario limpias que son aplicables a todo tipo de dispositivos y pantallas independientemente de su tamaño. A partir de Bootstrap 3, el marco es más compatible con el desarrollo web receptivo. Álvaro te lo contó allá por 2015, pero tengámoslo en cuenta. Bootstrap 3 es una gran actualización, si no me crees, mira las novedades de esta versión:

  • Soporte muy bueno (casi completo) HTML5 y CSS3Esto permite un desarrollo web muy flexible y ofrece excelentes resultados.
  • Amable Sistema GRID que permite un diseño de cuadrícula de 12 columnas. El lugar donde se debe grabar el contenido. De esa manera, podemos desarrollar la capacidad de respuesta de manera más fácil e intuitiva.
  • Bootstrap 3 ajusta las consultas de medios para 4 tamaños de dispositivos diferentes, Depende del tamaño de la pantalla. Estas consultas de medios simplifican el desarrollo para dispositivos móviles y tabletas.
  • Bootstrap 3 también le permite insertar imágenes receptivas.Eso significa que simplemente inserte imágenes con la categoría de respuesta de img y estas imágenes se ajustarán en consecuencia.

Por supuesto, todas estas son grandes ventajas. Ha seguido evolucionando desde entonces y hasta el día de hoy. En poco más de un año, especialmente el 18 de enero de 2018, podrás disfrutar de la nueva versión: Bootstrap 4. ¿Sabes? Vayamos con ella.

Banner horizontal de WordPress para miembros premium

Bootstrap 4: todas las novedades

Como dijo uno de los desarrolladores, esta es una de las mayores actualizaciones del marco. Como novedad en Bootstrap 4, encontrará nuevas funciones y componentes obsoletos.

A continuación, te cuento los principales cambios de esta versión. De todos modos, puedes verlos en Bootstrap GitHub:

  • Icono de glifo eliminado: En Bootstrap 3, la biblioteca Glyphicons estaba "desacoplada" del proyecto, aunque todavía se puede usar. Si está utilizando Bootstrap 4, el icono desaparecerá por completo. Si visita el sitio web oficial del framework, encontrará que la documentación de Glyphicons ya no existe. Su recomendación (y la recomiendo personalmente) es utilizar bibliotecas de iconos que implementen SVG como Iconic y Octicons. Alternativamente, puede utilizar la famosa biblioteca de iconos de Font Awesome.
  • Cambios en el preprocesador de CSS: Bootstrap 4 dejó de usar Less para usar Sass.
  • Vulnerabilidades XSS solucionadas: Debido a esto, siempre es importante mantener su biblioteca actualizada, ya sea bootstrap o lo que sea.
  • Nuevos componentes: Se han agregado componentes adicionales desde Bootstrap 4.2.0. ¡Sí, aún más! Elementos mejorados que ya están en la biblioteca.
  • Caja flexible estándar: Este es un gran beneficio. Flexbox es una característica CSS muy poderosa que le facilita la creación de hermosos diseños.
  • Bem: Bootstrap ahora usa esta unidad relativa en lugar de píxeles. Esto facilita la escalabilidad de fuentes al adaptar los diseños a diferentes dispositivos.

Conclusión: ¿es fácil de aprender? Sí señor. Pero, por supuesto, debe tener un conocimiento mínimo de la red. Como mínimo, debería estar familiarizado con HTML y algo de CSS.

¿Bootstrap 4 es compatible con todos los navegadores?

Bootstrap es compatible con la mayoría de los navegadores del mercado. Permítanme resumir brevemente:

  • Google Chrome (en todas las plataformas)
  • Mozilla Firefox (en todas las plataformas)
  • Internet Explorer (Windows)
  • Microsoft Edge (Windows Mobile, Android, iOS, Windows 10)
  • Safari (Mac, iOS)
  • Opera (Mac, Windows)

Compatibilidad de descarga

Ejemplo de cargador

Con Bootstrap, no hay restricciones en el diseño que propongas. Todo depende de tu imaginación y originalidad. A medida que aprenda a utilizar este marco, puede hacer lo siguiente:

Cargador web

¿Qué opinas de estos ejemplos de bootstrap? Como puede ver, puede crear fácilmente cosas asombrosas. ¿Quieres hacer algo como esto? ¡Sigue leyendo!

Cómo descargar e instalar Bootstrap

Si está utilizando Bootstrap para crear un sitio web, el primer paso es instalar el marco. Si aún no tiene el espacio para alojar su sitio web, le recomiendo que consulte nuestro plan de alojamiento compartido y ofrezca una prueba gratuita de un mes.

Como expliqué anteriormente, Bootstrap es un conjunto de herramientas para diseñar fácilmente sitios web receptivos. Consta de varios archivos CSS y JavaScript. Esto le dará una estructura básica para construir su sitio web. Descargue estos archivos de arranque e inclúyalos en su proyecto.

Hay varias formas de comenzar con Bootstrap. Te explicaré cada uno de ellos:

Cómo descargar CSS y JSS compilados y minificados

Si tu quieres tu puedes Descarga los archivos base y colócalos en tu propio proyecto.

Lo primero que tienes que hacer es Visite el sitio web oficial de Bootstrap... Una vez en, Haga clic en el botón de descarga... en la siguiente pantalla En CSS y JS compilados, haga clic en el botón Descargar.

Cómo descargar el gestor de arranque

Descarga un archivo ZIP que contiene todos los archivos de arranque. Abrir la cremallera Verá que hay dos carpetas dentro, una llamada "js" para archivos JavaScript y la otra llamada "CSS" para archivos CSS.

Cargador de CSS

En este artículo, le presentaré la versión 4.5.2 de Bootstrap. Algunas cosas pueden cambiar en la nueva versión del marco.

Como se puede ver, También tienen una versión ".min" diferente para cada archivo. De hecho, esta es una versión más pequeña, tan liviana, en mi opinión están en condiciones normales. Necesita agregar estos archivos a su proyecto. El hecho más simple optimizará el tiempo de carga de su sitio web.

También verá que cada archivo tiene una versión ".map". Si hacemos el Usando el preprocesador de código, el archivo .map se usa para concatenar el archivo original con su archivo minimizado. Ejemplo: LESS o SASS.

En la carpeta js verá dos opciones: bootstrap.js y bootstrap.bundle.js. La diferencia es que bootstrap.bundle.js ya contiene el script popper.js, pero Bootstrap.js no, debe activarlo manualmente.

Si no lo sabes popper.js es un script que usa bootstrap para ciertos elementos, Por ejemplo, ventanas emergentes, información sobre herramientas, etc.

Los archivos bootstrap.js y bootstrap.bundle.js no contienen jQuery, por lo que debe incluirlo.

En la carpeta CSS encontrará el archivo bootstrap.css, que contiene todas las estructuras y componentes del marco. Alternativamente, también puede usar los archivos bootstrap.reboot.css y bootstrap.grid.css.

  • documento Reiniciar Solo contiene CSS que "vuelca" los estilos de navegador predefinidos. Este restablecimiento se realiza para garantizar la mejor compatibilidad con todos estos dispositivos.
  • documento la red Simplemente le brinda el sistema de cuadrícula (filas y columnas famosas) en el que se basa Bootstrap.

Bootstrap Estos dos archivos se le proporcionan por separado en caso de que solo desee utilizar las funciones de uno de ellos. De esta manera, no carga todos los componentes de Bootstrap que no desea cargar en su proyecto.

Ahora que sabe lo que se está cargando, debe saber cómo incluirlo en su proyecto.

Primero, debe incluir el archivo bootstrap.min.css en la etiquetaUtilice este código:

Luego, debe incluir archivos Javascript jQuery, Popper y Bootstrap en ese orden. Debes colocarlos frente a la etiqueta. Utilice este código:

Para que pueda ver un ejemplo con código completo, se ve así:

Como puede ver, se requiere Bootstrap HTML 5 'doctype':

Dado que es "móvil primero", las siguientes metaetiquetas también deben incluirse en el título para garantizar la máxima compatibilidad con los dispositivos móviles:

Es importante agregar archivos Javascript en este orden. Primero jQuery, luego popper.js y finalmente Bootstrap. Puede descargar jQuery y popper.js desde su sitio web oficial.

Utilice el enlace CDN proporcionado por Bootstrap

Otra forma de instalar y usar Bootstrap en su sitio web es Utilice el enlace CDN en el sitio web oficial.De esta manera, descarga los archivos del marco sin ponerlos en su servidor.

Puede usarlo en su página de arranque a través de CDN con el siguiente código:

Como puede ver, el código es casi el mismo que cuando se monta el archivo de arranque manualmente. La diferencia es que ahora estamos nombrando estos archivos externamente.

Cuando usa un CDN para descargar Bootstrap, está realizando una solicitud externa a su servidor. Es importante recordar esto porque si haces muchas solicitudes externas al servidor (Bootstrap, Font Awesome, Google Fonts ...) puede afectar la velocidad de carga de tu web.

Utilice un administrador de paquetes

Finalmente, le mostraré cómo instalar Bootstrap a través del administrador de paquetes. Si eres principiante, te recomiendo que sigas las instrucciones de las dos secciones anteriores. Esto es porque tu estas por esto La tarea debe al menos saber cómo usar el terminal o la consola de comandos del sistema operativo.

En otras palabras, como dije, otra forma de instalar Bootstrap en su proyecto es Agréguelo como una dependencia del administrador de paquetesA continuación te mostraré a modo de guía rápida qué sintaxis debes utilizar en cada caso:

-Por encima del nivel del mar

Puede integrar Bootstrap en Node.js con el siguiente comando:

- hilo

También puede usar Yarn para la integración con Node.js:

—— rubí

Si está utilizando Bundler:

Si no está utilizando Bundler:

—— compositor

Si está utilizando PHP, utilice el siguiente comando:

—— NuGet

Si está utilizando .NET, puede instalar el marco utilizando uno de los siguientes comandos:

Para Bootstrap CSS

Para Bootstrap SASS

Instalador de Bootstrap y Joomla

A partir de Joomla 3.0.0, Bootstrap se fusionó En el CMS (sí, en la versión 3). Se espera que la versión 4 de Joomla use Bootstrap 4. Por lo tanto, no lo explicaré en detalle en este artículo.

Definitivamente, Si desea obtener más información sobre este tema, deje un comentario. En este artículo extenderé Bootstrap en Joomla.

Instalar Bootstrap en WordPress (como se usa en mi tema)

Si usa WordPress, también puede aprovechar Bootstrap. Algunos temas ya implementan esto, pero si no es así en su caso, siga leyendo para descubrir cómo habilitarlo.

Si no tiene uno, lo primero que debe hacer es crear un subtema. Entonces hay dos opciones: Descargue los archivos de arranque para incluirlos en su diseño o agréguelos usando el enlace CDN.

Si desea cargarlos, le sugiero que cree dos carpetas en el tema hijo, una llamada "css" y otra llamada "js". Allí descarga los archivos relevantes. Puede cargar archivos a través de FTP o mediante el administrador de archivos en el panel de host.

Próximo paso Edite el archivo functions.php de su tema hijo. Pegue las siguientes líneas de código:

Tenga en cuenta que en el momento de escribir este artículo, la última versión de Bootstrap es 4.5.2. Debe cambiar el código anterior para adaptarlo a la última versión.

Complemento Bootstrap de WordPress

Como mencioné anteriormente, existen Incluye temas que se envían con la biblioteca bootstrap., que tipo Acorde inferiorEstá dentro Esencialmente un "tema de inicio" diseñado para usar Bootstrap para trabajar desde cero en su proyecto. Hay otros temas, por ejemplo Lanzador de WP bootstrapCon lo que también se logró este objetivo.

Si ya está utilizando plantillas de WordPress y necesita incorporar Bootstrap en su proyecto, hay algunas a las que puede consultar Como Bootstrap Shortcodes Ultimate PluginSu objetivo es usar Bootstrap a través de códigos cortos, por lo que viene con su propia biblioteca. Sin embargo, hasta el día de hoy, este no es el caso de la última versión de Bootstrap.

Cargador de código corto

Si usa el nuevo editor de bloques de WordPress Gutenberg, puede instalar el complemento Bloque de arranqueEste plugin te permite usar componentes bootstrap sobre el nuevo bloque de Gutenberg, lo malo es que Solo bloques para contenedores, filas, columnas y botonesDe hecho, advierten en su propia documentación que no incluyen toda la biblioteca de bootstrap, si quieres usarla tienes que incluirla manualmente.

Unidad de refuerzo

Componente de arranque

En Bootstrap, puede usar una gran cantidad de componentes o elementos disponibles como desee. En este artículo, voy a hablar sobre los que creo que son los más importantes para que aprendas a usar la biblioteca. Si desea verlos en detalle, lea la documentación de Bootstrap. ¡Creemos problemas!

Sistema de malla o rejilla

Una de las cosas más interesantes que Bootstrap tiene para ofrecer es el sistema de cuadrícula. Le ayuda a diseñar el diseño o la estructura de las páginas de su sitio web. El sistema responde completamente y se basa en Contenedor, fila y columnaDesde la versión 4, la cuadrícula Bootstrap se ha basado en el modelo Flexbox CSS.

Clases CSS usadas:

  • Envase Para contenedores
  • línea Rangos
  • Coronel Para columnas

¿Pero dónde los usas? En el atributo "clase" de la etiqueta

Código HTML.

Crea una fila en el contenedor y una columna (col) en cada fila.

Los contenedores se utilizan para encerrar y centrar el contenido de forma horizontal. Dependiendo del ancho deseado, puede utilizar diferentes tipos de contenedores:

  • Con clase Envase El ancho máximo es de 1140 píxeles.
  • Con clase Líquido del recipiente Obtienes un ancho de ventana del 100%.
  • para participar en clase Container-sm, container-md, container-lg y container-xl Antes de llegar al punto de interrupción especificado, obtendrá el 100% del ancho de la ventana.

Las filas se crean utilizando clases de fila y se utilizan para agrupar las columnas creadas en ellas. Solo las columnas pueden ser "hijos" directos de una fila.

Las columnas se crean con la clase col, pero se pueden modificar un poco.

Las columnas que crea con la clase col se escalan proporcionalmente al ancho de la fila. En otras palabras, si crea 2 columnas, cada columna ocupa el 50% del ancho de la fila, si crea 4 columnas, cada columna ocupa el 25% del ancho de la fila, y así sucesivamente.

Por ejemplo:

En el ejemplo anterior, se crearon 3 columnas para que cada columna tenga el 33,333% del ancho.

Pero, ¿qué sucede si no desea que todas las columnas tengan el mismo ancho? En este caso, debe especificar el número de columnas, que debe ser de hasta 12 columnas.

Por ejemplo:

En este ejemplo, una columna de clase col-6 ocupa 6 de las 12 columnas posibles o ½. Las columnas de la clase col-3 ocupan 3 de las 12 columnas posibles, es decir, 1/4 de cada columna. Como puede ver, la suma de los valores de la columna es 12 (3 + 6 + 3).

Sistema de celosía de malla o motorizado

Como dije anteriormente, Bootstrap es un sistema receptivo que puede adaptarse a diferentes tamaños de ventanas y dispositivos. Asociado con esto está la siguiente opción para cambiar la columna. Puede usar las clases col-sm- *, col-md- *, col-lg- * y col-xl- * para establecer el ancho de cada columna según el ancho de la ventana del navegador. Esto significa que la estructura de 4 columnas de la versión de escritorio se puede mostrar en una columna de la versión móvil.

Para comprender esto, debe saber que Bootstrap tiene algunos puntos de recorte que dependen del ancho de la ventana del navegador:

cm Ancho mayor o igual a 576 píxeles
Doctor en Ciencias Médicas Ancho mayor o igual a 768 píxeles
LG El ancho es mayor o igual a 992 píxeles.
SG El ancho es mayor o igual a 1200 píxeles.

Dado que Bootstrap es móvil primero, la prioridad es de baja a alta. Es decir, a menos que especifique lo contrario, lo que aplica a la intersección también se aplica a la dimensión mayor. Por ejemplo, si desea que las columnas 'lg' y 'xl' tengan el mismo ancho, solo necesita especificar 'lg'.

Si no se especifica ningún punto de interrupción en la clase CSS, se supone que la aplicación comienza con el tamaño más pequeño.

Utilidad de diseño

Bootstrap te ofrece una serie Clases predefinidas para simplificar determinadas tareas Es muy común en el desarrollo de sitios web. A continuación describiré las más importantes.

Si desea ver todas las utilidades de Bootstrap en detalle, visite: https://getbootstrap.com/docs/4.5/utilities/

Colores en bootstrap

Varias clases le permiten aplicar los colores predefinidos de Bootstrap. Por ejemplo, puede aplicar color al texto agregando la siguiente clase:

  • Basado en texto
  • Escuela de humanidades
  • Texto exitoso
  • Peligro de la palabra
  • Advertencia de texto
  • Mensaje de texto
  • Luz de texto
  • Texto oscuro
  • texto-cuerpo (texto en el color estándar "cuerpo")
  • Texto sin sonido
  • Texto blanco
  • text-black-50 (texto negro con 50% de opacidad)
  • text-white-50 (texto blanco con 50% de opacidad)

También puede aplicar colores de fondo con las siguientes categorías: BG-Primario, BG-Success, BG-Info, BG-Warning, BG-Dangerous, BG-Secondary, BG-Dark y BG-Light.

A continuación, se muestra un ejemplo del uso de colores de fondo y texto:

Colores en el gestor de arranque

Es posible que haya visto que algunas de estas clases tienen sufijos especiales (* -primary, * -warning, * -success, etc.). En algunos componentes, puede utilizar estos sufijos para aplicar colores al componente.

el tamaño

Algunos componentes admiten el uso de sufijos en sus clases para cambiar su tamaño. Por ejemplo, podemos usar las clases btn-lg, btn-md y btn-sm para cambiar el tamaño del botón.

También puede usar las clases w-25, w-50, w-75, w-100 y w-auto para cambiar el ancho de un elemento. Con estos se establece el ancho en 25%, 50%, 75%, 100% o automáticamente. Para cambiar la altura, simplemente cambie de w a h.

Puede usar las clases mw-100 y mh-100 para establecer el ancho o alto máximo al 100%.

Tamaño del cargador

intervalo

Una de mis cosas favoritas de Bootstrap es lo fácil que es aplicar espacios (márgenes y relleno) a cualquier elemento. Para explicar cómo las clases pueden usar para hacer este trabajo, usaré el siguiente formato:

En "Propiedades" puede utilizar:

En Edge, puede usar:

tonelada Arriba (arriba)
segundo Abajo abajo)
Levantarse Enlaces enlaces)
R. Lado derecho (derecho)
X Izquierda y derecha (eje x)
con Arriba y abajo (eje y)
'Ropa blanca' Aplicar en los 4 lados

La medida ":

0 Eliminar márgenes o relleno
1 hasta 5 Establecer diferentes márgenes o tamaños de relleno (de menor a mayor)
automóvil Aplicar borde automático (borde: automático;)

Los valores de tamaño de 1 a 5 corresponden a 0,25 rem, 0,5 rem, 1 rem, 1,5 rem y 3 rem, respectivamente.

Para comprender mejor esta forma de combinar clases para formar elementos espaciales, te daré algunos ejemplos:

próximo

La alimentación máxima es de 0,25 rem.

próximo

Tiene 0.5 barras en todos los lados y 1.5 barras en los lados.

próximo

Está centrado horizontalmente con respecto a su padre y tiene la mitad del ancho.

Incluso puede usar márgenes negativos (recuerde, no hay relleno negativo en CSS). Todo lo que tiene que hacer es poner la letra "n" delante del número de tamaño. Por ejemplo, mb-n2 aplica un margen negativo de 2 debajo del artículo.

Distancia entre carga inicial

Borde

Para agregar bordes a elementos con Bootstrap, puede usar la clase de borde. Si solo desea agregar un borde a un lado de un elemento, use borde superior, borde derecho, borde inferior o borde izquierdo.

También puede aplicar colores de contexto de arranque a los bordes con las clases borde-primario, borde-secundario, borde-correcto, borde-peligroso, advertencia de borde, información de borde, borde claro, borde oscuro y borde blanco. En este caso, debe agregar dos clases, borde y borde- {color}, por ejemplo:

Bootstrap es muy fácil de usar para crear bordes redondeados. Agregue clases de círculo para aplicarlas a todo el elemento. Si solo desea que estén en un lado, use las categorías Parte superior redonda, Ronda derecha, Parte inferior redonda y Ronda izquierda. Si desea un círculo perfecto, una píldora o un artículo con forma de botón, use la clase Círculo redondo o Píldora redonda. Finalmente, si desea eliminar los bordes redondeados de un elemento existente, use la clase redondeada-0.

Costillas en el bootstrap

Exposición

La propiedad de visualización de CSS es fácil de aplicar a la clase Bootstrap. Además, también podemos aplicarlo a puntos de intersección específicos. Esto es especialmente útil si está desarrollando un sitio web 100% receptivo. Vamos a ver cómo funciona:

d- (valor) Para xs
d- (intersección) - (valor) Para sm, md, lg y xl.

Puede utilizar los siguientes valores:

- no
- cola
- Bloque incorporado
-Cerrar con llave
- Mesa
-Célula de mesa
- Fila de mesas
-Flexible
- Flexibilidad incorporada

Mostrar cargador de arranque

Con esta estructura, puede hacer algunas cosas interesantes, como: B. Ocultar bloques solo en la versión móvil. Por ejemplo:

Ese

Lo anterior está oculto por defecto ya que es de clase d-none (display: none;). Pero desde el punto de corte m 'se muestra.

Colocar elementos en bootstrap

Estamos usando otra utilidad muy importante: Posición en Bootstrap. El posicionamiento nos ayuda a poner el bloque donde lo necesitamos. Para hacer esto, necesita usar la propiedad de "ubicación" de CSS a través de la clase Bootstrap, que puede ver a continuación:

- La ubicación es estática
- posición relativa
- Posición absoluta
- Posición fija
- adherencia del sitio

Posición del barco

También puede utilizar las clases Fixed Top y Fixed Bottom para anclar elementos en la parte superior o inferior de la ventana.

Pero el curso más interesante para mí es el Velcro. Esto le permite mover el elemento a la parte superior de la ventana después de desplazarse a la ventana. Un ejemplo práctico: “¿Conoce nuestra red?” Puede verlo en el lado derecho de este blog o en el menú que ve cuando navega por nuestro sitio web.

texto

Al diseñar un sitio web, siempre es necesario alinear bloques de texto. Esto es fácil de hacer en Bootstrap porque tiene ciertas clases. I mostrarle los que puede usar en cualquier situación:

Texto a la izquierda Alinear texto justificado a la izquierda
Centro de texto Texto centrado
Texto correcto Alinear el texto justificado a la derecha
Alineación del texto Texto alineado

Cargando texto

Por otro lado, si quieres algo un poco más exclusivo, no te preocupes. Si solo desea aplicar la alineación a un punto de intersección específico, todo lo que tiene que hacer es agregar el punto de intersección problemático después del "texto-". Por ejemplo: text-cm-middle

gestor de arranque de texto

En la figura anterior, el centrado de texto solo se aplica a las dimensiones "sm" y superiores.

ansiedad

Las advertencias de arranque son similares a las advertencias clásicas que suele ver en Internet: de repente se abre una ventana en el navegador para proporcionar a los usuarios cierto tipo de información. Por ejemplo:

Alarma clásica del cargador de arranque

Como ves, todo es muy sencillo. Hoy en día, este tipo de notificaciones están prestando más atención a su apariencia, y Bootstrap puede ayudarnos a resolver este problema. En esta biblioteca encontrará varios aspectos de elementos como:

Vector de advertencia

Este es un ejemplo simple, pero puede usar otras clases en lugar de "alert-primary" para cambiar el color de la alerta. Recuerda el sufijo de color que te expliqué en la sección Color. En este caso, puede utilizar: * -primary, * -secondary, * -success, * -danger, * -warning, * -info, * -light, * -dark.

Las advertencias de Bootstrap no reemplazan las advertencias estándar del navegador. Son opciones más bonitas que puedes usar.

También puede agregar otros elementos a las advertencias de arranque. Por ejemplo, un botón de cierre:

Para habilitar la opción de deshabilitar la advertencia, debe agregar el siguiente código antes de deshabilitar la etiqueta del cuerpo:

Puede hacer esto colocando su código entre las etiquetasO, mirando archivos .js generados manualmente, en ambos casos debe ingresarlos antes de cerrar la etiqueta. ...

Otra forma de habilitar y deshabilitar la función de alarma es usar los "atributos de datos" como se muestra a continuación:

El código anterior se refiere al botón X que apaga la alarma. Cuando lo nota, agrega un atributo data-dispats = ”alert” que habilita esta función.

Insignia

Otro elemento que contiene Bootstrap es un icono o "insignia". Son un tipo de etiquetas que se utilizan para resaltar artículos, indicar cantidades o simplemente resaltar información adicional.

Bootstrap le permite crearlos y pegar contenido en ellos usando el siguiente código:

Los elementos de símbolo de Bootstrap pueden usar los siguientes sufijos de color: * -primary, * -secondary, * -success, * -danger, * -warning, * -info, * -light, * -dark.

También puede usar insignias de píldoras para darle a la etiqueta un aspecto redondeado.

Icono del cargador de arranque

Migas de pan

Un elemento de navegación común son las rutas de navegación. Ofrecen servicios para que los usuarios siempre sepan dónde se encuentran en su sitio web. Usar Bootstrap para incluir rutas de navegación es tan simple como usar el siguiente código:

Botas de pan rallado

Puedes agregar tantos elementos como quieras

  • Agregue a la lista si es necesario. La clase "activa" se utiliza para mostrar el elemento actual en migas de pan.

    Teclas

    Los botones son un elemento común en cualquier sitio web. Gracias a ellos, puedes dirigir a los usuarios a acciones, visitar enlaces, etc. Si bien esto puede parecer obvio, la forma en que se ven es importante, botones para que los usuarios los reconozcan. Los botones de arranque tienen estilos estándar y puede usarlos con la clase 'btn'.

    En el ejemplo anterior uséetiqueta

    Como habrás adivinado, puedes usar modificadores de color bootstrap a través de la clase btn.[modificador de color]Por ejemplo, "btn success".

    También puede utilizar el modificador de tamaño para cambiar el tamaño del botón. Por ejemplo, "btn-lg".

    Cargador

    Grupo de botones

    A veces, es posible que deba agrupar un montón de botones para darle un aspecto más de menú o teclado. Puede usar la clase .btn-group para agrupar una serie de botones de arranque en un bloque combinando todos los botones en uno

    Realice los cursos enumerados anteriormente. Por ejemplo:

    Puede hacer que este bloque de botones sea vertical. No use la clase .btn-group, use la clase .btn-group-vertical en su lugar.

    También puede usar el modificador de tamaño para cambiar el tamaño de todos los botones a la vez. Ejemplo:

    Grupo de botones de control

    mapa

    La tarjeta Bootstrap, o "tarjeta", es un bloque de contenido que puede constar de un encabezado, cuerpo (con imágenes, título, descripción y botones) y un pie de página. Es importante saber que no tienen un ancho predefinido, sino que toman el ancho del elemento padre.

    Ejemplo básico:

    Cargador de tarjetas

    Como dije, este es un ejemplo simple, pero en realidad puede escribir lo que quiera en la tarjeta.

    Puede utilizar una tarjeta de referencia para crear una cuadrícula de contenido que contenga una lista de elementos. Para hacer esto, todo lo que necesita hacer es crear una estructura de filas y columnas y colocar cada elemento de la tarjeta en una columna, puede usar estos pasos para crear una lista de elementos o algo similar, por ejemplo Lista de precios...

    Hay otras formas de agrupar tarjetas. Puede agrupar todos los elementos de una tarjeta en uno

    Y una baraja de cartas o una clase de barajas de cartas. Pero en mi opinión, no se adaptan a las respuestas tan fácilmente como las estructuras de filas y columnas.

    Para obtener más información sobre todas las opciones y capacidades de los elementos de la tarjeta Bootstrap, visite la documentación oficial.

    carrusel

    Bootstrap Carousel le permite crear presentaciones de diapositivas de cualquier contenido que desee. Suponga que está creando una tienda en línea y desea mostrar varias fotos de productos. En este caso, un carrusel o un control deslizante de imágenes es una buena opción.

    En el siguiente ejemplo, he usado una imagen, pero puede insertar texto u otros elementos de arranque (incluso filas y columnas).

    Líder de carrusel

    Las flechas de desplazamiento y las pantallas son opcionales. Si no los necesita, puede eliminarlos fácilmente.

    Como puede ver, este es un elemento bastante personalizable. Puede cambiar el tipo de transición o el intervalo de desplazamiento entre diapositivas para adaptarse a sus necesidades.

    Modal

    Un modo de arranque o una ventana emergente es una ventana emergente que podemos lanzar para proporcionar información específica al usuario. Probablemente los haya visto muchas veces, por ejemplo, al suscribirse a un boletín u ofrecer descuentos. Algunos sitios web incluso los utilizan para aprovecharlos y recordarle cuándo salir.

    Bootstrap crea un modal como el siguiente:

    Orientación modal

    Es importante que el botón tenga un atributo data-toggle = "modal" y que el atributo data-target tenga el mismo significado que el identificador que ingresó en la ventana emergente.

    navegación

    El elemento principal de casi todos los sitios web es el menú. Esto permitirá que sus usuarios vean su página. En Bootstrap, puede crear una "navegación" o un menú de navegación haciendo una lista

      Y agregue navegación de clase. Para cada elemento

    • De esta lista, debe agregar clases de elementos de navegación. Por último, cada vínculoTodo el mundo
    • Agrega una clase Nav-Link.

      Tendrás algo como esto:

      Instrucciones de navegación

      Como puede ver en el ejemplo, puede marcar uno de los enlaces a la clase de actividad.

      También puede utilizar Nav-Tabs o Nav-Pills Class. Agregar

        Especifique la apariencia de las pestañas o botones de los menús.

        Breve información

        En Bootstrap, una información sobre herramientas es un mensaje informativo que aparece cuando pasa el cursor sobre un elemento. Probablemente haya visto información sobre herramientas en muchos sitios web. No solo en Internet: por ejemplo, si mueve el mouse sobre una carpeta, Windows usa información sobre herramientas para informarle sobre la fecha, el tamaño y el contenido de la carpeta.

        La información sobre herramientas que se utiliza en el sitio web se basa en la misma idea. Es muy fácil crear "información sobre herramientas" en Bootstrap. El funcionamiento es el siguiente:

        Instrucciones de información sobre herramientas

        Como puede ver, puede usar el atributo de ubicación de datos para colocar la información sobre herramientas arriba, abajo o al lado del elemento. El texto que se muestra en la ventana emergente es el texto del atributo de título.

        Para que la información sobre herramientas funcione, debe agregar el siguiente código de jQuery: $ (function () {$ ('[data-toggle=”tooltip”]') .tooltip ())) antes de cerrar la etiqueta Como te expliqué en la sección "Advertencias".

        Cargador de fragmentos

        Los fragmentos son fragmentos de código reutilizables que puede integrar fácilmente en su proyecto. En este caso, puede utilizar código HTML, CSS y JavaScript.

        Algunos sitios web tienen muchos fragmentos de arranque que puede copiar y pegar en su sitio web. También puede crear su propia biblioteca con las bibliotecas más utilizadas.

        Por ejemplo, el siguiente fragmento de código de bootstrapious.com puede mostrar una lista de productos:

        Fragmento de código de muestra

        Hay muchos sitios web con fragmentos de arranque, por ejemplo:

        Plantilla de barco

        Otra forma de crear un sitio web es utilizar plantillas de arranque o "plantillas". Una plantilla de arranque es básicamente un marco web que tiene sus propios estilos establecidos por el creador. Se pueden usar de inmediato, pero generalmente contienen imágenes y texto temporales que deben cambiarse. De lo contrario, generalmente son completamente personalizables en Bootstrap, por lo que son una excelente manera de comenzar a construir un sitio web.

        A menudo, el tema está orientado a los negocios o al sitio web. Puede encontrar plantillas Bootstrap para comercio electrónico, sitios web de reserva, paneles de administración e incluso plantillas multipropósito.

        Al elegir dónde cargar las plantillas de Bootstrap, tiene varias opciones. Por un lado está la propia biblioteca de plantillas oficial: https://themes.getbootstrap.com/ Si bien se pagan, está seguro de que fueron desarrolladas por la misma persona que creó el marco, incluida la estabilidad.

        Cargador de arranque de fábrica

        Por otro lado, también puede encontrar plantillas de arranque gratuitas. Por supuesto, no suelen ser tan completos como los de pago. Suelen ser plantillas más sencillas y deberá utilizarlas con más frecuencia para adaptarse a sus ideas.

        Las plantillas gratuitas de Bootstrap 4 se pueden encontrar en los siguientes sitios web:

        finalmente

        Personalmente, creo que Bootstrap es una de las mejores herramientas que puede utilizar para crear sitios web. Por supuesto, siempre puedes crear todo desde cero, pero Bootstrap te ahorrará mucho tiempo para hacer ciertas tareas (lo digo por experiencia). También es un marco en evolución que ofrece buenas noticias y está construyendo una gran comunidad a su alrededor.

        ¿Ya estás usando Bootstrap? ¿Siempre quisiste saber más? ¡Deja un comentario! 🙂

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    • Subir