Materialize es un marco de diseño moderno que utiliza principios de diseño de material para crear interfaces de usuario interactivas y atractivas. Aquí te mostramos cómo puedes crear una plantilla básica utilizando Materialize.
Primero, necesitas incluir Materialize en tu proyecto. Puedes hacerlo agregando los siguientes enlaces a tu archivo HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Importar Google Icon Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Importar Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></head>
<body>
<!-- Tu contenido aquí -->
<!-- Importar jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Importar Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Materialize proporciona una barra de navegación fácil de usar que puedes personalizar para tu sitio web. Aquí te mostramos cómo puedes agregar una:
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
Para el contenido principal de tu sitio web, puedes usar un contenedor que mantendrá tu contenido centrado y proporcionará un relleno:
<div class="container">
<!-- Tu contenido aquí -->
</div>
Las tarjetas son una buena manera de presentar contenido en bloques. Aquí te mostramos cómo puedes crear una:
<div class="card">
<div class="card-content">
<span class="card-title">Título de la Tarjeta</span>
<p>Contenido de la tarjeta.</p>
</div>
<div class="card-action">
<a href="#">Acción 1</a>
<a href="#">Acción 2</a>
</div>
</div>
Algunos componentes de Materialize requieren inicialización con JavaScript. Puedes hacerlo al final de tu archivo HTML:
<script>
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
¡Eso es todo! Ahora tienes una plantilla básica de Materialize que puedes personalizar para adaptarse a tus necesidades.
Desarrollando los Modelos, Controladores y Enrutamiento en PHP para nuestro sistema de usuarios.
Una serie de consultas MySQLi que puedes utilizar a la hora de comenzar a crear tus propios proyectos utilizando PHP Y MySQL..
Hola mi nombre es Eduardo Nava, Soy programador, diseñador web, móvil y de videojuegos.
El mundo digital avanza cada día.
Soy completamente autodidacta, por eso te ofrezco muchos de mis conocimientos para puedas aprender más fácilmente y más rápido de lo que hice y hago cada día.
Mi propósito es tratar mi pasión para enseñar tecnologías que avanzan cada día a todas esas personas, que quieran iniciarse en este mundo de forma actualizada.