Personalizando Bootstrap

Clase 43 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Clase anteriorSiguiente clase

Resumen

Veamos como personalizar Bootstrap.

Repositorio de bootstrap:

https://github.com/twbs/bootstrap

Leonardo Grabow

student•

Si hago un nuevo breakpoints ejemplo: 4k: 3840
Se genera automaticamente la col-4k ? o hay que seguir tocando este código?

Diego Forero

Team Platzi•

No lo he probado, pero seria que crearas el breakpoint, compilaras y nos cuentes si funciona, si no te ayudamos a revisar que más hay que hacer.

fernando josé pineda trujillo

student•

Mi paquete de bootstrap vino sin archivo gruntfile, se puede generar?

Cesar David Ramírez Dimaté

student•

Me pasó lo mismo, para la versión 4.1.1 el archivo Gruntfile.js se encuentra en la carpeta node_modules/core-js/

sergio Castilla Muñoz

student•

De qué manera se puede trabajar más eficientemente el css en Bootstrap?

Modificando el css original añadiendo una hoja css personalizada ?
Modificando mediante SASS los estilos originales ?

Diego Forero

Team Platzi•

Lo mejor es crear tus clases en un archivo css aparte y que sobre escriba a las clases de bootstrap.

Steven Giraldo

student•

Me pareció buena idea hacer como Sacha de ir poniendo IDs a los bloques de HTML para luego darles estilos y de esta forma sobrescribir los que trae por defecto Bootstrap.

Edgardo T

student•

luego de haber modificado el archivo de bst, cual es la mejor forma de mantener correctamente las actualizaciones posteriores? Revisar y actualizar a mano?

Cesar David Ramírez Dimaté

student•

Buena pregunta. También tengo esa duda.

Cesar David Ramírez Dimaté

student•

El ejecutar grunt -dist me aparece lo siguiente:

desarrollo@ubuntu:~/Downloads/bootstrap-4.1.1$ grunt dist
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

http://gruntjs.com/getting-started
desarrollo@ubuntu:~/Downloads/bootstrap-4.1.1$

Al parecer es porque el archivo Gruntfile.js no se encuentra en la raiz del proyecto. Ahí que se hace?

Personalizando Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman