【问题标题】:Bootstrap-material-design: Install successful, but didn't workBootstrap-material-design:安装成功,但没有工作
【发布时间】:2016-05-29 20:41:16
【问题描述】:

我按照github网站上的说明安装了bootstrap-material-design,一切都说安装成功了:

我已将推荐代码插入到我的应用程序标头中:

  <!-- Material Design fonts -->
 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

 <!-- Bootstrap -->
 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

 <!-- Bootstrap Material Design -->
 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/ripples.min.css">

<!-- Material Design Scripts -->
<script src="bower_components/bootstrap-material-design/scripts/index.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/material.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"> </script>

<script type="text/javascript">
     $(document).ready(function() {
         $.material.init();
     });
 </script>

但是,当我尝试一个示例元素(例如“jumbotron”或“well”)时,它仍然以正常引导程序的方式显示,而不是您的材料设计网站所说的方式。

关于如何让它出现的任何想法?我没有收到任何错误消息,所以我真的没有任何事情要做,而且我不想手动下载文件,以免重复。

【问题讨论】:

  • 一些链接和屏幕截图说明您是如何做到的,这将有助于了解您的案例中出了什么问题。
  • 我按照网站上的说明使用了bower install bootstrap-material-design,它说安装成功。这就是问题所在。我没有收到任何错误消息,只是功能不存在。
  • @VikramTiwari,我添加了屏幕截图和代码示例。如果您能想到任何其他有用的信息,请告诉我。
  • 路径是否正确?除非您有不同的凉亭配置,否则不应该是bower_components/ 吗?
  • 我更改了路径(请参阅编辑后的帖子),但仍然没有出现。

标签: ruby-on-rails twitter-bootstrap bootstrap-material-design


【解决方案1】:

显然您没有引用正确的 JS 文件。尝试在 head 部分中将这些添加到您的代码中

<script src="scripts/index.js"> </script>
<script src="scripts/material.js"> </script>
<script src="scripts/ripples.js"> </script>

【讨论】:

  • 我添加了推荐的脚本(更改了路径以反映我的项目路径),但没有任何变化。
【解决方案2】:

您似乎缺少对 jQuery 和 bootstrap 的 .js 文件的引用。您应该按顺序在材料设计脚本之前包含两者。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-11-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-05
    • 2020-09-23
    • 1970-01-01
    相关资源
    最近更新 更多