Para usar materialize primero vamos a configurar la pagina para llamar los scripts y estilos necesarios para el correcto funcionamiento de materialize. Para esto hacemos uso del siguiente código html:
<!DOCTYPE html>
<html>
<head>
<!--Importamos Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Importamos materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection"/>
<!--Siempre se debe importar jQuery antes de materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
</body>
</html>
Dentro de las etiquetas body colocamos los componentes materialize que queramos usar, a continuación dejo el código funcional en codepen.io, desde ahí pueden probarlo y copiarlo para usarlo en sus proyectos. Espero les sirva.
0 Comments:
Publicar un comentario