Cómo modificar Bootstrap fácil y rápidamente
Sin embargo, también puedes reemplazar uno de los estilos con tu propia tabla de demostración sin modificar su código fuente, lo cual es un método común hoy en día.
Bootstrap es más que un simple marco de interfaz HTML/CSS, es un punto de inflexión. Este marco de codificación integral facilita el diseño y desarrollo de muchas aplicaciones y sitios web, y también convierte muchos marcos HTML en productos.
Lamentablemente, su mera funcionalidad atrae nuestra pereza instintiva y muchas personas se apegan a su configuración predeterminada. Ahora, tenga en cuenta que estos imaginativos estilos predeterminados y cuadrículas de diseño no son malos; son el resultado de mucho tiempo y esfuerzo invertido por el equipo de Twitter. Son una base sólida.
Sin embargo, sólo porque Bootstrap sea el "bloque de construcción" del marco Bootstrap, no significa que sea la solución definitiva. Puede haber una excepción a esta regla si desarrolla algo internamente que no es visible para el público. Pero aun así, tus ideas pueden llevar a las personas un paso más allá e incluso cambiarlo todo.
Los desarrolladores de Bootstrap realmente han hecho un gran trabajo, su código es modular y puedes descargar los componentes individuales del framework. Incluso proporcionan una herramienta de personalización básica en el sitio web que le permite editar variables.
El resto depende de nosotros. Algunos diseñadores y desarrolladores reales han dado un paso adelante para crear herramientas y realizar cambios, y no hay razón para que nos quedemos atrás. No hay razón para volver a la configuración predeterminada de Bootstrap.
Cambios en Bootstrap
Aquí hay un conjunto de cambios establecidos que harán que su Bootstrap básico le resulte menos familiar. Puede haber algunas restricciones en el uso de estos cambios, y algunos de ellos se usarán bajo condiciones específicas, pero si se ajustan a sus necesidades, le ahorrarán mucho tiempo y dinero.
Flat UI
El primer cambio es Flat UI (interfaz de diseño plano) lanzado por Designmodo. La interfaz de usuario plana está ganando popularidad rápidamente en el mundo del diseño y por una buena razón: está bellamente diseñada. Flat UI está diseñado para usuarios que prefieren el diseño plano (a diferencia del diseño más o menos antropomórfico de Bootstrap), y cada elemento de la UI ha sido rediseñado de acuerdo con la nueva estética.
Con íconos vectoriales, nuevas fuentes para íconos de glifos, elementos de interfaz de usuario personalizados, como listas de tareas pendientes, y varios temas de color que son fáciles de cambiar, Flat UI me hizo a mí, y probablemente a muchos otros, volver a entender la apariencia de Oreja. A menudo siento que el tamaño del texto en los elementos básicos del párrafo es un poco pequeño para un sitio web y, para ser justos, creo que solo son adecuados para interfaces de aplicaciones donde puedes colocar el texto en muy poco espacio.
Flat UI es gratuita, pero también puedes usar la versión Pro de pago, que tiene elementos, funciones y archivos PSD adicionales.
Fbootstrap
¿Recuerdas lo que dije antes de que algunos cambios tienen condiciones de uso específicas? Por supuesto que no estoy bromeando. Fbootstrapp ha sido completamente rediseñado para elementos de interfaz de usuario compatibles con Facebook.
¿Por qué? En sus propias palabras, "Fbootstrapp es un conjunto de herramientas para iniciar el desarrollo de aplicaciones iFrame de Facebook. Incluye estilos CSS y HTML para tipografía básica, tablas, botones, formularios, cuadrículas, navegación y más elementos para que se vean hermosos. Se ve y se siente como el Facebook clásico.
Atención desarrolladores de Facebook, su trabajo está a punto de volverse más fácil
Plantillas de administración de interfaz de usuario Jumpstart
Bootstrap se usa principalmente para aplicaciones, pero si desea usarlo, para una "interfaz de administración" clásica, necesita hacer un poco de trabajo adicional.
Jumpstart UI le ofrece tres plantillas diferentes para que no tenga que hacer trabajo adicional.
Los íconos de la interfaz de usuario de administración, los estilos de widgets, los complementos de visualización de datos basados en jQuery y más se presentan en un diseño limpio, personalizable y totalmente responsivo.
Lo más importante que hace que este cambio sea único es que no existe una versión gratuita que requiera pago para su uso. Por solo $ 15 a $ 20, es una buena oferta tanto en términos de lo que puede hacer como de qué tan bien se adapta a sus necesidades específicas.
BootMetro
A algunas personas les encanta y muchas más lo odian, pero no se puede negar que Windows 8 y su Metro UI causaron revuelo en el mundo del diseño. No creo que esta interfaz de usuario sea particularmente útil (excepto en algunas tiendas de software), ¡pero tenemos un BootMetro!
Es gratis y parece tener excelentes funciones, así que siéntete libre de usarlo. Puede que no sea particularmente útil para la mayoría de las personas, pero es una experiencia de codificación novedosa.
Herramientas de personalización de Bootstrap
Entonces, si desea iniciar Bootstrap para que se adapte mejor a sus necesidades de interfaz de usuario, ¿cómo puede empezar? Por supuesto, puedes mirar el código directamente, pero te puedo decir que es muy difícil hacerlo.
Si deseas cambiar manualmente toda la tipografía, botones, colores de enlaces o estilos de navegación, puedes editar todas las variables en la aplicación de personalización del sitio web Bootstrap, pero debes conocer el código HEX de todos los colores, y en No ve ninguna visibilidad cuando realiza cambios, lo que significa que no puede predecir los efectos de sus cambios. No puedes predecir cómo resultarán tus ediciones.
Afortunadamente, hay algunos creadores de temas Bootstrap que proporcionan herramientas específicas para este tipo de personalización. Estas son dos de las mejores herramientas que he encontrado hasta ahora.
StyleBootstrap
StyleBootStrap es una poderosa herramienta que puede editar la mayoría de los elementos predeterminados de la interfaz de usuario que ves en los marcos, si ignoras la interfaz torpe.
Bootstrap Magic
Bootstrap Magic es una herramienta que te ayuda a reinventar tu arquitectura. Tiene una interfaz sencilla y amigable y puede ajustar más elementos que StyleBootstrap. Por lo tanto, lleva más tiempo, pero aun así ahorra mucho tiempo que modificar manualmente todos los elementos.
Plugins y Fragmentos
Hay algunas cosas que Bootstrap no tiene, pero son muy importantes para nosotros. Primero está el ícono.
Font Awesome
Los íconos de personajes de imagen proporcionados por Bootstrap son geniales, pero limitados. Tienes un ícono "oscuro" y un ícono "claro", siendo este último una linda imagen de un pequeño duende. Sin embargo, las fuentes de los iconos deberían ser más flexibles. Puede realizar cualquier edición en estos íconos usando CSS3. Por ejemplo, cambiar colores y agregar sombras es tan fácil como escribir CSS. Ahora, Font Awesome puede implementar estas funciones para 361 iconos.
Bootsnipp
Bootsnipp es una biblioteca de fragmentos de HTML que funciona con Bootstrap sin agregar bibliotecas adicionales. Los fragmentos incluyen: formularios de registro e inicio de sesión, calendarios, interfaces de correo electrónico similares a Gmail, interfaces de reproductor multimedia y más.