如何使Materialise的超大屏幕

我試圖建立一個註冊網頁這樣一個Sign up page 如何使Materialise的超大屏幕

我檢查的源代碼，它採用了棱角分明的材料設計。所以無法弄清楚如何使用Matrialize.css本身來做到這一點。它與Bootstrap中的Jumbotron類似。但我想它的實現並不像引導期那麼簡單。我想這是使用Materialize中的卡完成的。但我無法制作或複製相同的東西。任何人都可以闡明如何在Materialize中正確使用卡片。

謝謝

來源

2015-10-07 Abhi80

我在下面的代碼創建簡單的標誌了Materialise的頁面：

<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/鏈接。

來源

2015-10-17 07:11:17

我正在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;

來源

2017-05-31 14:40:43

如何使Materialise的超大屏幕

回答

相關問題