Materializza - Piè di pagina

Materialise fornisce classi speciali per rappresentare vari tipi di raccolte in cui una raccolta rappresenta un gruppo di elementi di informazioni correlate.

Sr.No. Nome e descrizione della classe
1

page-footer

Imposta il contenitore div come piè di pagina.
2

footer-copyright

Imposta il contenitore div come contenitore del copyright del piè di pagina.

Esempio

L'esempio seguente mostra l'uso delle classi piè di pagina per mostrare un piè di pagina di esempio.

materialize_footer.htm

<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <footer class = "page-footer">
         <div class = "row">
            <div class = "col s12 m6 l6">
               <h5 class = "white-text">Footer Content</h5>
            </div>
            
            <div class = "col">
               <ul>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     Help</a></li>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     Privacy and Terms</a></li>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     User Agreement</a></li>
               </ul>
            </div>
         </div>
         
         <div class = "footer-copyright">
            <div class = "container">
               © 2016 Copyright Information
               <a class = "grey-text text-lighten-4 right" href = "#!">Links</a>
            </div>
         </div>         
       </footer>
   </body>   
</html>

Risultato

Verifica il risultato.