我正在尝试将 Material Design Lite (http://www.getmdl.io/) 中的按钮添加到 Joomla 3.x 站点。
我尽我所能按照指示进行操作，但我得到的输出没有得到样式。
我试图在此页面上彻底记录我的尝试：http://www.cherokeecollisioncenter.com/sandbox
非常感谢所有帮助。
【问题讨论】：
标签： joomla material-design material-design-lite joomla3.4
以下是执行几个常见的本地业务移动操作的按钮的正确答案：
**<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 覆盖了我的一些网站设置，我不得不再次覆盖它们。
【讨论】：
样式对我来说看起来很合适...您到底想实现什么？你有模型吗？你清除缓存了吗？
如果您在移动设备上使用它们并且希望它们漂浮在页面上，则必须将 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>
【讨论】：