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

Последнее обновление 28 мая 2019 07:57:45 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Вступление

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

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

устанавливать

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

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

bower install bootstrap-material-design --save

Для драгоценных камней используйте следующее

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 разных цветов.

Вот пример, показывающий, как добавить цвет «LIGHT GREEN» для кнопки.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Color variations in buttons using Bootstrap Material Design Example</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-material-design-master/dist/css/material.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <button class="btn btn-material-lightgreen">Light Green button</button>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="bootstrap-material-design-master/dist/js/material.min.js"></script>
  </body>
</html>

Live Demo

Добавить и удалить тени для кнопок

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Add and remove shadows to buttons using Bootstrap Material Design Example</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-material-design-master/dist/css/material.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <button class="btn btn-material-deeppurple btn-flat">Button without shadow</button>
    <button class="btn btn-material-deeppurple btn-raised">Button with shadow</button>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
     <script src="bootstrap-material-design-master/dist/js/material.min.js"></script>
  </body>
</html>

Live Demo

Работа с входами формы

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <titleWorking with inputs using Bootstrap Material Design Example</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-material-design-master/dist/css/material.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <input type="text" class="floating-label" placeholder="Enter Your Name">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
     <script src="bootstrap-material-design-master/dist/js/material.min.js"></script>
  </body>
</html>

Live Demo

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

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

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

 <i class = "icon icon-material-favourite"> </ i>

Предыдущий: Twitter Bootstrap с меньшим количеством CSS
Далее: Твиттер Модалы по загрузке Twitter