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 sobre el posicionamiento de la barra lateral de diseño. Podemos cambiar la posición de la barra lateral ya sea al inicio/izquierda o al final/derecha.
Primer CSS Layout Posicionamiento de la barra lateral Clases:
- Layout–sidebarPosition-start: esta clase se usa para establecer la posición de la barra lateral al inicio o a la izquierda. Este es el posicionamiento predeterminado de la barra lateral.
- Layout–sidebarPosition-end: esta clase se usa para establecer la posición de la barra lateral al final o a la derecha.
Sintaxis:
<div class="Layout Layout--sidebarPosition-start"> <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 la 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 </h2> </div> <div class="Layout Layout--sidebarPosition-start m-4"> <div class="Layout-main border p-2 color-bg-success"> GeeksforGeeks </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Learn more about it here. </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la barra lateral de diseño con la 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 </h2> </div> <div class="Layout Layout--sidebarPosition-end m-4"> <div class="Layout-main border p-2 color-bg-danger"> Welcome to the community! </div> <div class="Layout-sidebar border p-2 color-bg-success"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/layout#sidebar-positioning
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA