Buenas a todos/todas, como dice el titulo busco ayuda con bootstrap.
Principalmente mi problema es que tengo que exponer ante mi clase Bootstrap, haciendo yo como profesor y mi duda es que no se en que centrar mi explicación. He visto algo por videos y demás, pero no saco nada en claro sobre que puntos dar mas énfasis sobre los otros.
Se agradece cualquier ayuda.
Gracias
Si dejas claro que "responsive" no es poner tamaños con porcentajes.... habrás hecho un gran favor a la humanidad.
¿Que quieres transmitir? ¿Algo técnico o un paseo de las bondades?
#2 Básicamente tengo que hacer una explicación de su instalación, que es y como manejarlo, pero he visto que tiene unas cuantas utilidades y no sabría decir cuales pueden tener mas peso sobre las demás.
#3 Lo más importante diría que es el sistema grid (no confundir con css grid, de hecho el de bootstrap está construido con flexbox).
Lo natural es tirar de la docu de bootstrap cuando quieres algo en concreto... así que con decir "bootstrap tiene esto y sirve para esto" llega y sobra.
Mírate la docu:
También puedes compararlo a otros css frameworks. No te olvides de meter Tailwind que es el que está ahora en pleno apogeo.
Mencionar también que algunos componentes requieren js, algunos hasta jQuery.
Por defecto, bootstrap divide todos los componentes en 12 divisiones verticales o columnas y asigna todo ese contenedor a lo que contenga a no ser que especifiques lo contrario. Cada elemento, ya sea botón, form, select, etc. cuenta con sus propios márgenes y paddings por defecto ya que en esencia eso es Bootstrap: un conjunto de estilos y apariencia ya aplicadas a componentes para facilitar la maquetación y centrarse en el contenido.
No obstante, también hay proyectos como Material Design for Bootstrap (MDB) que lo hacen bastante más atractivo visualmente y poco tiene que envidiar a una página custom si combinas CSS propio con MDB.
El handicap de Bootstrap es que la modificación de los estilos de los componentes o la selección de estilo de los mismos se hace en la propia clase dentro del tag, por lo que no es tan modular como definir un modelo CSS. Ahora, combinado con JSP o Razor pages, puedes incluir bloques de código idéntico en distintas partes, con sus componentes modificados a tu gusto y demás, logrando que en cierto modo sea modular pero con toda la potencia de Bootstrap.
Además, si te ciñes al uso de sus componentes, son totalmente responsive y puedes especificar el comportamiento de cada uno de ellos son sus respectivos prefijos: xs, sm, md, lg, xl si no recuerdo mal.
Oh, y si en vez de usarlo por columnas, te aciertas mejor con flex, también lo permite.
#7 Comprendo lo que me quieres decir en el primer párrafo, pero la primera parte de las divisiones no la entiendo, te importaría darme una explicación?
He oído hablar de Bootstrap, y alguna vez lo he aplicado, pero ha sido mas en tema botones y demás, nunca me había metido tan afondo y hay cosas que se me escapan.
Gracias
#8 Bootstrap asigna por defecto 12 columnas a cada contenedor.
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
"row" sería el div que contendría a los otros dos y por medio de Bootstrap cada uno de ellos ocuparía la mitad de ese div, ya que por defecto como digo asigna 12 columnas. Para variar el comportamiento según la resolución, podrías poner en la misma clase algo como: class="col-12 col-lg-6" de tal forma que desde móviles hasta resoluciones superiores a 768 píxeles creo que era, asignaría 12 columnas que es el total y después sólo 6 de esas 12. Empiezas definiendo la menor resolución y de ahí para arriba, según el diseño mobile first.
Como decía, el handicap de esto es que defines el estilo en cada uno de los tags por medio de la clase o las clases que quieras usar, pero con recursos que permiten reutilizar código como los que comenté arriba, merece bastante la pena gracias al tiempo que te ahorras maquetando ya que es bastante potente y cohesionado.
Por cierto, el nuevo bootstrap que se avecina sin jquery y con iconos propios tiene buena pinta. Ya veremos.
#13 por qué crees eso? Está muerto bootstrap a día de hoy? Y por qué iba a nacer muerta una versión mucho mejor?
Tan bueno es tailwind?
#13 Puedes expandir eso? A mí tailwind me parece una broma de mal gusto seguida por mil fanáticos que no saben usar CSS de manera modular y prefieren llenar el HTML de mierda innecesaria y redundante.
#19 Ídem, para decir que es mejor que Bootstrap que es el rey desde hace años... y además como repito, la nueva versión sin jquery se espera con ganas para ser aún mucho mejor.
Tailwind no es la panacea, pero está creciendo rápido y generando mogollón de tracción, mucha gente lo está adoptando y eso hace que crezca.
A ver, por lo que veo, si no gusta css puro, tailwind está muy bien porque tienes mil cosas ya preestablecidas, y no tienes que andar creando clases y clases y clases... Lo usas en un pis pas y listo.
Que bootstrap sea el más usado no significa que sea la mejor opción, es como decir que wordpress es la mejor opción en web xD
#19 Por lo poco que miré a raíz del comentario en este mismo hilo, permite especificar aún más el comportamiento de los componentes con las referencias a clases. Por ejemplo, puedes definir en el propio class del componente el tipo de hover, el color de fondo, fuente, etc. y tiene algo así como un purgador de código no utilizado que ¿se lo pasas al compilar? Eso quiero recordar.
Para mí lo positivo de Bootstrap, y más concretamente MDB que es el que yo uso para casi todo como base cada vez que tengo que maquetar algo, es que te ahorra el tener que definir estilos porque los trae preconfigurados.
Si los quieres cambiar es tan sencillo como irte al debugger del Chrome, copiar la referencia al estilo del botón o lo que sea de ese menú con su child y lo que te haga falta en tu CSS propio y sobreescribir el estilo de Bootstrap con lo que quieras. En el peor de los casos tendrás que meterle un !important y poco más.
Que igual no son buenas prácticas, si es así que alguien me corrija, pero con 2 alt+tabs tienes una página bastante decente maquetada.
La diferencia entre tailwind con bootstrap es que siguen caminos diferentes.
Tw es un utility fw, no tienes componentes pre-hechos, no se basa en componentes, sino en en ser fácil y sencillo de usar para construir.
Bootstrap esta a mitad de camino del utility, metiendo cosas como paddings y offsets, pero basándose también en crear componentes, y muy alejado de TW.
Por ejemplo, si quisieras hacer cosas complejas con css grid vas a tener que tirar css tu.
La idea de tw es cubrir todas las reglas de css, hacerlas más simples, sobre todo con sus prefixes (md:xnxx / hover:yyyy) lo cual hace el css súper fácil de leer.
Lo de llenar el HTML de clases es por no compilar el css, nosotros lo usamos con postcss y metemos
.mycomponent {
@apply a b c d e hover:f md:y sm:j
}
Y tienes hover y media queries en una línea que se lee enseguida (una vez te haces a los nombres, que por cierto son fáciles de seguir. )
Recomiendo que lo probeis (tw) yo estoy encantado.
#16 , #24 Vayamos por partes, porque, indiscutiblemente, Tailwind es mejor "framework" de utils que Bootstrap a 2020, tanto para frontend como para backend (Esta muy bien acoplado con Laravel/PHP).
Tiene muchos mas utils, pero muchos mas, que Bootstrap, un punto enfermizo, todo lo que puedas imaginar lo puedes hacer con clases de tailwind sin poner una linea de CSS. Yo he trabajado mucho con Boostrap 4.1 y NUNCA he visto que se pueda llegar a este nivel NI cerca, siempre acabas necesitando de CSS y peor aun, !importants.
Tiene muchos mas utils pero no es mas pesada, por varias cosas, es 0 opionada, no asume NADA, para tailwind un container es un container, no un container centrado como en Bootstrap. No trae components (Cards/Alerts/Navbar etc...) todo lo construyes to a base de clases, y creeme, puedes y de forma super sencilla. Ademas separa los diferentes layers, por ejemplo, el tema de inputs es un package a parte que puedes utilizar o no. Y finalmente va acoplada con PurgeCSS para limpiar TODO lo que no uses del bundle.
La facilidad para extender/sobreescribir los utils es increible, imagina que necesitas de un color nuevo que tailwind no trae, te vas a su fichero de configuracion y haces
config.extends.colors.myMediaVidaColor = 'orange', solo con esto, ya tienes disponible donde quieras todos los utils que utilizan coloresborder-myMediaVidaColor, bg-myMediaVidaColor, text-myMediaVidaColor, outside-ring-myMediaVidaColor, shadow-myMediaVidaColoretc. etc.. etc... Y eso con todos los props de css que puedas imaginar.Hovers? Focus? Que se vea distinto en pantallas grandes? Todo en una linea
bg-red-100 hover:bg-red-200 focus:bg-red-300 lg:bg-orange-300.Mejor naming que bootstrap en mi opinion "display-flex" vs "flex" por ejemplo, el segundo es tailwind.
#18 Por muerto me refiero a que nadie "profesional" que no viva anclado en el pasado y no le de miedo reciclarse puede tener alguna razon por elegir bootstrap, fuera de razones de peso como "Voy a hacer este backend con este tema que es bootstrap 4" y entonces necesitas bootstrap si o si. Pero para proyectos nuevos donde no utilizes temas, no veo ninguna razon, es que no es que uno haga cosas mejor y el otro otras, es que uno hace lo mismo pero mejor y llega mucho mas lejos y el otro no. Evidentemente Bootstrap que muchos hemos crecido con el y esta implamantado en todo el planeta no va a morir nunca.
#29 La próxima web la haré con Tailwind (creo que tengo una para el 15 de enero), tengo ganas de aprenderlo. Luego me falta React y ya podré buscar un curro decente.