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.