Подтвердить что ты не робот

Angular материальная сетка

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

Можно ли использовать angular материальный дизайн для моего проекта по сравнению с загрузкой?

4b9b3361

Ответ 1

Основная причина для использования Angular Материал - это потому, что он основан на спецификации Flexible Box Layout, ведь это стандарт W3C Flexible Box.

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

Materialize - это современная среда для реагирования на основе CMS, основанная на Material Design от Google.

и

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

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

Ответ 5

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