grid - moviles - Interfaz de usuario semántica: el mejor enfoque de la cuadrícula ui para el diseño(filas/columnas frente a segmentos)
interfaz web ejemplos (2)
Soy nuevo en la interfaz de usuario semántica y estoy tratando de diseñar una página web con el diseño a continuación. En cuanto a la documentación, he decidido utilizar la ui page grid . También he decidido definir el menú fijo superior fuera de la cuadrícula.
Mi primer acercamiento fue algo como esto:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="row"> Left column, row 1</div>
<div class="row"> Left column, row 2</div>
<div class="row"> Left column, row 3</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body>
Mi pregunta es:
¿Es el enfoque correcto para lograr un diseño similar al de la imagen? ¿Debo usar segments para dividir el contenido en lugar de filas o columnas?
Gracias de antemano !
La IU semántica quería que los segments significaran partes de texto / artículos. Dejaron una pequeña nota :
Un segmento se utiliza para crear una agrupación de contenido relacionado. Los segmentos horizontales se usan más efectivamente con cuadrículas, para permitir que los grupos de texto estén alineados en las filas de la cuadrícula.
En esencia, significan que la grid es la base de su marca. La grid ha sido diseñada para el trazado de la página.
Puedes usar segments dentro de tu cuadrícula para agrupar contenido similar. (Si miras más en los documentos, puedes ver esa intención donde se han stacked , piled , loading clases para los segments ).
Por ejemplo, me gustaría tener las tres celdas en la parte inferior izquierda como una fuente de noticias. Entonces usaría segmentos allí:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="ui segment">
<div class="ui vertical segment">
<p>Left column, row 1</p>
</div>
<div class="ui vertical segment">
<p>Left column, row 2</p>
</div>
<div class="ui vertical segment">
<p>Left column, row 3</p>
</div>
</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body>
Podría usar la stretched grid para estirar los segmentos verticalmente, para que tengan la misma altura. Y usar .ui.segments podría ayudarlo a mantener el código limpio. [ Demo en línea ]
CSS
.segment {
min-height: 100px;
}
HTML
<div class="ui horizontal segments">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="ui stretched two column grid">
<div class="column">
<div class="ui vertical segments">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
</div>
<div class="column">
<div class="ui segment"></div>
<div class="ui segment"></div>
</div>
</div>