угловая система сетки материалов

Question

Я смущен с angular material design и material css. Почему у обоих есть разные макеты и сетки? Что эквивалентно контейнеру для загрузки в angular material design?

Должен ли я использовать angular material design для моего проекта по сравнению с бутстрапом?

Answer 1

Основная причина, по которой следует обращаться с угловым материалом, заключается в том, что она основана на спецификации гибкой спецификации коробки, ведьма является стандартом W3C Flexible Box.

Чем ближе тег для начальной загрузки контейнера может быть: <div layout="row" layout-wrap></div>

Answer 2

Материализация - это современная адаптивная среда CMS, основанная на Material Design от Google.

И

Bootstrap является самым популярным HTML, CSS, JavaScript и рамки для создания гибких мобильных первые веб-сайты.

Так что если вы хотите новый современный дизайн, я думаю, вы должны пойти с материальным дизайном. У него тоже очень приятная анимация.

Answer 3

Угловой Материал Конструкция не имеет точный эквивалент в контейнер Bootstrap, потому что материал Design (AMD) является более гибким. Контейнер имеет 8 секций. AMD имеет атрибуты компоновки и гибкости. Гибкость AMD может увеличиваться на 5% (20 секций в BS) или на 33 и 66 (2 секции) или комбинациями из 5%, 33% и 66%, что может превышать 100% (большинство любых разделов) в этом случае автоматически создаются несколько строк. Самая лучшая одна страница с примерами, которые я нашел, до сих пор: https://material.angularjs.org/#/layout/grid Нажмите на поле «Источник» над каждым примером, чтобы получить более подробную информацию о синтаксисе HTML для макета и гибкости.

У вас есть дополнительная гибкость с помощью Child Alignment, которая контролирует расстояние между каждым div по горизонтали и по вертикали. Нажмите радиокнопки на этой странице, чтобы увидеть, как divs центрированы или разнесены, или нажаты на один конец, или подняты доверху и т. Д.

Отображаемый синтаксис HTML будет работать на странице заданного размера. Если вы хотите, чтобы эквивалентные медиа-запросы изменяли размеры для разных устройств, у вас есть еще одно кодирование, чтобы сделать угловые контроллеры. Посмотрите примеры DEMOS для различных компонентов, чтобы получить представление.

Answer 4

Угловая сетка материалов> сетка лотка, особенно для угловых применений. В сетке Bootstrap используется float, которая устарела по сравнению с гибкой моделью коробки. float заменил ужасные макеты таблиц, но теперь гибкая модель коробки начинает толкать float в сторону (для макетов сетки). Просто отметьте, что вам нужно добавить определенные суффиксы в CSS для старых браузеров. См. this CSS Tricks article для примера того, как реализовать flex для старых браузеров. Приложения сетки Bootstrap также требуют, чтобы вы создали бесконечное количество div, которое выглядит ужасно, и его следует избегать в любом приложении с использованием HTML5. Технически вы могли бы написать свои собственные угловые директивы для замены определенных div и сгруппировать их на основе того, что и как они отображают, но тогда почему бы просто не использовать Angular Material, если они уже сделали это для вас?

Answer 5

Я искал ответ на тот же вопрос. Здесь я вижу замечательные комментарии. Несколько дополнений по состоянию на декабрь 2016 года: Bootstrap теперь имеет поддержку Flexbox. Проверьте это link и проверьте это link, чтобы сделать загрузчик использовать Flexbox по умолчанию, просто изменив флаг или загрузите bootstrap-flex.css.Поскольку поддержка сетки в материале идет, используйте демонстрацию сетки here, есть механизм гибкой компоновки материала, который отлично смотрится (я еще не пробовал). Это очень близко к загрузочной сетке. Проверьте это link.