Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.
En este artículo, veremos el diseño del posicionamiento de la barra lateral como filas. Podemos colocar la barra lateral como filas, es decir, mostrarla primero o último, o también podemos ocultarla.
Primer CSS Layout Sidebar posicionamiento como filas Clases:
- Layout–sidebarPosition-flowRow-start: esta clase representa la barra lateral en la parte superior del contenedor principal cuando se apila. Este es el posicionamiento predeterminado de la barra lateral como filas.
- Layout–sidebarPosition-flowRow-end: esta clase representa la barra lateral después del contenedor principal cuando se apila.
- Layout–sidebarPosition-flowRow-none: esta clase oculta la barra lateral cuando se apila.
Sintaxis:
<div class="Layout Layout--sidebarPosition-flowRow-start |
Layout--sidebarPosition-flowRow-end |
Layout--sidebarPosition-flowRow-none">
<div class="Layout-main border">...</div>
<div class="Layout-sidebar border">...</div>
</div>
Ejemplo 1: el siguiente ejemplo muestra la barra lateral de diseño con una fila que tiene una posición de inicio.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2> Primer CSS Layout Sidebar Position as rows </h2> </div> <div class="Layout Layout--sidebarPosition-flowRow-start m-4"> <div class="Layout-main border p-2 color-bg-success"> Main Content </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Sidebar Content </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la barra lateral de diseño con una fila que tiene una posición final.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2> Primer CSS Layout Sidebar Position as rows </h2> </div> <div class="Layout Layout--sidebarPosition-flowRow-end m-4"> <div class="Layout-main border p-2 color-bg-success"> Main Content </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Sidebar Content </div> </div> </body> </html>
Producción:
Ejemplo 3: El siguiente ejemplo muestra la barra lateral de diseño con una fila que no tiene ninguna posición. La barra lateral estará oculta para los dispositivos de pantalla mediana o pequeña.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Primer CSS Layout Sidebar Position as rows</h2> </div> <div class="Layout Layout--sidebarPosition-flowRow-none m-4"> <div class="Layout-main border p-2 color-bg-success"> Main Content </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Sidebar Content </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/layout#sidebar-positioning-as-rows
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA