Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:front-end_framework:materialize

< Front-end framework

Materialize

A Materialize

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

<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>
    <div class="row">
      <div class="col s12">12-oszlop - teljes szélességet elfoglal</div>
      <div class="col s6">6-oszlop - szélesség fele</div>
      <div class="col s6">6-oszlop - szélesség fele</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>

Média

Képek

<img class="responsive-img" src="kepnev.jpg">
oktatas/web/front-end_framework/materialize.txt · Utolsó módosítás: 2024/03/23 11:14 szerkesztette: admin