1

我正在使用 fezvrasta 的 Bootstrap 材料设计。我能够拥有所有颜色和其他构建块,但按钮、文本框和其他的涟漪效应不起作用。

在搜索栏中,有下划线表示涟漪效应,但我没有得到相同的结果。按钮或链接没有涟漪效应。

<html lang="en">

<head>
  <title>Materialize Demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-material-design.css">
  <link rel="stylesheet" href="css/ripples.css">
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script src="js/material.js"></script>
  <script src="js/ripples.js"></script>
</head>

<body>

  <div class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="javascript:void(0)">Web Technology Classes</a>
      </div>
      <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Learn
                <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)">Basics of Web</a>
              </li>
              <li><a href="javascript:void(0)">Web Design Principles</a>
              </li>
              <li><a href="javascript:void(0)">HTML</a>
              </li>
              <li><a href="javascript:void(0)">CSS</a>
              </li>
              <li><a href="javascript:void(0)">JavaScript</a>
              </li>
              <li><a href="javascript:void(0)">XML</a>
              </li>
              <li><a href="javascript:void(0)">PHP</a>
              </li>
              <li><a href="javascript:void(0)">MySQL</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Practicals
                <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)">HTML</a>
              </li>
              <li><a href="javascript:void(0)">CSS</a>
              </li>
              <li><a href="javascript:void(0)">JavaScript</a>
              </li>
              <li><a href="javascript:void(0)">XML</a>
              </li>
              <li><a href="javascript:void(0)">PHP</a>
              </li>
              <li><a href="javascript:void(0)">MySQL</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Q & A
                <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)">Basics of Web</a>
              </li>
              <li><a href="javascript:void(0)">Web Design Principles</a>
              </li>
              <li><a href="javascript:void(0)">HTML</a>
              </li>
              <li><a href="javascript:void(0)">CSS</a>
              </li>
              <li><a href="javascript:void(0)">JavaScript</a>
              </li>
              <li><a href="javascript:void(0)">XML</a>
              </li>
              <li><a href="javascript:void(0)">PHP</a>
              </li>
              <li><a href="javascript:void(0)">MySQL</a>
              </li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="text" class="form-control col-md-8" placeholder="Search">
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="well">
      Google Adsense (Manual Responsive) 728x90 Leaderboard + 468x60 Small Leaderboard + 180x150 Small Rectangle
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">Basics of Web</h3>
          </div>
          <div class="panel-body">
            Concept of WWW, Internet and WWW, HTTP Protocol : Request and Response, Web browser and Web servers, Features of Web 2.0
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">Web Design Principles</h3>
          </div>
          <div class="panel-body">
            Concepts of effective web design, Web design issues including Browser, Bandwidth and Cache, Display resolution
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">Google Adsense</h3>
          </div>
          <div class="panel-body">
            300x250 Adsense Content
            <br/>300x250 Adsense Content
            <br/>300x250 Adsense Content
            <br/>300x250 Adsense Content
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">HTML</h3>
          </div>
          <div class="panel-body">
            Basics of HTML, formatting and fonts, commenting code, color, hyperlink, lists, tables, images, forms, XHTML, Meta tags, Character entities, frames
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">CSS</h3>
          </div>
          <div class="panel-body">
            Need for CSS, introduction to CSS, basic syntax and structure, using CSS, background images, colors and properties, manipulating texts, using fonts, borders and boxes
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">Content.Ad</h3>
          </div>
          <div class="panel-body">
            300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">JavaScript</h3>
          </div>
          <div class="panel-body">
            Client side scripting with JavaScript, variables, functions, conditions, loops and repetition, Pop up boxes, Advance JavaScript: Javascript and objects, JavaScript own objects, the DOM
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">XML</h3>
          </div>
          <div class="panel-body">
            Introduction to XML, uses of XML, simple XML, XML key components, DTD and Schemas, Using XML with application. Transforming XML using XSL and XSLT
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">Content.Ad</h3>
          </div>
          <div class="panel-body">
            300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">PHP</h3>
          </div>
          <div class="panel-body">
            Introduction and basic syntax of PHP, decision and looping with examples, PHP and HTML, Arrays, Functions, Browser control and detection, string, Form processing, Files
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">MySQL</h3>
          </div>
          <div class="panel-body">
            Basic commands with PHP examples, Connection to server, creating database, selecting a database, listing database, listing table names, creating a table, inserting data
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="panel panel-primary panel-up">
          <div class="panel-heading">
            <h3 class="panel-title">Content.Ad</h3>
          </div>
          <div class="panel-body">
            300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
            <br/>300x250 Advt. Content
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="well">
      Google Adsense (Manual Responsive) 728x90 Leaderboard + 468x60 Small Leaderboard + 180x150 Small Rectangle
    </div>
  </div>

</body>

</html>

请参考此代码笔

4

1 回答 1

0

您需要初始化材料设计插件,如:

$.material.init();

codepen 也缺少 jQuery 和 Bootstrap 的 JavaScript 的 CDN。您的本地参考资料在<head>那里不起作用。

更新了代码笔

于 2016-05-12T04:19:34.717 回答