63 lines
5.1 KiB
Markdown
63 lines
5.1 KiB
Markdown
|
---
|
|||
|
title: MaterializeCSS Framework as an Alternative to Bootstrap
|
|||
|
localeTitle: MaterializeCSS Framework как альтернатива Bootstrap
|
|||
|
---
|
|||
|
[MaterializeCSS](http://materializecss.com/) - это современная адаптивная интерфейсная платформа, основанная на [принципах материального дизайна](https://www.google.com/design/spec/material-design/introduction.html) Google.
|
|||
|
|
|||
|
## Что такое материальный дизайн?
|
|||
|
|
|||
|
Дизайн материалов (под кодовым названием Quantum Paper) - это система проектирования, разработанная компанией Google. Расширяясь по мотивам «карты», которые дебютировали в Google Now, Material Design делает более либеральным использование макетов на основе сетки, гибких анимаций и переходов, дополнений и глубинных эффектов, таких как освещение и тени.
|
|||
|
|
|||
|
Это [видео](https://www.youtube.com/watch?v=Q8TXgCzxEnw) дает вам представление о материальном дизайне:
|
|||
|
|
|||
|
## Просмотрите эти веб-сайты, которые используют Materialize, и посмотрите на отличие от того, к чему вы привыкли!
|
|||
|
|
|||
|
Протестируйте их на своем телефоне, чтобы лучше почувствовать.
|
|||
|
|
|||
|
* [100](https://www.100xp.io/)
|
|||
|
|
|||
|
* [Темы администрирования](http://demo.geekslabs.com/materialize/v2.1/)
|
|||
|
|
|||
|
* [StrapHq](http://www.straphq.com/)
|
|||
|
|
|||
|
|
|||
|
Другие примеры [здесь](http://materializecss.com/showcase.html)
|
|||
|
|
|||
|
## Альтернатива Bootstrap, действительно?
|
|||
|
|
|||
|
Чилл, на мой взгляд, ничто не может победить Бутстрап. Однако материализуйте CSS, предлагая именно это, Materialize-ation - ощущение взаимодействия с интерфейсом, как будто это физический материал, такой как бумага. Я просто придумал это.
|
|||
|
|
|||
|
Но действительно…
|
|||
|
|
|||
|
Мне нравится материализоваться из-за его простоты, например:
|
|||
|
|
|||
|
В Bootstrap вы сделаете это, чтобы создать кнопку
|
|||
|
```
|
|||
|
<button class="btn btn-primary btn-lg">
|
|||
|
My Button
|
|||
|
</button>
|
|||
|
```
|
|||
|
|
|||
|
В основном каждое имя класса неоднократно привязано к нему btn. И это в основном относится ко многим другим компонентам начальной загрузки, особенно если вы хотите добавить простые классы, такие как цвет.
|
|||
|
|
|||
|
С помощью Materialize вы можете добавить все классы просто так:
|
|||
|
```
|
|||
|
<button class="btn waves-effect waves-light green">My Button</a>
|
|||
|
```
|
|||
|
|
|||
|
Как вы можете видеть, использование btn- было уменьшено. `green` класс можно повторно использовать с любым / всем другим элементом HTML, кроме `button` показанной в этом случае.
|
|||
|
|
|||
|
Существует еще одна более легкая версия Material Design Framework, но она не такая элегантная или простая, как материализующая среда CSS. Помимо этой простоты, здесь есть еще больше причин, почему я люблю материализациюCSS:
|
|||
|
|
|||
|
* Это просто! - Просто подчеркивая
|
|||
|
* Это с открытым исходным кодом, вы можете это сделать здесь
|
|||
|
* Сообщество также растет вокруг него
|
|||
|
* [Кто-то](http://fezvrasta.github.io/bootstrap-material-design/) хочет создать смесь Bootstrap + Materialize. Sweeet!
|
|||
|
|
|||
|
## Что-нибудь еще?
|
|||
|
|
|||
|
Попробуйте, и, возможно, вам понравится. Фактически, с тех пор, когда уже настроен пользовательский интерфейс Android, это может стать хорошим способом улучшить качество дизайна материалов для мобильных веб-приложений, таких как [прогрессивные веб-приложения](https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/#what-will-you-learn)
|
|||
|
|
|||
|
### Может быть, вы не должны его использовать ... пока
|
|||
|
|
|||
|
Он подвергается изменениям на альфа-стадии. Поэтому вы можете пропустить его и не использовать его в критическом проекте, пока он не созреет.
|