Sémantique de l'INTERFACE utilisateur l'interface utilisateur de la grille de la meilleure approche pour la mise en page (lignes/colonnes de vs segments)

Je suis nouveau sur Sémantique de l'INTERFACE utilisateur et je suis en train de concevoir une page web avec la mise en page ci-dessous. Regarder la documentation, j'ai décidé d'utiliser ui page grid. J'ai aussi décidé de définir le top menu fixe à l'extérieur de la grille.

Ma première approche a été quelque chose comme 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 réaliser une mise en page similaire à celle de l'image ? Dois-je utiliser segments pour diviser le contenu au lieu de lignes ou de colonnes ?

Vous en remercie d'avance !

OriginalL'auteur Let_IT_roll | 2015-04-11

grid semantic-ui

19

Sémantique de l'INTERFACE utilisateur voulais segments à dire les parties de texte/articles. Ils à gauche une petite note:

Un segment est utilisé pour créer un regroupement de contenu. Horizontale
les segments sont plus efficaces avec des grilles, afin de permettre le texte
les groupes qui sont alignés à l'échelle des lignes de la grille.

En substance, cela signifie que grid est la fondation de votre balise. Le grid a été conçu pour la pose de la page.

Vous pouvez utiliser segments au sein de votre grille de groupe contenu similaire. (Si vous regardez de plus dans les docs, vous pouvez voir que l'intention où ils ont stacked, piled, loading classes pour segments.)

Par exemple, j'aimerais avoir les trois cellules en bas à gauche, comme une sorte de flux d'actualités. Puis je utiliser des segments de marché:
```
<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>
```
De se ! Cela signifie que tout le contenu qui n'est pas du texte ne doivent pas être regroupés à l'aide de segment. J'ai d'abord utilisé parce que j'avais besoin de diviser la gauche cellules avec une séparation horizontale et segment ajoute automatiquement entre les différents contenus. Ensuite, l'approche la plus correcte pour la réalisation de quelque chose comme ce serait en utilisant columns et rows et ui dividers entre, droite ?
ah! c'est risqué. 😛 TLDR: oui. J'ai juste eu un coup d'oeil à la divider classe docs, où ils ont mentionné que les verticales et horizontales diviseurs peuvent être utilisés pour segmenter le contenu. (chevauchement de paroles, vous ne pensez pas? ;-)) mais je suppose qu'ils signifient pour diviser sans rapport avec le contenu ici. 🙂 espérons que cette aide!~ petite note: segments peut être utilisé pour la (relative) d'autres choses que de texte. comme une liste d'images miniatures pour un produit sur une boutique de la page.

OriginalL'auteur garyF

Vous pouvez utiliser le stretched grid à l'étirement de la segments de la verticale, de sorte qu'ils ont la même hauteur. Et l'utilisation de la .ui.segments pourrait vous aider à avoir un code propre. [Démo en Ligne]

Sémantique de l'INTERFACE utilisateur l'interface utilisateur de la grille de la meilleure approche pour la mise en page (lignes/colonnes de vs segments)

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>

OriginalL'auteur Yami Odymel

Vous devez vous connecter pour publier un commentaire.