Bootstrap
framework o conjunto de herramientas de Código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.
como funciona el sistema de cuadricula (Grid System) para maquetación de sitios web.
Un grid es una cuadrícula para maquetar el contenido de tu página bajo unas guías básicas. Éstas darán estabilidad al diseño, alineación y homogeneidad. Es cierto que además, ayudan al Responsive (el diseño adaptable o adaptativo), porque con pocas reglas de CSS, consigues un diseño perfecto para a todos los dispositivos. Cada grid vertical se compone de dos cosas: columnas (cols) y calles (gutters). Las columnas son las divisiones más amplias, mientras que las calles se definen como los espacios de igualdad entre las columnas, lo que en maquetación de papel se llama medianil. Incluso cuando una cuadrícula contiene columnas de diferentes anchos de las anchuras de las calles suelen ser estáticas.
como se agrega diseño a los diversos componentes de HTML con Bootstrap.
La personalización de los componentes de Bootstrap se puede dividir en dos tipo: cambios pequeños en el diseño de los componentes y rediseño gráfico completo de los componentes.
Los cambios pequeños son modificaciones en los elementos gráficos básicos del componente, como su color o el tamaño y tipo de letra. Un buen ejemplo de cómo conseguirlo es el Twitter Translation Center (que ha sido creado por uno de los autores de Bootstrap). A continuación se muestra a modo de ejemplo cómo se creó el botón personalizado de ese sitio web, cuya clase CSS es .btn-ttc.
En primer lugar, en vez de utilizar los botones que incluye Bootstrap (que sólo requieren añadir la clase .btn), se definió una nueva clase CSS propia llamada .btn-ttc. De esta forma se reduce al mínimo el esfuerzo de crear un estilo gráfico propio.
No hay comentarios:
Publicar un comentario