Escolhendo o bootstrap versus o design do material [fechado]


181

Vou iniciar um novo projeto usando o AngularJS (pilha completa). Meu projeto precisa ser responsivo e criarei modelos a partir do zero.

Então, preciso de um conselho sobre a escolha do bootstrap 3 (com diretivas angulares) ou do design do material para layouts?

Eu apreciaria muito se alguém pode listar os prós e contras de ambos.



1
O bootstrap tem uma comunidade poderosa por trás. Seu sistema de grade possui mais recursos. o design do material determina a maneira como você desenvolve a interface do usuário e os estilos. Tem elementos modernos de interface do usuário. Você pode ler mais aqui tutorialzine.com/2015/07/comparing-bootstrap-with-mdl
Farshid Saberi

2
se você precisar oferecer suporte ao IE8 / 9, o design do material não funcionará, pois usa o layout da grade do Flexbox. Eu iria mesmo agora com inicialização ui angular, pois é muito mais maduro do que o projeto material que tem muitos bugs ...
Pascal

O ambiente de desenvolvimento também pode ser uma consideração. No Visual Studio 2015, o Bootstrap é maduro e bem suportado. Não achei que isso acontecesse com os Materiais e, portanto, não o estou usando neste momento. Estaria interessado em ver se outros usuários do VS2015 tiveram essa conclusão.
CYoung

Eu quero dizer que os estilos em linha do MD são uma dor. Eu também não quero ter que misturar os dois quando o BS tiver mais do que eu preciso. Eu gosto muito de MD, mas esperarei até que amadureça mais e se livre dos estilos inline (que li em algum lugar em que eles estavam trabalhando, embora não o encontre agora).
Steveareeno

Respostas:


153

Tanto quanto sei, você pode usar todas as tecnologias mencionadas separadamente ou em conjunto. Você decide. Eu acho que você olha o problema do ângulo errado. Design de material é exatamente a maneira como determinados elementos da página são projetados, se comportam e compõem. O Design de material fornece excelente interface do usuário / UX, mas depende do layout gráfico (HTML / CSS) em vez de JS (eventos, interações).

Por outro lado, AngularJS e Bootstrap são estruturas de front-end que podem acelerar o seu desenvolvimento, poupando-o de escrever toneladas de código. Por exemplo, você pode criar um aplicativo da Web utilizando o AngularJS, mas sem o Material Design. Ou você pode criar uma simples página da Web HTML5 com o Design de materiais sem AngularJS ou Bootstrap. Por fim, você pode criar um aplicativo da Web que use o AngularJS com o Bootstrap e com o Material Design. Este é o melhor cenário. Todas as tecnologias se apoiam.

  1. Bootstrap = página responsiva
  2. AngularJS = MVC
  3. Design de material = ótima interface do usuário / UX

Você pode verificar componentes impressionantes de design de material para o AngularJS:

https://material.angularjs.org


insira a descrição da imagem aqui

Demonstração: https://material.angularjs.org/latest/demo/ insira a descrição da imagem aqui


4
Esse site também pode ser útil: materialup.com/resources , que fornece uma visão geral das estruturas de Design de materiais, incl. fezvrasta.github.io/bootstrap-material-design
Mathias Conradt

3
O primeiro URL do @MathiasConradt não existe mais. Eu acho que você quis dizer materialup.com/posts/c/resources
bernard

11
Essa não é uma descrição muito precisa ... O material e o bootstrap fornecem um design responsivo e uma excelente interface do usuário / UX. O MD parece ser mais adaptado à visualização em dispositivos móveis.
Vladimir

2
É importante distinguir o design do material do material angular . O design de material é uma linguagem de design , o material angular é apenas uma biblioteca de componentes da interface do usuário que usa MD. Tenho certeza de que você pode encontrar temas e extensões de inicialização que usam design de material.
Jens

1
Eu gostaria de ecoar @Jens acima. Gostaria de ter a aparência e os efeitos da interface do usuário do Material, mantendo a flexibilidade e a familiaridade do Bootstrap à minha disposição. Eu acho que é uma questão de escolha.
Yousof K.
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.