Fundación - Ordenamiento de fuentes

Descripción

La clase de ordenación de fuentes se utiliza para cambiar las columnas entre los puntos de interrupción. La navegación secundaria puede ser una opción para colocar la columna en el lado izquierdo o derecho de la página en cualquier dispositivo. La clase push / pull se puede aplicar a cualquier tamaño de dispositivo, que desee preferir, por ejemplo,medium-push/pull-*, large-push/pull-*, small-push/pull-*.

Ejemplo

El siguiente ejemplo demuestra el uso de la ordenación de fuentes en 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>
      <h2>Source Ordering</h2>

      <div class = "row">
         <div class = "small-5 small-push-7 columns" style = "background-color:#8BD6EE;">
            Small push class
         </div>

         <div class = "small-7 small-pull-5 columns" style = "background-color:#C0B0F0;">
            small pull class
         </div>
      </div>

      <div class = "row">
         <div class = "large-2 large-push-10 columns" style = "background-color:#808000;">
            Large push class
         </div>

         <div class = "large-10 large-pull-2 columns" style = "background-color:#FF6347;">
            Large pull class
         </div>
      </div>

      <div class = "row">
         <div class = "medium-9 medium-push-3 columns" style = "background-color:#C0B0F0;">
            Medium push class
         </div>

         <div class = "medium-3 medium-pull-9 columns" style = "background-color:#8BD6EE;">
            Medium pull class
         </div>
      </div>

   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente source_ordering.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page