Question

我尝试将Material Design Lite（http://www.getmdl.io/）中的按钮添加到Joomla 3.x网站。

我尽最大努力遵循指示，而我得到的输出并没有得到造型。

我试图在此页面上彻底记录我的尝试：http://www.cherokeecollisioncenter.com/sandbox

非常感谢所有帮助。

Answer 1

以下是采用一些常见本地商业移动操作的按钮的正确答案：

**<p style="text-align: center;"><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href='tel:1234567890'"><i class="material-icons">call</i> </button><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" style="margin-left: 10%; margin-right: 10%;" onclick="location.href='//www.google.com/maps/dir//remaining-portion-of-link-to-directions'"><i class="material-icons">directions</i> </button><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href='mailto:info@example.com'"><i class="material-icons">mail</i> </button>
</p>**

您还必须在每个页面的头部包含两个CSS样式表和JS脚本文件。在我的情况下，托管的CSS覆盖了我的一些网站设置，我不得不再次覆盖它们。

Answer 2

造型对我来说非常合适......你究竟想要实现什么？你有样机吗？你清理了缓存吗？

如果您在移动设备上使用这些设备，并且希望它们在页面上浮动，那么您必须将CSS样式位置属性设置为固定。您可以通过将“添加”替换为素材图标页面上任何图标的名称来更改图标：https://www.google.com/design/icons/

浮动主页按钮可能看起来像这样：

<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" style="position:fixed; right:10px; bottom:10px;"><i class="material-icons">home</i> </button>

Joomla 3.x上的Material Design Lite按钮

2 个答案: