Materialise CSS es un lenguaje de diseño que se hizo con CSS, JavaScript y HTML. Está hecho y planificado por Google. Materialise es creado y diseñado por Google. El objetivo de Google es desarrollar un diseño de sistema que permita una mejor experiencia de usuario en todos los productos en cualquier plataforma. También hace que la página web responda a dispositivos móviles.
Usando Materialise CSS
1. Instalación local: puede descargar archivos de Materialise en su sistema e incluirlos en su archivo HTML.
<link rel="stylesheet" href="css/materialize.min.css"> <script src="js/materialize.min.js"></script>
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="js/materialize.min.js">
</script>
</head>
<body>
<div class="container">
<div id="gfg" class="card-panel green">
<h3 class="white-text text-accent-3">
GeeksforGeeks
</h3>
</div>
<h4 onclick=
"M.toast({html: 'CS Portal for geeks'})"
class="btn blue">
Click Me
</h4>
</div>
</body>
</html>
Producción:
2. Usando el enlace CDN: puede usar el enlace CDN para ejecutar el código sin instalarlo. Incluya los siguientes enlaces CDN dentro de la etiqueta principal.
<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
<script src=”https://cdnjs. cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </head> <body> <div id="gfg" class="card-panel green"> <h1 class="white-text text-accent-3"> Hello World by GeeksforGeeks </h1> </div> </body> </html>
Producción:
Basado en CDN
Instale Materialise usando npm: antes de instalarlo en su sistema, primero instale node.js y npm y luego ejecute el siguiente comando en la terminal:
npm install materialize-css@next
Después de usar esta estructura de carpetas de comandos, se parece a la imagen de abajo. A continuación, puede acceder a los componentes de Materialise en su aplicación.
Instale Materialise usando Bower:
Antes de instalar el paquete Bower de Materialise, instale Bower primero, ya que le dará un error.
npm install -g bower
Use este comando para instalar el paquete Bower de Materialise en su sistema
bower install materialize
Después de usar esta estructura de carpetas de comandos, se parece a la imagen de abajo. A continuación, puede acceder a los componentes de Materialise en su aplicación.
Nota: Bower ha quedado obsoleto.
Publicación traducida automáticamente
Artículo escrito por gurjeetsinghvirdee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA