¿Cómo instalar y usar Materialise CSS?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *