Elegir bootstrap vs diseño de material [cerrado]


181

Voy a comenzar un nuevo proyecto usando AngularJS (pila completa). Mi proyecto debe ser receptivo y crearé plantillas desde cero.

¿Entonces necesito un consejo sobre si elegir bootstrap 3 (con directivas angulares) o diseño de material para diseños?

Apreciaría mucho si alguien puede enumerar los pros y los contras de ambos.



1
Bootstrap tiene una comunidad poderosa detrás. Su sistema de cuadrícula tiene más características. El diseño del material dicta la forma en que desarrolla la interfaz de usuario y los estilos. Tiene elementos modernos de interfaz de usuario. Puedes leer más aquí tutorialzine.com/2015/07/comparing-bootstrap-with-mdl
Farshid Saberi

2
si debe admitir IE8 / 9, el diseño del material no funcionará, ya que utiliza el diseño de cuadrícula Flexbox. Me gustaría incluso AHORA con un ui bootstrap angular, ya que es mucho más maduro que el diseño de material que tiene muchos errores ...
Pascal

El entorno de desarrollo también puede ser una consideración. En Visual Studio 2015, Bootstrap es maduro y está bien soportado. No creo que sea así para Materiales y, por lo tanto, no lo estoy usando en este momento. Estaría interesado en ver si otros que usan VS2015 tuvieron esta conclusión.
CYoung

Quiero agregar que los estilos en línea de MD son un dolor. Tampoco quiero tener que mezclar los dos cuando BS tiene la mayor parte de lo que necesito. Me gusta mucho el MD, pero esperaré hasta que madure más y elimine los estilos en línea (que leí en algún lugar en el que estaban trabajando, aunque no puedo encontrarlo ahora).
steveareeno

Respuestas:


153

Que yo sepa, puede usar todas las tecnologías mencionadas por separado o juntas. Tu decides. Creo que miras el problema desde el ángulo equivocado. El diseño de materiales es la forma en que los elementos particulares de la página están diseñados, se comportan y se combinan. Material Design proporciona una excelente UI / UX, pero se basa en el diseño gráfico (HTML / CSS) en lugar de JS (eventos, interacciones).

Por otro lado, AngularJS y Bootstrap son marcos front-end que pueden acelerar su desarrollo al evitar que escriba toneladas de código. Por ejemplo, puede crear una aplicación web utilizando AngularJS, pero sin Material Design. O puede crear una página web HTML5 sencilla con Diseño de materiales sin AngularJS o Bootstrap. Finalmente, puede crear una aplicación web que use AngularJS con Bootstrap y con Material Design. Este es el mejor escenario. Todas las tecnologías se apoyan mutuamente.

  1. Bootstrap = página receptiva
  2. AngularJS = MVC
  3. Diseño de material = gran UI / UX

Puede verificar los increíbles componentes de diseño de materiales para AngularJS:

https://material.angularjs.org


ingrese la descripción de la imagen aquí

Demostración: https://material.angularjs.org/latest/demo/ ingrese la descripción de la imagen aquí


44
Este también podría ser un sitio útil: materialup.com/resources , que ofrece una descripción general de los marcos de diseño de materiales, incl. fezvrasta.github.io/bootstrap-material-design
Mathias Conradt

3
La primera URL de @MathiasConradt ya no existe. Supongo que te referías a materialup.com/posts/c/resources
bernard

11
Esa no es una descripción muy precisa ... Tanto el material como el bootstrap proporcionan un diseño receptivo y una excelente UI / UX. MD parece estar más adaptado a la audiencia móvil.
Vladimir

2
Es importante distinguir el diseño del material del material angular . El diseño de materiales es un lenguaje de diseño , el material angular es solo una biblioteca de componentes de interfaz de usuario que usa MD. Estoy seguro de que puede encontrar temas y extensiones de bootstrap que usan diseño de materiales.
Jens

1
Me gustaría hacerme eco de @Jens arriba. Me gustaría tener el aspecto y los efectos de interfaz de usuario de Material sin dejar de tener la flexibilidad y la familiaridad de Bootstrap a mi disposición. Supongo que es una cuestión de elección.
Yousof K.
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.