Fondazione - Nidificazione

Descrizione

Possiamo annidare le colonne delle griglie all'interno delle colonne. In una colonna, possiamo definire molte più colonne al suo interno.

Esempio

L'esempio seguente mostra l'uso della nidificazione in Foundation:

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <div class = "row">
         <h2>Grid - Nested Columns</h2>
         <div class = "small-9 columns"  style = "background-color:#8BD6EE;">
            <h4>Main column small-9</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

            <div class = "row">
               <div class = "small-6 columns"  style = "background-color:#808000;">
                  Nested inside the small-9 class
               </div>

               <div class = "small-6 columns"  style = "background-color:#FF6347;">
                  Nested inside the small-9 class
               </div>
            </div>

         </div>

         <div class = "small-3 columns" style = "background-color:#808000;">Column small-3 class
            <div class = "row">
               <div class = "small-8 columns" style = "background-color:#7B68EE;">
                  Nested inside small-3 class
               </div>
            </div>
         </div>

      </div>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato nested.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.