Question

我正在尝试建立一个像Sign up page

这样的注册页面

我检查了源代码，它使用了角度材料设计。因此，使用Matrialize.css本身无法弄清楚如何做到这一点。它类似于引导程序中的Jumbotron。但我猜它的实现并不像bootstrap那样简单。我想这是使用Materialise中的卡片完成的。但我无法制作或复制同样的东西。任何人都可以了解如何在Materialise中正确使用卡片。

谢谢

Answer 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/链接。

Answer 2

我在React工作，我设法在Materialise中使用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

2 个答案: