Question

我想知道如何在我的html项目中使用Material UI。我想知道我是否可以从材质用户界面git page

实现代码

Answer 1

根据我对网络的了解和阅读，您的问题是不，不幸的是，它主要基于javascript及其框架等。我可以假设，这不是您想要做的，您可以通过插入CDN，然后在另一个脚本标签中编写react代码，将react合并到html中。但是，我发现了一个可能的解决方案，即使它不是Material UI，也有些接近：

https://getmdl.io/

这是材料设计灯。例如，要创建一个按钮，只需添加cdn和样式源：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

然后添加您的按钮，如下所示：

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

希望这会有所帮助。很抱歉延迟了将近4年。

Answer 2

将样式表复制粘贴到所有其他样式表之前，以加载我们的 CSS。

<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

我们的许多组件都需要使用 JavaScript 才能运行。具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。将以下 s 放在页面末尾附近，就在结束标记之前，以启用它们。必须先使用 jQuery，然后是 Popper.js，然后是我们的 JavaScript 插件。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>

Answer 3

首先，您需要使用NPM安装Material ui

npm install

使用Bower安装

您还可以使用Bower

安装和管理Material Bootstrap

bower安装bootstrap-material-design

这里是指示如何在html中使用材料ui的指令的链接

https://fezvrasta.github.io/bootstrap-material-design/#getting-started

你需要添加 material.css和ripple.css文件

表示js文件 material.js material.min.js和ripples.min.js

在html开发中使用材料ui？

3 个答案: