< Front-end framework

Materialize

Szerző: Sallai András

Copyright © 2021, Sallai András

Szerkesztve: 2021, 2024

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A Materialize

Webhely:

https://materializecss.com/

Materialize kezdés

npm install materialize-css@next

Weblap előkészítése

<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css">
<script src="node_modules/materialize-css/dist/js/materialize.js"></script>

Konténer

<div class="container"> <!-- Tartalom --> </div>

Színek

https://materializecss.com/color.html (2024)

<div class="teal lighten-2">alma</div>

Grid

<div class="row"> <div class="col s1">1</div> <div class="col s1">2</div> <div class="col s1">3</div> <div class="col s1">4</div> <div class="col s1">5</div> <div class="col s1">6</div> <div class="col s1">7</div> <div class="col s1">8</div> <div class="col s1">9</div> <div class="col s1">10</div> <div class="col s1">11</div> <div class="col s1">12</div> </div>

Segítők

Igazítás

.left-align

.right-align

.center-align

<div> <h5 class="left-align">Lorem ipsum dolor est amet</h5> </div> <div> <h5 class="right-align">Lorem ipsum dolor est amet</h5> </div> <div> <h5 class="center-align">Lorem ipsum dolor est amet</h5> </div>