Interfaccia utente semantica - la migliore interfaccia Ui per il layout (righe/colonne vs segmenti)

Sono nuovo di Semantic UI e sto cercando di progettare una pagina Web con il layout sottostante. Guardando la documentazione, ho deciso di usare ui page grid. Ho anche deciso di definire il menu fisso in alto al di fuori della griglia.Interfaccia utente semantica - la migliore interfaccia Ui per il layout (righe/colonne vs segmenti)

enter image description here

Il mio primo approccio è stato qualcosa di simile:

<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>

La mia domanda è:

E 'l'approccio corretto per ottenere un layout simile a quello dell'immagine? Devo usare segments per dividere il contenuto anziché le righe o le colonne?

Grazie in anticipo!

fonte

2015-04-11 Let_IT_roll

L'UI semantica voleva segments per indicare parti di testo/articoli. Essi left a small note:

Un segmento viene utilizzato per creare un raggruppamento di contenuti correlati. I segmenti orizzontali vengono utilizzati più efficacemente con le griglie, per consentire il testo dei gruppi allineati tra le righe della griglia.

In sostanza, significano che grid è il fondamento del vostro markup. Il grid è stato progettato per la posa della pagina.

È possibile utilizzare segments all'interno della griglia per raggruppare contenuti simili. (Se si guarda più nei documenti, si può vedere che intenzioni dove hanno stacked, piled, loading classi per segments.)

Per esempio, mi piacerebbe avere tre celle in basso a sinistra come una sorta di notizie. Poi mi piacerebbe utilizzare segmenti c'è:

<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>

Grid with segments

fonte

2015-04-12 19:52:37 garyF

Got it! Ciò significa che qualsiasi contenuto che non sia testo non dovrebbe essere raggruppato usando 'segment'. Inizialmente l'ho usato perché avevo bisogno di dividere le celle di sinistra con un divisore orizzontale e 'segment' lo aggiunge automaticamente tra i diversi contenuti. Quindi, l'approccio più corretto per ottenere qualcosa del genere sarebbe utilizzare 'colonne' e' righe' e 'ui divisori' tra, giusto? –

ah! questo è rischioso : P TLDR: sì. Ho appena dato un'occhiata ai documenti di classe 'divider', dove hanno menzionato che i divisori verticali e orizzontali possono essere utilizzati per segmentare il contenuto. (sovrapposizione di parole, non credi? ;-)) ma suppongo che intendano dividere il contenuto non correlato qui. :-) spero che questo aiuti! ~ piccola nota: 'segmenti' può essere utilizzato per (correlate) cose diverse dal testo pure. come un elenco di immagini in miniatura per un prodotto in una pagina del negozio. – garyF

Interfaccia utente semantica - la migliore interfaccia Ui per il layout (righe/colonne vs segmenti)

risposta

Problemi correlati