Как сделать материализовать JumboTron

Я пытаюсь построить зарегистрируйся страницы как этот Sign up page Как сделать материализовать JumboTron

Я проверил исходный код, используя его угловатый дизайн материала. Поэтому не удалось выяснить, как это сделать, используя Matrialize.css. Он похож на Jumbotron в бутстрапе. Но я предполагаю, что его реализация не так проста, как в бутстрапе. Я полагаю, что это делается с использованием карт в Materialize. Но я не могу производить или воспроизводить то же самое. Может ли кто-нибудь пролить свет на то, как правильно использовать карты в Materialize.

Спасибо

источник

2015-10-07 Abhi80

У меня есть создать простой знак на страницу с материализуются в код ниже:

<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

Я работаю в реактиве, и мне удалось создать Jumbotron, используя класс Card Panel в Materialize. Он поставляется с теневой коробкой, которую вы можете удалить, если хотите.

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

Как сделать материализовать JumboTron

ответ

Смежные вопросы