système de grille de matériau angulaire
Je suis confondu avec la conception matérielle angulaire et la matière css . Pourquoi les deux ont-ils une présentation et des grilles différentes? Quel est l'équivalent pour un conteneur bootstrap dans conception de matériau angulaire ?
Dois-je utiliser conception de matériau angulaire pour mon projet en comparant avec bootstrap?
La principale raison d'aller avec Angular Material est parce qu'il est basé sur la spécification Flexible Box Layout, qui est une norme W3C Flexible Box .
La balise la plus proche pour le conteneur d'amorçage pourrait être: <div layout="row" layout-wrap></div>
Angular Material Design n’a pas d’équivalent exact d’un conteneur Bootstrap, car Material Design (AMD) est plus flexible. Un conteneur a 8 sections. AMD a les attributs de mise en page et de flex. La flexion d'AMD peut augmenter de 5% (20 sections en BS) ou de 33 et 66 (2 sections) ou par des combinaisons de 5%, 33% et 66%, pouvant aller jusqu'à plus de 100% (la plupart des sections) dans ce cas, plusieurs lignes sont automatiquement créées. La meilleure page contenant des exemples que j’ai trouvés jusqu’à présent est https://material.angularjs.org/#/layout/grid Cliquez sur la zone Source au-dessus de chaque exemple pour obtenir plus de détails sur le code HTML d’AMD. syntaxe pour layout et flex.
Vous avez davantage de flexibilité grâce à Child Alignment, qui contrôle l'espacement horizontal et vertical entre chaque div. Cliquez sur les boutons radio de cette page pour voir comment les divs sont centrés, répartis, poussés à une extrémité, levés vers le haut, etc.
La syntaxe HTML affichée fonctionnera sur une page de taille définie. Si vous souhaitez que l'équivalent de requêtes multimédia change de taille pour différents périphériques, vous devez effectuer un codage supplémentaire pour créer des contrôleurs angulaires. Regardez les exemples de DEMOS pour divers composants pour vous faire une idée.
Matière angulaire> Grille Bootstrap, en particulier pour les applications Angular. La grille de bootstrap utilise float, qui est obsolète par rapport au modèle de boîte flexible. float a remplacé les horribles dispositions de table, mais le modèle de boîte flexible commence à écarter float (pour les dispositions de grille). Notez simplement que vous devez ajouter certains suffixes dans votre CSS pour les navigateurs plus anciens. Voir cet article sur les astuces CSS pour un exemple d'application de flex à des navigateurs plus anciens. Les applications de grille Bootstrap nécessitent également la création d’une quantité infinie de divs, ce qui est terrible et doit être évité dans toutes les applications utilisant HTML5. Techniquement, vous pouvez écrire vos propres directives Angular pour remplacer certains divs et les regrouper en fonction de l'affichage ou de l'affichage, mais pourquoi ne pas simplement utiliser Angular Material alors qu'ils l'ont déjà fait c'est pour vous?
Je cherchais une réponse à la même question. Je vois de bons commentaires ici. Peu d'ajouts à la date de décembre 2016: Bootstrap est maintenant pris en charge par Flexbox. Cochez cette link cochez également cette link pour que Bootstrap utilise Flexbox par défaut en changeant simplement un indicateur ou en téléchargeant bootstrap-flex.css. Pour ce qui est du support de la grille dans le matériau, utilisez une démonstration de la grille ici , il existe un moteur de disposition des matériaux souple qui est superbe (je ne l’ai pas encore essayé). Il est très proche de la grille de bootstrap. Cochez cette link .
Materialise est un framework responsiveCSS moderne basé sur le Material Design de Google.
Et
Bootstrap est le framework HTML, CSS et JavaScript le plus répandu pour le développement de sites Web réactifs conçus pour la première fois sur mobile.
Donc, si vous voulez un nouveau design moderne, je pense que vous devriez aller avec un design matériel. Il a très belle animation aussi.
si vous travaillez avec Angular, plutôt que d'utiliser grid, vous devriez plutôt utiliser flexbox, Angular fournit un package pour cela:
https://github.com/angular/flex-layout
Son énorme avantage est le fait que vous pouvez utiliser des variables publiques TypeScript dans les directives flex-layout (vous ne pouvez pas le faire avec bootstrap). Il inclut également Observables pour les modifications de la requête multimédia.