我正在使用fezvrasta的Material Design for 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>
请参阅此codepen。
答案 0 :(得分：0)
您需要初始化材质设计插件，如：
$.material.init();
同样，codepen缺少CDN对jQuery和Bootstrap的JavaScript。您在<head>的本地参考资料不会在那里工作。