Material 在 Nginx 上设计

Question

我正在尝试将 material 设计 UI 应用于工作网络应用程序。应用程序使用 Nginx、PHP、PostgreSQL。我有使用 PHP 和 PostgreSQL 的经验，所以应用程序可以工作（用记事本 ++ 编写的代码），但它很难看，因为我没有网页设计经验，java（脚本）所以只使用基本的 html 表单、输入、按钮...

我想提高UI所以我开始学习CSS。我下载了 material 图标字体并创建了几个按钮，效果很好，按钮也可以缩放到屏幕大小。

h1 {
/* color: #999999; */
font-family: arial, sans-serif;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
text-align: center;
}

@font-face {
  /* Material Icons big thanks to: https://google.github.io/material-design-icons/ */
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/font/MaterialIcons-Regular.ttf); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: clamp(12px,4vmin,30px); 
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons:hover {
  color: e3000f;
/*  background-color: #555; /* Add a dark-grey background on hover */
}

#home_button {
  display: block;
  position: fixed; /* Fixed/sticky position */
  top: 1%; 
  left: 1%; 
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  /*background-color: #E5E7E9;*/ /* Set a background color #E5E7E9 = 229R 231G 233B*/
  background-color: rgba(229,231,233,0.5); /* Set a background color #E5E7E9 = 229R 231G 233B*/
  color: black; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  text-align: center;
  padding-top: 3px;
  padding-left: 3px;
  padding-right: 4px;
  padding-bottom: 0px;
  border-radius: 5px; /* Rounded corners */
}

#home_button:hover {
  /*background-color: #555; /* Add a dark-grey background on hover */
  filter: drop-shadow(2px 2px 2px #555);
  color: #e3000f; /* Add a dark-grey background on hover */
  background-color: rgba(229,231,233,1); /* Set a background color #E5E7E9 = 229R 231G 233B*/
}

<!DOCTYPE html>
<head>
<!-- This line is normally NOT included as font is locally loaded in CSS --><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- This line is normally NOT included as font is locally loaded in CSS -->
</head>
<body>
<a href="/index.php"><button title="Home Button" id="home_button"><i class="material-icons" >home</i></button></a>
<body>

现在我想包括表单、文本框、复选框、按钮... 在 guide(s) they always rely on node.js. I downloaded node.js and created test application on my local PC, but can not push this to nginx. I found multiple articles with proxyPass 中，但我不能在服务器上使用 node.js，所以这不是解决方案。

将页面样式设置为 material 设计并能够保留所有 PHP 代码和现有功能的正确方法是什么？

为了具体说明，我试图完成的是将 FROM 这个简单的 HTML 形式（此处简化，实际上由 PHP 生成） ):

<!DOCTYPE html>
<html>
<head>
<title>Form sample</title>
</head>
<body>
<form action="/sample_form.php">
  <label for="sample_input">Sample:</label><br>
  <input type="text" id="sample_input" name="sample_input" value="Empty">
  <input type="submit" value="Submit">
</form> 
</body>
</html>

TO material 设计表格同outlined text fields and outlined button。在下面的示例中有 material 设计 html 语法，但缺少正确的 css 和 java 脚本，因此它看起来不像上面的链接。 Where/how 获取并在 Nginx 上实现运行而无需 node.js?

<!DOCTYPE html>
<html>
<head>
<title>Form sample</title>
</head>
<body>
<form action="/sample_form.php">
<label class="mdc-text-field mdc-text-field--outlined">
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="sample_input">Sample:</span>
    </span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
  <input type="text" value="Empty" class="mdc-text-field__input" aria-labelledby="sample_input">
</label>
<button class="mdc-button mdc-button--outlined">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Submit</span>
</button>
</form> 
</body>
</html>

所有 tutorials 都严重依赖于 node.js。真的可以只在node.js上使用material设计吗？如果是，node.js 代码（本地开发的）是否可以在没有 node.js 的情况下导出并在 Nginx 上使用？

如果我的问题是新手问题，请提前致歉，但我阅读了所有可用的手册，但未能找到解决方案。

Answer 1

NodeJS 和 Nginx 是后端技术。

Material UI 专为名为 React 的 NodeJS 模板引擎而设计。

在 PHP 中，如果我想从数据库中填充一些东西，我会写类似 <p><?php echo("Value1"); ?></p> 的东西。我可能错了，因为我不使用 PHP.

在 NodeJS 家族中，该语言没有内置的 <?php ?> 标签。因此需要使用像 EJS 和 React 这样的模板引擎来帮助集成 PHP.

的这个功能

现在，React就是这样一个框架，用于集成对NodeJS中模板标签（即<?php ?>标签）的支持。 Material-UI 是 React 的主题。

所以，最后，Material-UI 是 React 的主题，React 是 NodeJS 的框架，所以，Material-UI 将仅适用于 NodeJS 而不适用于运行 PHP 等

的 Nginx、Apache 等

您可以使用 Bootstrap 4 作为 CSS 框架和 https://daemonite.github.io/material or https://djibe.github.io/material 作为 PHP 的主题（即 Nginx、Apache 等）。

Material-UI 的大部分教程都是基于 NodeJS 的，因为它是为 Node 制作的。 您会找到教程，其中他们通过移植 CSS 来演示 Material-UI 的用法，正如您为 Nginx 提到的那样，但是，它们没有达到标准Material-UI不推荐

即使我在九年级的时候也有这个问题。希望这能回答你的问题！

Material 在 Nginx 上设计

Material design on Nginx

html

css

material-design