如何制作 Materialise Jumbotron
Posted
技术标签:
【中文标题】如何制作 Materialise Jumbotron【英文标题】：How to make a Materialize Jumbotron 【发布时间】：2016-01-04 23:21:55 【问题描述】：我正在尝试建立一个类似Sign up page的注册页面
我检查了源代码，它使用角度材料设计。所以无法弄清楚如何使用 Matrialize.css 本身来做到这一点。 它类似于引导程序中的 Jumbotron。但我想它的实现并不像在引导程序中那么简单。 我想这是使用 Materialize 中的卡片完成的。但我无法生产或复制同样的东西。任何人都可以阐明如何在 Materialise 中正确使用卡片。
谢谢
【问题讨论】：
【参考方案1】：我在下面的代码中使用 Materialize 创建了简单的注册页面：
<html>
<head>
<title>Sign Up</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<!-- icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
</head>
<body>
<div class="row">
<div class="col s12 m10">
<h5>Sign Up </5>
<div class="card-panel ">
<h6>Sign up with your email address.</h6>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s8">
<i class="mdi-communication-email prefix"></i>
<input id="email" type="email" class="validate">
<label for="email">Your email</label>
</div>
</div>
<div class="row">
<div class="input-field col s8">
<i class="mdi-action-lock-outline prefix"></i>
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s8">
<i class="mdi-action-lock-outline prefix"></i>
<input id="password" type="password" class="validate">
<label for="password">Confirm Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a href="index.html" class="btn waves-effect waves-light col "><h6>Create Account</h6></a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Compiled and minified javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
</body>
</html>
如果您想了解有关 materliaze 的更多信息，可以查看www.materializecss.com/ 链接。
【讨论】：
【参考方案2】：我在 React 中工作，并且我已经成功地使用 Materialize 中的 Card Panel 类创建了一个 Jumbotron。它确实带有一个盒子阴影，您可以根据需要将其移除。
import React, Component from 'react';
const jumbotronStyle =
paddingBottom: '150px',
boxShadow: "0px 0px 0px 0px rgba(0,0,0,0)"
class Home extends Component
render()
return (
<div className="card-panel grey lighten-2" style=jumbotronStyle>
<div className="container">
<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
);
export default Home;
【讨论】：
以上是关于如何制作 Materialise Jumbotron的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Materialise 线性不确定进度条作为页面预加载器？
如何在 Materialise Date Picker 中设置默认日期？