Los 10 errores de Bootstrap más comunes que cometen los desarrolladores

A primera vista, Bootstrap parece bastante simple. Y de hecho, no es difícil comenzar a usar Bootstrap. Hay una documentación de Bootstrap muy bien escrita con muchos ejemplos de código HTML, CSS y JavaScript. La mayoría de las trampas importantes se mencionan allí, pero aún así algunos errores son bastante sutiles o tienen causas ambiguas. Debido a que Bootstrap parece muy simple y fácil de usar, muchos desarrolladores se apresuran a usar el marco y, por lo tanto, ocurren errores.

Echaremos un vistazo a 10 de los errores, problemas y conceptos erróneos más comunes de Bootstrap cuando los desarrolladores comienzan a usarlo.

Error común de Bootstrap # 1: Conceptos erróneos básicos sobre el marco

Hay algunos conceptos erróneos básicos sobre el marco Bootstrap que tiene la gente. Esto puede deberse a que no se anuncia claramente en el sitio de Bootstrap o porque las personas no se toman el tiempo suficiente para leer la documentación. El hecho es que a veces los desarrolladores terminan en la esquina haciendo cosas mal y luego culpan al marco. Entonces, aclaremos algunos hechos básicos.

Bootstrap es completo, pero no es ni enorme ni enorme. Bootstrap viene con plantillas de diseño HTML y CSS básicas que incluyen muchos componentes de interfaz de usuario comunes. Estos incluyen tipografía, tablas, formularios, botones, glifos, menús desplegables, botones y grupos de entrada, navegación, paginación, etiquetas e insignias, alertas, barras de progreso, modales, pestañas, acordeones, carruseles y muchos más. Puede elegir y elegir algunos de ellos y, con su configuración predeterminada, generar rápidamente una interfaz de usuario que maneje múltiples navegadores, dispositivos y resoluciones con un formato agradable.

Bootstrap no hará todo por usted, pero proporciona un conjunto de valores predeterminados razonables para elegir y ayudará a los desarrolladores a concentrarse más en el trabajo de desarrollo que en el diseño, y los ayudará a tener un sitio web atractivo y funcionando rápidamente. Permite la creación rápida de prototipos, pero no limita a los desarrolladores en el camino.

Es lo suficientemente extensible para que cualquiera pueda ajustarlo a sus necesidades. En un principio, Bootstrap tenía algunas limitaciones, y en ese entonces era complicado extender los estilos predeterminados. Pero a medida que el marco maduró, la extensibilidad también mejoró.

Error común de Bootstrap #2: Pensar que no necesitas saber CSS para usar Bootstrap, y que no necesitas un diseñador

Si estás pensando que si estás usando Bootstrap no necesitarás saber CSS, estás muy equivocado. Cualquier desarrollador front-end necesita aprender CSS y HTML5. Bootstrap está eliminando muchas partes complicadas de CSS de los hombros de los desarrolladores (como los prefijos específicos del proveedor) y ofrece un estilo predeterminado básico, pero aún necesita comprender CSS. No necesita saber cómo funcionan las consultas de medios, pero debe comprender cómo funciona el diseño receptivo. Bootstrap no está destinado a enseñarte CSS, pero puede ayudarte si lo deseas. Examinar el código fuente en LESS o SASS es un excelente punto de partida.

En un tema similar, no necesita ser diseñador y puede argumentar que no necesita un diseñador con Bootstrap. Sin embargo, si es posible, utilice la ayuda de un diseñador. Una queja común contra Bootstrap es que todos los sitios de Bootstrap se parecen y es fácil terminar con un sitio web que se parece a cualquier otro sitio de Bootstrap. Pero esto no tiene por qué ser cierto. Millones de sitios web en la web se están construyendo con Bootstrap. Se pueden encontrar excelentes muestras de cómo se pueden lograr diferentes diseños en Bootstrap Expo, que recopila sitios creados con Bootstrap. Eche un vistazo, inspírese y comience a crear su propia variación de diseño.

Error común de Bootstrap #3: Cambiar el archivo CSS de Bootstrap

Para hacerlo claro y simple: No modifique el archivo bootstrap.css .

Si realiza cambios en el archivo bootstrap.css , las cosas se complicarán muy rápido. Todo el diseño se romperá cuando desee actualizar los archivos de Bootstrap. Puede sobrescribir en su propia hoja de estilo los colores, estilos, márgenes, rellenos predeterminados, todo. No hay necesidad de tocar la hoja de estilo bootstrap.css en absoluto.

¿No sabes LESS o SASS? No hay problema, puede crear su propio archivo CSS y sobrescribir lo que quiera de la hoja de estilo bootstrap.css original. Tal como mencionamos en el error anterior, conocer CSS es obligatorio. Cree su nuevo selector de CSS, utilícelo en el HTML y, siempre que declare sus clases de CSS después de los estilos de Bootstrap, sus definiciones sobrescribirán los valores predeterminados de Bootstrap.

¿Todavía quieres saber más y profundizar más? Te sugiero y animo encarecidamente a que lo hagas. Utilice el código fuente de Bootstrap LESS. Obtendrá una mejor comprensión de lo que está sucediendo y dónde está qué si usa la fuente LESS y no CSS estático.

Error común de Bootstrap #4: Usar todo lo que ofrece Bootstrap

Como se mencionó anteriormente, Bootstrap es completo. Ofrece una gran cantidad de componentes de interfaz de usuario, plantillas de diseño HTML y CSS y complementos de JavaScript. Pero, por favor, sé selectivo. No tiene que usar todas las funciones de Bootstrap.

Esto es especialmente cierto para los complementos. Elija y elija solo complementos que tengan sentido, y no use todo porque se ve bien y genial. Su sitio web puede exagerarse fácilmente. Considere, para empezar, que no incluye el archivo bootstrap.js en absoluto, y cree un sitio usando solo HTML y CSS. Y luego, agregue componentes solo según sea necesario para roles específicos, uno por uno.

Error común de Bootstrap # 5: mal uso de un indicador modal

Los modales de Bootstrap ofrecen indicaciones de diálogo flexibles con la funcionalidad mínima requerida, y viene con valores predeterminados inteligentes. Aunque modal es fácil de usar y ofrece una rica personalización, hay algunas cosas que debemos tener en cuenta para evitar usos indebidos comunes.

Mostrando más de un aviso modal a la vez

Bootstrap no admite modales superpuestos. Solo un modal a la vez puede ser visible. Se puede lograr mostrar más de un modal a la vez, pero requiere que se escriba un código personalizado para manejar esto correctamente.

Bootstrap modal aparece debajo del fondo

Si el contenedor modal o su elemento principal tiene una posición fija o relativa, el modal no se mostrará correctamente. Siempre asegúrese de que el contenedor modal y sus elementos principales no tengan ningún posicionamiento especial aplicado. La mejor práctica es colocar el HTML de un modal justo antes de la etiqueta de cierre </body> , o incluso mejor en una posición de nivel superior en el documento justo después de la etiqueta de apertura <body> . Esta es la mejor manera de evitar que otros componentes afecten la apariencia y funcionalidad del modal.

Modal en los dispositivos móviles

Hay algunas advertencias que los desarrolladores deben tener en cuenta cuando se trata de modales en dispositivos móviles con teclados virtuales. Esto es especialmente cierto para los dispositivos iOS, donde existe un error de representación que no actualiza la posición de los elementos fijos cuando se activa el teclado virtual. Esto no lo maneja Bootstrap, por lo que depende del desarrollador manejar estas situaciones en el código de la mejor manera para la aplicación en cuestión.

Error común de Bootstrap n.° 6: problema del componente del botón de entrada de archivos

Bootstrap no tiene un componente designado para un botón de carga de archivos. Se puede lograr una solución simple y elegante usando solo HTML y CSS con el siguiente código de muestra:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Hay muchos ejemplos de cómo conseguir un efecto similar. Este ejemplo de código está tomado de Cory LaViska, y en su sitio puede leer una explicación más detallada de este problema. También hay un ejemplo extendido con más funciones que usa código JavaScript adicional.

Error común de Bootstrap # 7: complicar demasiado con JavaScript e ignorar los atributos de "datos"

Los diseñadores, o simplemente los desarrolladores de JavaScript novatos, pueden sumergirse fácilmente en el desarrollo web y crear páginas web usando solo HTML, CSS y Bootstrap. Si no son muy buenos codificando, pueden caer en la trampa de hacer un mal uso de JavaScript o simplemente complicarse demasiado. Es importante señalar que todos los complementos de Bootstrap se pueden usar únicamente a través de la API de marcado, sin escribir una sola línea de JavaScript. Esta es la API de primera clase de Bootstrap y debe ser su primera consideración al usar complementos.

Por ejemplo, podemos activar un cuadro de diálogo modal sin escribir JavaScript simplemente configurando data-toggle="modal" en un elemento controlador como un botón o ancla, y pasar parámetros adicionales usando atributos de data- . En el siguiente código, apuntamos al código HTML con el ID #myModal . Hemos especificado que el modal no se cerrará cuando el usuario haga clic fuera del modal mediante la opción data-backdrop , y hemos deshabilitado el evento de tecla de escape que cierra un modal con la opción data-keyboard . Todo en una línea de código HTML:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Error común de Bootstrap #8: Ignorar las herramientas que facilitan el desarrollo de Bootstrap

Los errores ocurren y todos los desarrolladores los cometen ocasionalmente. Esto es inevitable, pero lo que importa es cómo lidias con el error. El equipo de Bootstrap notó al observar el rastreador de problemas que las personas están cometiendo algunos errores con más frecuencia. Es por eso que intentaron automatizar el proceso de desarrollo. El resultado es Bootlint, una herramienta de linting HTML para proyectos Bootstrap. Bootlint se puede usar en el navegador o desde la línea de comandos a través de Node.js, y verificará automáticamente las páginas web de Bootstrap en busca de muchos errores comunes de uso de Bootstrap. Agregar Bootlint a su cadena de herramientas de desarrollo web puede eliminar muchos errores comunes que generalmente ralentizan el desarrollo de un proyecto.

En caso de que desee contribuir al proyecto Bootstrap, vale la pena consultar Rorschach. Rorschach es un bot de verificación de cordura de solicitud de extracción de Bootstrap, que ejecuta algunas comprobaciones en cada nueva solicitud de extracción. Si falla una verificación de cordura, deja un comentario informativo en la solicitud de extracción que explica el error y cómo solucionarlo, y luego cierra la solicitud de extracción.

Error común de Bootstrap # 9: IE8 y problemas de incompatibilidad de navegadores anteriores

Bootstrap está diseñado para funcionar de la mejor manera en los últimos navegadores de escritorio y móviles. Los navegadores más antiguos pueden mostrar componentes y elementos con un estilo diferente, pero todo debería ser completamente funcional. El soporte incluye Internet Explorer 8 y 9, con una nota importante de que algunas propiedades CSS3 y elementos HTML5 no son totalmente compatibles con estos navegadores.

Para obtener soporte completo para Internet Explorer 8 y otros navegadores más antiguos, debe usar un polyfill para CSS3 Media Queries Respond.js, HTML 5 shim que permite el uso de elementos HTML5 y una etiqueta IE <meta> adecuada en el encabezado HTML para asegúrese de que IE no se esté ejecutando en modo de compatibilidad. Su encabezado HTML al final debería verse así:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

En el caso de Respond.js , tenga cuidado con las siguientes advertencias en los entornos de desarrollo y producción.

Error común de Bootstrap #10: Ignorar las mejores prácticas

Una de las preguntas comunes sobre Stack Overflow es cómo hacer que el menú desplegable de Bootstraps se abra al pasar el mouse, en lugar de al hacer clic. Si bien la solución a esta pregunta no es complicada y se puede hacer usando solo CSS, no se recomienda. Esta característica se dejó fuera del marco a propósito, y esta es una decisión de diseño tomada por el equipo de desarrollo. Una vez más, se puede hacer, pero es necesario comprender las repercusiones y comprender que existen mejores prácticas, especialmente para los primeros marcos móviles. El razonamiento detrás de este problema específico es que hacer que las cosas funcionen al pasar el mouse no ayuda a los usuarios que tienen dispositivos táctiles. En tales dispositivos no hay desplazamiento, solo eventos táctiles. Por lo tanto, esto no funcionará correctamente en ningún dispositivo táctil.

Errores de Bootstrap Conclusión

Espero que esta breve guía de Bootstrap lo ayude a evitar algunos de los errores comunes, a aclarar los conceptos erróneos habituales y lo ayude a obtener la mayor parte del marco. Tenga en cuenta que Bootstrap no es para todos, ni es adecuado para todos los proyectos. Al elegir un marco, debe tomarse un tiempo para leer la documentación, y debe pasar un tiempo jugando con el marco para tener una mejor idea y una imagen de cómo funciona. Esto también es válido para Bootstrap.

Lea la documentación, juegue y experimente con las muestras, obtenga los conceptos básicos correctamente y disfrute creando diseños nuevos y hermosos.