Варианты с использованием Bootstrap Material Design

Введение

Material Design — это проект от Google, который обещает привнести новые возможности в ваш дизайн под эгидой передовых технологий.

Material Design также был добавлен в самый популярный фреймворк для веб-разработки Twitter Bootstrap. Вы можете добавлять варианты inout, кнопок и значков с помощью Bootstrap Material Design.

Установить

Вы можете установить Bootstrap Material Design используя Bower или Gems.

Если вы используете Bower, вы должны выполнить следующую команду

bower install bootstrap-material-design --save

Для Gems используйте следующую

gem install bootstrap-material-design

В противном случае вы можете загрузить zip-файл, содержащий проект, по адресу «https: //github.com/FezVrasta/bootstrap-material-design/archive/master.zip «. Вам необходимо включить файл material.min, находящийся в папке dist/css, и файл material.min, находящийся в папке dist/js, доступной в папке «bootstrap-material-design-master», которую вы получаете при распаковке zip-файла, загруженного по указанной ссылке. .

Добавление цветовых вариаций к кнопкам

Вы можете добавить 17 цветовых вариаций к кнопкам Botstrap. Для этого вам нужно добавить «btn-material-color», где цвет указывает на 17 различных цветов.

Вот пример, показывающий, как добавить «СВЕТЛО-ЗЕЛЕНЫЙ» цвет к кнопке.

         Цветовые вариации кнопок с использованием примера дизайна материала Bootstrap                           

Живая демонстрация

Добавление и удаление теней к кнопкам

Путем добавления класса ".btn-flat" к вашим кнопкам, вы можете выглядеть плоскими. Хотите тени? просто добавьте класс ".btn-raise".

          Добавляйте и удаляйте тени к кнопкам, используя пример дизайна материала Bootstrap                          

Live Demo

Работа с полями формы

Вы можете добавить класс ".floating-label" в поле ввода и добавить к нему заполнитель, который преобразует заполнитель в плавающую метку.

                                 

Живая демонстрация

Работа с иконками

Bootstrap Material Design содержит 490 оригинальных иконок Material Design. Если вы знакомы с использованием любого другого проекта значков fotn, он похож на те.

Использование может выглядеть следующим образом

   

Оцените статью
nanomode.ru
Добавить комментарий