web-dev-qa-db-fra.com

Interface utilisateur sémantique - meilleure approche de la grille ui pour la mise en page (lignes/colonnes vs segments)

Je suis nouveau sur UI Sémantique et j'essaie de concevoir une page Web avec la mise en page ci-dessous. En regardant la documentation, j'ai décidé d'utiliser ui page grid. J'ai également décidé de définir le menu fixe supérieur en dehors de la grille.

enter image description here

Ma première approche ressemblait à ceci:

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

Ma question est:

Est-ce la bonne approche pour obtenir une mise en page similaire à celle de l'image? Devrais-je utiliser segments pour diviser le contenu au lieu de lignes ou de colonnes?

Merci d'avance !

gridsemantic-ui
17
Let_IT_roll

L'interface utilisateur sémantique voulait que segments désigne des parties de texte/d'articles. Ils ont laissé une petite note :

Un segment est utilisé pour créer un groupe de contenu lié. Horizontal les segments sont le plus efficacement utilisés avec des grilles, pour permettre le texte groupes alignés sur les lignes de la grille.

Essentiellement, ils signifient que grid est le fondement de votre marquage. La grid a été conçue pour la mise en page.

Vous pouvez utiliser segments dans votre grille pour regrouper un contenu similaire. (Si vous regardez plus dans la documentation, vous pouvez voir cette intention là où ils ont stacked, piled, loading classes pour segments.)

Par exemple, j'aimerais que les trois cellules en bas à gauche servent de flux de nouvelles. Ensuite, j'utiliserais des segments ici:

<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

19
garyF

Vous pouvez utiliser le stretched grid pour étirer les segments verticalement afin qu'ils aient la même hauteur. Et utiliser le .ui.segments pourrait vous aider à garder le code propre. [Démo en ligne]

 enter image description here

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>
1
Yami Odymel