¿Por qué todos los sitios web de bootstrap se ven iguales y cómo puedes ser diferente?

Podrías aprender un nuevo marco como otros han sugerido …

Pero me sorprende que nadie haya sugerido la gran cantidad de temas que las personas han hecho para “retocar” el bootstrap.

Los sitios web como Bootstrap Themes & Templates venden temas premium. Los temas gratuitos también se pueden encontrar en línea, Material Design for Bootstrap es uno de mis favoritos.

O crea tu propio tema. Un buen lugar para comenzar sería encontrar (o crear) una página que conste de todos los recursos de arranque (como la plantilla de ejemplo de página de elementos de Bootstrap 3). Ahora puede ver cómo los cambios de su tema afectan a los elementos en su conjunto.

Recuerde no editar bootstrap directamente, sino que anulará los estilos en un nuevo archivo CSS. (Enlaces útiles para anular bootstrap: Cómo personalizar el estilo predeterminado de Bootstrap, la forma correcta – BootstrapBay y la mejor manera de anular bootstrap css)

Use otro marco como:

Marco material

Leaf BETA 1.0 – Marco CSS

Documentación – Materializar

Marco de diseño de material de reacción

Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivo.

IU semántica

El marco front-end receptivo más avanzado del mundo.

Marco en cascada

Guía base – Marco CSS

Marco CSS mínimo para diseños planos y limpios · Siimple

Gato receptivo | CSS Micro framework

Presentamos Sculpt – Nuestro marco gratuito y receptivo – Heart Internet Blog – Centrándose en todos los aspectos de la web

Un marco front-end receptivo para sitios web accesibles y semánticos

Marco conciso

Blueprint: un marco CSS

UIkit

Cuadrícula modesta – CSS Grid Framework

SCHEMA UI Frontend Framework | Un marco de interfaz de usuario front-end potente, ligero, receptivo y delgado construido con Less.

El marco front-end para desarrollar proyectos en la web en Windows Metro Style

Sistema de cuadrícula sensible

para sitios web verdaderamente flexibles, accesibles y receptivos

No todos los sitios web de Bootstrap tienen el mismo aspecto.

He visto muchos sitios web que no sabía que usaban Bootstrap hasta que miré el código fuente o vi un componente familiar.

Sin embargo, hay muchos que se ven iguales porque no todos los desarrolladores web están particularmente interesados ​​en el Front-end. Quiero decir, muchos desarrolladores de back-end no ven la necesidad de pasar horas creando una interfaz de usuario única, cuando todo lo que quieren hacer es mostrar un proyecto / API / marco de back-end.

Personalmente, al menos cambiaría algunas cosas, porque realmente odio usar un diseño tan común. Pero debido a que el marco en sí es atractivo, tiendo a dejar algunas cosas por defecto.

Este es uno de mis proyectos.

Como puede ver, estoy usando la fuente predeterminada, los botones predeterminados y la fuente de icono predeterminada aquí.

Aquí abajo estoy usando los cuadros de entrada predeterminados, pero le di estilo al botón.

Ahora, antes de cambiar las cosas, necesita saber exactamente cómo desea que se vea el sitio web. Es aún mejor si primero crea la IU deseada en un programa de edición de imágenes. Eso es lo que siempre hago.

Después de eso, identifica los componentes que deben cambiarse y encuentra sus declaraciones de estilo en el archivo CSS de Bootstrap. Copie eso y péguelo en otro archivo CSS en su sitio web y póngalo de acuerdo con su diseño. Es un poco tedioso, pero ese es el precio que paga por usar Bootstrap 🙂

Después de usar Bootstrap versión 3 por un tiempo, diría que Bootstrap ayuda a los diseñadores y desarrolladores a acelerar el trabajo en general. Depende de usted cómo lo usa y para qué:

  • Use los estilos y componentes de Bootstrap tal como están y olvídese de cosas personalizadas. Esa es la forma más rápida de hacerlo.
  • Personalice sus CSS y componentes para que coincidan con un diseño / concepto individual. Una forma efectiva y rápida de ir.
  • Deje que Bootstrap se encargue de “cosas detrás de escena” únicamente: preprocesamiento css, cuadrícula, funciones js Crea tu propia compilación Bootstrap.

La primera opción produce aquellos sitios que se ven iguales. Con la tercera opción, ni siquiera reconocerás si Bootstrap está detrás.

Así que hay muchos sitios Bootsrap que son diferentes, simplemente permanecen “sin ser detectados”.

Simple: no use Bootstrap. Cree su diseño para sus objetivos para su sitio, luego escriba el CSS para implementar ese diseño.

Bootstrap es una casa prefabricada. No compraría un prefabricado solo para pasar tiempo, esfuerzo y acres de cinta adhesiva para cambiarlo a una casa diferente. Simplemente debes seguir adelante y construir el que querías en primer lugar.

¿Ellos? No me había dado cuenta.

30 sitios web imprescindibles creados con Bootstrap – BootstrapBay

Bien, suficiente gruñido.

En serio, si crees que todos los sitios web de Bootstrap se ven iguales, entonces eso es una limitación tuya, no de Bootstrap. Los estilos pueden ser similares, pero no todos los sitios web de Bootstrap tienen el mismo aspecto. El enlace de arriba muestra una buena variedad.

Quizás los sitios web de Bootstrap para principiantes tengan algunas similitudes, pero es un marco que facilita el diseño del contenido. Si desea utilizar Bootstrap y ser diferente, familiarícese con el marco para que aprenda sus limitaciones. Una vez que los hayas aprendido, rómpelos. Ve más allá de lo que crees que se puede hacer.

Todos los sitios web de bootstrap que podría haber buscado son los mismos porque podrían compartir los estilos principales, el diseño y los colores de los elementos predeterminados de Bootstrap.

Pero Bootstrap no es solo un conjunto de elementos ya diseñados. Bootstrap tiene una grilla increíble que le permite crear sitios web receptivos fácilmente.

Puede usar los colores y el estilo de la rutina de arranque predeterminada o simplemente puede agregar su propia hoja de estilo y simplemente usar la cuadrícula pura con sus propios colores y estilos también.

Bootstrap incluso tiene una exposición donde puedes ver increíbles sitios creados con ella y todos tienen diferentes estilos. Puedes verlos aquí: http://expo.getbootstrap.com/