In questa lezione impariamo section, divider, un esempio di tabella di promozione ed un esempio di layout con navigazione laterale.
Qui mostreremo come creare alcuni layout di uso comune con class=”section” e class=”divider”.
Section
La class=”section” viene utilizzata per creare un padding top e bottom, basta aggiungerlo a un div.
Divider
I class=”divider” sono linee di 1 pixel che aiutano a suddividere i tuoi contenuti, basta aggiungerlo a un div tra i tuoi contenuti.
<!DOCTYPE html>
<html>
<head>
<title>Section e Divider</title>
<meta charset="UTF-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1>Section e Divider</h1>
<div class="divider"></div>
<div class="divider"></div>
<div class="section">
<h5>Section 1</h5>
<p>Materialize</p>
</div>
<div class="divider"></div>
<div class="section">
<h5>Section 2</h5>
<p>Materialize</p>
</div>
<div class="divider"></div>
<div class="section">
<h5>Section 3</h5>
<p>Materialize</p>
</div>
<div class="divider"></div>
</div>
</div> <!-- /.container -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>
</html>
Esempio di tabella di promozione
Se vogliamo 3 div di uguale dimensione, definiamo i div con una larghezza di 4 colonne, in quanto 4 + 4 + 4 = 12. All’interno di questi div, possiamo mettere il nostro contenuto.
<!DOCTYPE html>
<html>
<head>
<title>Promotion Table</title>
<!-- Compiled and minified CSS -->
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1>Esempio di tabella di promozione</h1>
<div class="divider"></div>
<div class="col s4">
<h3>Lorem Ipsum...</h3>
<p> è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</p>
</div>
<div class="col s4">
<h3>Lorem Ipsum...</h3>
<p> è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</p>
</div>
<div class="col s4">
<h3>Lorem Ipsum...</h3>
<p> è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</p>
</div>
</div>
</div> <!-- /.container -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>
</html>
Esempio di layout con navigazione laterale
Puoi vedere quanto è facile creare layout usando il sistema di griglia. Ricordati solo di assicurarti che i numeri delle tue colonne contengano fino a 12 per un layout uniforme.
<!DOCTYPE html>
<html>
<head>
<title>Side Navigation Layout</title>
<meta charset="UTF-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<!-- Navbar goes here -->
<div class="row">
<div class="col s12">
<h1>Navbar</h1>
</div>
</div>
<!-- Page Layout here -->
<div class="row">
<div class="col s3">
Navigation panel
</div>
<div class="col s9">
<h3>Lorem Ipsum...</h3>
<p> è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</p>
</div>
</div>
</div> <!-- /.container -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>
</html>