Personalización de diseños de Bootstrap Tendencias, herramientas y marcos
Oreja es actualmente el número uno front-end framework y fácilmente el forma más rápida de construir diseños. Ha existido durante años y los desarrolladores externos incluso han publicado sus propios recursos en línea. Estos recursos van desde temas gratis a complementos y marcos detallados.
En este artículo, me gustaría compartir un puñado de estos recursos y mejores prácticas para desarrolladores que quieren ir más lejos con Bootstrap.
Todos Los recursos en este post son gratuitos., para que puedas usarlos como mejor te parezca. Incluso si nunca ha usado Bootstrap, seguramente encontrará algo aquí que lo ayudará a comenzar.
Restyling con Bootstrap
La biblioteca predeterminada de Bootstrap viene con su diseño único propio Eso se ve fantástico. Es ampliamente conocido en la web y se puede saber fácilmente cuando un sitio web es usando elementos tradicionales de Bootstrap.
Pero, también puedes reajusta estos elementos tú mismo utilizar el código de Bootstrap como la base para su diseño.
Existen algunas maneras diferentes Puedes hacerlo:
- Agrega tu propia hoja de estilo para sobrescribir la predeterminada.
- Personalice la salida de BootStrap para que solo obtenga los elementos que desea.
- Combina con complementos y complementos / temas.
La última opción es la más común y es una de las razones por las que Bootstrap ha crecido tan rápido..
Por supuesto, yo también soy un gran fan de su personalizar herramienta Porque es totalmente gratuito y te da mucho control sobre qué características quieres usar.
Hay toneladas de recursos para BootStrap 3/4, creados por desarrolladores externos, por lo que es más fácil que nunca crea tus propios diseños únicos de BootStrap sin escribir mucho código.
Complementos y complementos
Ya que Bootstrap viene con una biblioteca masiva de JavaScript, es bastante fácil ampliar las funciones de JavaScript. Y los desarrolladores ciertamente lo han hecho con sus propios complementos, muchos lanzados de forma gratuita en línea.
Estos son mis favoritos que todos apoyar a Bootstrap de forma nativa. Muchos de ellos corre en jQuery, por lo que también son fáciles de personalizar si conoce la biblioteca jQuery.
Validador de formularios
Primero es mi favorito Complemento de validación de formularios, Validador de formularios. Se ejecuta en jQuery y es compatible con un montón de marcos frontend: Bootstrap, Foundation, Pure, UIKit y otros..
Usted puede añadir manualmente cualquier número de 51 validadores a cualquier forma en su sitio. Esto significa que los visitantes deberán cumplir con los requisitos de validación antes de poder enviar los contenidos..
Muchos formularios de contacto utilizan estos validadores para requiere direcciones de correo electrónico de trabajo. Pero, también puedes usarlos para subir imágenes, o contraseñas, casi cualquier cosa que tu corazón de Bootstrap desee..
Selector de fecha y hora
Recogedores de fecha También son un gran dolor codificarte. Muchas formas solo usan menús desplegables para la configuración día / mes / año, pero también puede usar esta Bootstrap plugin selector de fecha para ahorrarse la molestia.
Es completamente de código abierto y se ejecuta en la biblioteca Bootstrap 3.x. También lo notarás. apoya tanto la fecha y tiempo usando otro plugin de jQuery, Momento.js.
En general, esta biblioteca es fantástica para activar un selector de fecha de trabajo. Tiene muchas dependencias pero, afortunadamente, no necesitarás escribir mucho código para que funcione.
Calificaciones de estrellas
Aquí hay otra característica genial para calificaciones de estrellas En la red. Usted puede añadir una calificación de una a cinco estrellas en cualquier lugar de su sitio, utilizando la biblioteca Bootstrap para comportamientos de JavaScript.
Cuando el usuario se desplaza sobre estas estrellas, la pantalla cambia a lo que la calificación se basa en su posición del cursor. Luego, con un solo clic, el usuario emite su voto y establece una calificación de estrellas, incluyendo calificaciones de media estrella.
Este plugin es definitivamente complicado de configurar porque tú puedes cambiar muchos de los ajustes por defecto Para técnicas más avanzadas. Sin embargo, puede ver una demostración en vivo simple para evaluar si este complemento de clasificación de estrellas se ajusta a su sitio..
WATable
Bootstrap viene con su propio estilo de diseño de tabla para mostrar datos tabulares en la interfaz. Pero, con el Plugin de WATable, puedes agregar un montón de características adicionales a tus tablas de Bootstrap.
Este es uno de los complementos de jQuery más detallados que existen y estas son solo algunas de las características que puede agregar:
- Paginación personalizada.
- Clasificación de columnas.
- Filtrado de datos.
- Efectos de animación de tabla.
- Marque para seleccionar filas completas.
WATable se describe como una Navaja suiza de complementos de mesa Y tengo que estar de acuerdo con esta descripción. El hecho de que sea compatible con Bootstrap es solo la guinda del pastel..
Estos fueron algunos de mis complementos favoritos, pero hay muchos otros por ahí. Puedes navegar aún más en esta página si tienes curiosidad..
Marcos de arranque
Bootstrap es en realidad un gran marco porque permite a los usuarios personalizar los estilos predeterminados de HTML y CSS con unas pocas clases.
Pero, los desarrolladores han tomado la biblioteca predeterminada BootStrap y han agregado sus propios estilos para crear marcos aún más grandes que trabajar como temas, por lo que no es necesario volver a diseñar Bootstrap desde cero.
Afortunadamente, todos son gratuitos y todos se ejecutan en las clases predeterminadas de BootStrap.
Bota de arranque
Quizás el framework BootStrap más conocido es Bootflat UI ese sigue la tendencia de diseño plano.
Funciona con todas las características predeterminadas de Bootstrap, incluyendo todos los componentes de JavaScript. Las principales diferencias son más en diseño y estructura donde los elementos de la página utilizan esquemas de color planos para alejarse de los estilos degradados de Bootstrap.
Bota de arranque no ha sido usado en exceso mucho, por lo que puede agregar este marco en cualquier página de inicio o página de inicio para crear una apariencia única para su sitio.
Es 100% gratis e incluso viene con una selector de color, Para que pueda encontrar esquemas de colores planos que coincidan con su diseño.
Hacer la mierda
Esta kit de interfaz de usuario sorprendentemente contundente también se basa en la parte superior de la biblioteca Bootstrap 3 y se publica de forma gratuita en GitHub.
Get Shit Done proviene del equipo de Creative Tim donde venden algunos recursos premium. Este kit de interfaz de usuario específico tiene una versión pro, pero no es necesario en absoluto.
La versión de código abierto tiene más que suficiente para todos y puede consultar el demo en vivo Para ver cómo se ve en el navegador..
Diseño de material bootstrap
Otra tendencia de diseño popular es Diseño de material de google. Este es un lenguaje de diseño creado originalmente para diseñadores de aplicaciones para Android, pero desde difundir en la web y obtuvo mucho apoyo de los diseñadores de UI / UX.
Este increíble marco de material de Bootstrap utiliza las características de diseño del material para construir un estilo de diseño personalizado fuera de la biblioteca de Bootstrap.
Por defecto, Apoya todo en BootStrap 3 y actualmente se está modificando para admitir también Bootstrap 4. Puede obtener más información en la página de inicio oficial que contiene documentación y demostraciones..
Una biblioteca similar que podrías probar es MDBootstrap, Aunque me parece un poco más difícil trabajar con este..
Bootplus
Google creó el lenguaje de diseño del material, pero también tienen sus propios estilos para muchas de sus herramientas y aplicaciones web..
Bootplus imita el estilo de la interfaz de Google+, junto con muchos de los documentos de ayuda de Google, Google Drive y aplicaciones web similares. Tiene las mismas características que Bootstrap, incluidas cuadrículas, estilos de diseño, estilos de elementos y componentes de JavaScript..
Incluso puede navegar a través de una demostración en el sitio para ver el diferencias entre Bootplus y la interfaz de usuario original de Bootstrap. Para un recurso gratuito, Bootplus es extenso y es perfecto para cualquiera que le gusten las técnicas de diseño de Google..
Herramientas y recursos
Por último, quiero sumergirme en las muchas herramientas gratuitas para personalizando y construyendo diseños Bootstrap.
Estas herramientas son todas aplicaciones web y muchas de ellas son incluso de código abierto en GitHub. Están diseñados para ahorrarle tiempo y ayudarlo a diseñar increíbles diseños de Bootstrap sin mucho código.
Editor en vivo
El libre Bootstrap editor en vivo Es una de las mejores herramientas. para diseñadores no tecnicos. Si no sabe cómo codificar, aún puede confiar en este generador de Bootstrap para crear un diseño completo desde cero.
Eso corre directamente en tu navegador e incluso puedes elegir plantillas pre-hechas para comenzar..
Las opciones en la barra lateral te permiten agregar ciertos valores CSS Si conoces algún código de frontend. Pero, también puede usar la GUI para cambiar colores, fuentes, tamaños y casi cualquier cosa que desee.
Una vez que hayas terminado, hacer clic “Obtener tema” y puede copiar / pegar los estilos CSS actualizados en su propio proyecto. Una forma súper fácil de cambiar el estilo de Bootstrap sin necesidad de recodificar todo desde cero.
Constructor de formularios
Esta libre Creador de formularios Bootstrap es un herramienta de navegador de arrastrar y soltar que te permite crear formularios Bootstrap desde cero.
De nuevo, requiere cero conocimiento de codificación y tienes acceso completo a todos los elementos de Bootstrap 3. Simplemente seleccione el elemento que desee y arrástrelo hacia la derecha en el cuadro de la izquierda. Desde aquí, puede cambiar todo, desde el texto del marcador de posición a la clase CSS.
De lejos, el creador de formularios más genial que he visto y es 100% gratis!
BootSwatchr
Otra herramienta gratuita que realmente me gusta es BootSwatchr. Se basa en el marco de Bootstrap y te permite actualizar colores, estilos de tema, y el diseño general de la pagina.
Lo que me gusta de esta aplicación es que también viene con un Galería gratis de estilos pre-diseñados..
Así, puedes descargar un diseño que alguien ya hecho o puede usar eso como punto de partida para personalizar su propio tema.
Avanzando
Bootstrap solo está creciendo en popularidad, por lo que ahora es el mejor momento para sumergirse en este marco. Afortunadamente, hay docenas de complementos, marcos y herramientas gratuitas que puede utilizar para acelerar el proceso de desarrollo..
En este artículo, acabo de mostrar la punta del iceberg, así que si no ves nada aquí, es útil ir a Google y ver qué más puedes encontrar..
