Los 6 errores más comunes de Bootstrap que se deben evitar en el desarrollo web

.bg-primary
.bg-danger
migas de pan
alerta-éxito
desplegable
data-toggle=”collapse”
col-md-4

¿No te resultan familiares todas las palabras anteriores?

En caso afirmativo… entonces seguramente está usando bootstrap (o podría haberlo usado) en su aplicación y vale la pena leer este artículo (sigamos adelante…)

Si te preguntamos… cómo empezar a trabajar en la parte frontend de la aplicación, ¿cuál sería tu respuesta?

Aprende HTML y CSS primero. (la respuesta más común que todos los desarrolladores web o frontend sugieren a los desarrolladores novatos…)

Lo aprendes, entendiste todos los conceptos, estás emocionado de crear tu primer sitio web, comenzaste a trabajar en algunas páginas web, agregaste imágenes, botones, libros de texto, formularios y muchas otras cosas en tu página. Usted establece la altura, el ancho, el margen, el relleno, la alineación y varias otras cosas en su página. En resumen… pones tus esfuerzos, dedicas mucho tiempo y finalmente ejecutas tu primera página web en el navegador.

¿¿Que ves??

¿Es atractivo?…. ¿Es receptivo?

¿No se enfrenta a problemas con las imágenes, el diseño, los botones, las alineaciones o los problemas con cualquier otro elemento de su página web?

Seguramente… te estás enfrentando a muchos problemas y tu página web no se ve muy bien en todos los tamaños de pantalla.

Muchos desarrolladores novatos se enfrentan a este problema y se sienten decepcionados, pero si eres un desarrollador apasionado, pronto descubrirás la solución y pasarás a Bootstrap . ( ¿Conoces la última versión de bootstrap?… búscala en Google. Se lanzará el 7 de diciembre de 2020 ).

Bootstrap, que es uno de los marcos front-end más populares, resuelve este tipo de problemas.

Al ser un desarrollador web, es posible que haya utilizado muchos elementos de arranque en su página web. Tipografía, formularios, botones, tablas, navegación, modales, carruseles de imágenes, colapso, información sobre herramientas, cuadrícula y muchos elementos que podría haber utilizado en su página web. Bootstrap no solo facilita su trabajo, sino que también ayuda a hacer más en menos tiempo. 

Para la mayoría de los desarrolladores, Bootstrap es fácil de usar y no es difícil aprovechar este marco al crear una aplicación. La documentación de Bootstrap es bastante impresionante. Puede aprender este marco fácilmente desde allí con la ayuda de enormes fragmentos de código para HTML, CSS y JavaScript.

En la documentación, puede encontrar muchas soluciones para varios problemas relacionados con la interfaz. Las características de Bootstrap le permiten construir su aplicación más rápido. Debido a la simplicidad y la función fácilmente adaptable, los desarrolladores se precipitan en este marco y cometen errores muy superficiales y ambiguos al usarlo. 

Echemos un vistazo a algunos errores comunes que los desarrolladores deben evitar al usar este marco.

1. Ignorar la base básica de este marco

Este es uno de los mayores errores que cometen los desarrolladores al usar este marco. No leen el documento detenidamente y asumen pocos conceptos por sí mismos. Esto da como resultado la generación de errores en su aplicación. Los desarrolladores descubren que la aplicación no está dando el resultado esperado y comienzan a culpar al marco.

Recuerda que bootstrap no es ni gigantesco ni enorme. Viene con muchas plantillas de HTML y CSS listas para construir. Estas plantillas proporcionan las partes básicas de la interfaz de usuario para crear la aplicación fácilmente. Están disponibles paginación, etiquetas, insignias, alertas, acordeón, barra de progreso y muchos componentes integrados. Dependiendo de los requisitos, puede elegirlos y usarlos en consecuencia con su configuración predeterminada.

Bootstrap lo ayuda a crear una interfaz de usuario atractiva para su aplicación. Puede manejar múltiples navegadores, dispositivos y resoluciones en un formato agradable. Puede concentrarse en la parte de desarrollo y mejora en lugar de preocuparse por la estructura de su aplicación. 

Bootstrap ahora es lo suficientemente extensible (inicialmente no lo era y tenía limitaciones). Puedes personalizarlo según tu necesidad. Le recomendamos que primero comprenda los fundamentos de este marco y lea la documentación detenidamente antes de implementar cualquier cosa con este marco.

2. Aprovechar todo lo que ofrece Bootstrap

Bootstrap proporciona numerosas características. Ofrece una gran cantidad de componentes de interfaz de usuario, plantillas de diseño creadas en HTML y CSS. Muchos complementos de JavaScript también están disponibles para usar en bootstrap. Como desarrollador, se sorprenderá al ver todas las funciones y es posible que también desee utilizar todas las funciones, pero los amigos se detienen y son selectivos aquí. 

No complique las cosas usando todas las características que ofrece Bootstrap. No utilice todos los componentes que ofrece bootstrap. Esto es especialmente válido para los complementos. Elija solo aquellos que realmente necesita en su aplicación. Elegir muchos componentes solo porque es agradable y genial solo hará que su sitio sea exagerado.

Puede seguir un enfoque simple en el que el principio excluye completamente el archivo bootstrap.js. Cree la interfaz de usuario usando solo HTML y CSS. Después de eso, agregue los segmentos uno por uno para un trabajo o tarea específica.

3. No es necesario aprender CSS y no necesita una mente de diseñador 

Este es otro concepto erróneo que tienen los desarrolladores sobre este marco. Bootstrap proporciona clases y componentes listos para usar que ayudan a los desarrolladores a usarlo en su interfaz de usuario. Esta es la razón por la que la mayoría de los desarrolladores piensan que no necesitan aprender CSS. 

Te ocupas del complejo CSS en bootstrap que ahorra mucho tiempo. No haces CSS, utilizas los componentes incorporados sin preocuparte por lo que sucede realmente dentro del componente o las clases. Además, no necesita conocer las consultas de medios, pero tenga en cuenta que debe comprender cómo funciona el diseño receptivo en una aplicación. 

Para obtener el mejor rendimiento, también necesita la mente de los diseñadores… ¿por qué?

Mucha gente se queja de que todos los sitios creados en Bootstrap se ven similares y es bastante fácil terminar con un sitio web que no es muy diferente de cualquier otro sitio de Bootstrap. 

Para las variaciones en su sitio web, necesita la ayuda de un diseñador que pueda ayudarlo o puede construirlo por su cuenta entendiendo HTML y CSS junto con este marco.

4. Cambiar el archivo CSS de Bootstrap

Estás trabajando en una aplicación y quieres cambiar el estilo de un elemento de tu página web. Lo verifica en la herramienta de desarrollo de Chrome y ve que el estilo se hereda del archivo CSS de arranque. Abres el archivo CSS de arranque e hiciste algunos cambios en una clase de ese archivo. Hizo los cambios, pero ¿observó que los cambios se reflejaron en todas las páginas donde se utilizó ese estilo en particular? 

Hacer este error creará mucho desorden en su código. Sobrescribir su archivo CSS de Bootstrap puede romper todo el diseño de su aplicación. En lugar de hacer las cosas más agradables, terminarás complicándolas. Más tarde, tendrá que arreglar las cosas manualmente o tendrá que construir la aplicación desde cero. En ambos casos, solo perderá su valioso tiempo.

Si desea sobrescribir el estilo de arranque predeterminado, hágalo en su propio archivo CSS. No realice ningún cambio en el archivo CSS de arranque original. En el punto anterior, hemos mencionado que conocer CSS es obligatorio y en este escenario esto es aplicable. Debe tener conocimientos de CSS para sobrescribir el estilo de arranque predeterminado en su propio documento CSS.

Cree su propio selector o clases de CSS, utilícelo en sus etiquetas HTML y, siempre que mencione sus clases de CSS después de los estilos de arranque, su propia definición de estilo sobrescribirá el estilo predeterminado de arranque.

5. Complicar demasiado con JavaScript

Cuando un desarrollador novato se lanza al desarrollo web, usa HTML, CSS y Bootstrap para crear las páginas web para la aplicación. En el viaje inicial de codificación, los desarrolladores no tienen experiencia. Pueden caer fácilmente en la trampa de hacer un mal uso de JavaScript. El mal uso de JavaScript creará caos en su aplicación y hará que su aplicación sea más complicada.

Los módulos Bootstrap se pueden usar a través de la API de marcado. No necesita escribir una sola línea de código en JavaScript. Esta debería ser su primera consideración al utilizar los módulos en su aplicación. 

Tomemos el ejemplo del cuadro de diálogo modal en su aplicación. Para activar el cuadro de diálogo modal, configure data-toggle=”modal” en un componente del controlador, como un botón o un ancla, y luego pase los parámetros adicionales usando el atributo  de datos .

<button type=”button” data-toggle=”modal” data-target=”#myModal” data-backdrop=”static” data-keyboard=”false”>Abrir Mi Modal</button>

• ID #myModal se utiliza para orientar el código HTML.
• data-backdrop=”static” especifica que el modal no se cerrará cuando el usuario haga clic fuera del modal
• data-keyboard=”false” evento de tecla de escape deshabilitado que cierra un modal.

6. Problemas de incompatibilidad con IE8 y navegadores anteriores

Bootstrap funciona correctamente en los navegadores y escritorios más recientes. Los programas más antiguos y la utilidad de los navegadores pueden funcionar bien, pero no generan el estilo legítimo. En estos navegadores, encontrará diferentes estilos para los componentes y elementos. Internet Explorer 8 y 9 no admiten algunas propiedades de HTML5 y CSS3.

En la etiqueta meta del encabezado HTML, deberá describir correctamente que IE no se está ejecutando en modo de compatibilidad. Esto se verá algo como lo siguiente.

<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>

Pensamiento final

Hemos mencionado 6 errores básicos, pero hay algunos errores más que cometen los desarrolladores al usar Bootstrap. Ignoran el uso de las mejores prácticas debido a la fecha límite u otras razones, también ignoran el uso de algunas herramientas disponibles que facilitan el desarrollo (una de ellas es Bootlint ), y también hacen un mal uso del indicador modal. 

Estos errores no se limitan aquí. Como desarrollador, asegúrese de evitar estos errores comunes y aclare la idea errónea que tiene sobre este marco. Bootstrap no es adecuado para todos los proyectos. Elija este marco según los problemas o requisitos. Le recomendamos encarecidamente que lea la documentación detenidamente antes de comenzar a utilizar cualquier marco. Le irá mejor en su trabajo si sus conceptos son claros y si ha dedicado algún tiempo a leer la documentación.